WORDPRESS Lesson 06.01 – Cascading Style Sheets (CSS)
Cascading Style Sheets Cascading Style Sheets, or CSS for short, allow us to specify the visual formatting rules for our HTML tags. Everything from font sizes, colors, dimensions of blocks that our tags represent, to specific positions on the screen, can be configured and setup by using CSS . What’s more, CSS styles inherit from one another, and can be re-used by many different tags at the same time.
Reusability CSS allow us to create styles that can be used by various HTML tags to define a specific look and feel. CSS saves us time and effort by allowing us to reuse styles that we've previous created. For example, if we wanted all level 1 headline tags (<h1>) to appear in red text, and with a yellow background, we could write a single style that defines these attributes: h1 { color:red; background-color:yellow; } Subsequently, we could simply use the <h1> tag within our web pages, and expect to see red text on a yellow background without us having to define this over and over again. Example: <h1>My Headline</h1> My Headline Later, if you wanted to make a global change, and set the background to green text on a purple background, all you would have to do is edit the h1 style and change the color attribute to green, and set the background attribute to purple. h1 { color:green; background-color:purple; }
CSS Styles CSS styles can be defined in their own CSS file, and then linked to all web pages that use it. Styles can also be defined within a page, and even inline, as a parameter to HTML tags. CSS Rules can be generic styles that can be used by tags. This is known as a " class ". They can also be specific to certain tags, such as in the previous example, where all headline tags were formatted a particular way.
<link> Tag Once you define a style sheet file (style.css), you’ll need a way to incorporate these styles into your site. Within your HTML files or WordPress PHP files, we can use the <link> tag to accomplish this: The link tag must be placed within the <head> section of your HTML (or PHP) file. Example: <link href="styles.css" rel="stylesheet" type="text/css"> rel- stands for RELATION, and in this case will always be a "stylesheet". • type- defines a type of document being loaded and how a browser is supposed to deal with it. In • the case of CSS, it is always "text/css" href- works identically to how its used with the <a> tag. You’ll need to specify the location and • filename for the .CSS document you’re trying to load.
<style> Tag If you need to include page specific styles within your HTML file, you can use the <style> tag. The style tag can define a CSS style within the header of a page. The rules defined there will be available to that page only. Syntax: <style type="text/css"> style definitions go here </style> The type attribute is always set to "text/css", and once again explains to the browser as to how to handle this type of <style>. CSS implemented using <style> is called a document style sheet, or an embedded style sheet.
style Attribute The third way of implementing style sheets within your content is to define them along with the HTML tag itself. This is called inline styles. By using the style attribute with, you are able to define a style that is used exclusively by the HTML tag the style is a parameter to. Example: <p style="color: gray;">My paragraph </p>
CSS Rules A CSS rule consists of one or more properties and value pairs. Each property / value pair is separated by a semi- colon, and property is separated from it’s value using a colon character. The rules allow us to modify the look and feel, position, or just about anything visual attribute of our HTML tags. For example, you can create a CSS rule for h2 tags setting it’s text color to gray. Once defined, all h2 tags will always appear in gray. Example: h2 {color:gray;}
CSS Definition h1 { color : gray; } Selector – this is the HTML Property – the Value – this is the value for the tag to be affected. Do not attribute that you attribute to be used on the tag. place < > signs around it. want to change. Selectors aren’t always HTML tags though.
CSS Definition Each selector definition is surrounded by { and } characters. Within those brackets you can include as many property / value pairs as necessary to complete the effect. Each property and its value will be separated by a : (colon) character, and each property / value pair will be separated by a ; (semi-colon) character. Examples: h1 { color:gray; background-color:black; } p {font:18pt Tahoma;}
Grouping You can also group multiple selectors to define a consistent look among different tags. Example: h1, h2, h3, h4, h5, h6 {color: gray;} would define all headline tags <h1> through <h6> as having gray text.
Class Selector We will eventually run into a problem if we modify HTML tags directly as in the previous examples. Lets assume that you define a <p> tag to be red, and use the Tahoma font. Now lets say that we are working with a document where you have a mix of paragraphs that should use different styles. Some should use the red text, and Tahoma font, and some should use an alternate font face, other than Tahoma, say Arial. Since your CSS style defined the <p> tag to always be red and use Tahoma, this becomes difficult to do. The solution is to use Class Selectors to distinguish between variety of definitions for the same element. A class is a generic style that can be applied to specific tags within your page.
class Attribute The "class" attribute can be used to apply class selectors to our HTML tags. Syntax for using the class attribute: <tag class="name"> Example: <p class="Warning">This is a warning message</p> The value in the class attribute is case-sensitive. Syntax for defining a class selector: .classname { property: value;} Note the period in front of "classname". The period is the identifier for class selectors in CSS. Example: .Warning {color:red; font-weight:bold;}
ID Selectors Another variation for CSS rules is the ID Selector . This rule is defined more or less exactly like a class selector, but will use a number symbol as the starting character instead of a period. ID Selectors can only be used once per page. Syntax for using: <tag id="name"> Example: <p id="Important">The important message goes here.</p> Syntax for defining: #idselectorname { property: value;} Example: #Important {font-weight:bold; color:blue;}
Pseudo-Classes Anchor tag <a> can use Pseudo-classes to define how links are viewed on a web page. Lots of interesting effects can be created using this type of class set: Example: A {color: blue; text-decoration: none; } A:visited {color: red; text-decoration: none; } A:active {color: orange; text-decoration: none; } A:hover {text-decoration: underline;} Pseudo-classes are separated by a : (colon) character between the pseudo-class and the tag itself.
Inheritance CSS support inheritance. This means that you can apply several styles to the same tag at the same time. Example: p { font-weight: bold; font: 'Tahoma';} .Warning { color: red;} <p class="Warning">My text</p> The above would render "My test" content using Tahoma font, in bold, and in red. So the properties of the style for the <p> tag have been merged with the Warning class, or Warning inherited <p>’s style . My text
The Cascade In the event that you define elements that somehow conflict with one another, CSS will use the rules of cascading precedence to deal with the problem. CSS styles are applied in the following order: • Browser Default settings • User style settings (set in browser) • Linked External style sheet • Imported style sheet • Embedded style sheet • Inline style sheet • HTML tag attributes Generally, the basic rule of thumb is that what ever rules are defined closest to the tag will always win and override rules that defined further up the execution chain.
CSS In WordPress In WordPress, we can edit the theme's style sheet, and other files directly using the Appearance section of the Dashboard. Select the Editor option, and choose the main.css file for editing.
Recommend
More recommend
