WORDPRESS Lesson 06.01 Cascading Style Sheets (CSS) Cascading Style - - PowerPoint PPT Presentation
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
Lesson 06.01 – Cascading Style Sheets (CSS)
Cascading Style Sheets, or CSS for short, allow us to specify the visual formatting rules for our HTML
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.
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: 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: 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:red; background-color:yellow; } <h1>My Headline</h1>
My Headline
h1 { color:green; background-color:purple; }
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.
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:
the case of CSS, it is always "text/css"
filename for the .CSS document you’re trying to load.
<link href="styles.css" rel="stylesheet" type="text/css">
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: 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 type="text/css"> style definitions go here </style>
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>
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;}
Selector – this is the HTML tag to be affected. Do not place < > signs around it. Selectors aren’t always HTML tags though. Property – the attribute that you want to change. Value – this is the value for the attribute to be used on the tag.
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;}
You can also group multiple selectors to define a consistent look among different tags. Example: would define all headline tags <h1> through <h6> as having gray text.
h1, h2, h3, h4, h5, h6 {color: gray;}
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
element. A class is a generic style that can be applied to specific tags within your page.
The "class" attribute can be used to apply class selectors to our HTML tags. Syntax for using the class attribute: Example: The value in the class attribute is case-sensitive. Syntax for defining a class selector: Note the period in front of "classname". The period is the identifier for class selectors in CSS. Example:
<tag class="name"> <p class="Warning">This is a warning message</p> .classname { property: value;} .Warning {color:red; font-weight:bold;}
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: Example: Syntax for defining: Example:
<tag id="name"> <p id="Important">The important message goes here.</p> #idselectorname { property: value;} #Important {font-weight:bold; color:blue;}
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: Pseudo-classes are separated by a : (colon) character between the pseudo-class and the tag itself.
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;}
CSS support inheritance. This means that you can apply several styles to the same tag at the same time. Example: 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
p { font-weight: bold; font: 'Tahoma';} .Warning { color: red;} <p class="Warning">My text</p>
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:
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.
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.