eXtensible Hyper Text Markup Language:
CSS
INFO202 Lynda Hodgson Summer 2010
Lets do it with Style
Cascading Style Sheets are used to vary color, font, size and other properties of elements in your page(s) CSS eliminates redundant coding
Define the rules only once
CSS helps you keep all pages in your site consistent
Use the same rules on every page Note to those with html experience: elements for bold, italics, frames and other presentation stuff have been deprecated in favor of CSS. They work, but should be avoided.
Anatomy of a Rule
Selector: element tag or part of the page to which the rule is applied
Property values: the real specifics of the aspect
H1{ font-family: Arial Black, font-style: italic, color: #FF0000}
Properties: the aspect of the element being set
enclosed in brackets separated by commas have values Specified after the colon Terms with spaces are enclose in quotes
So where do I put the rules?
Lets start with External Style Sheets
You can build one that works for ALL of your companys pages!
Open a new Notepad file
Enter all the rules you need (yes, you can have many of them in one Style Sheet) Save as a .css file
Add the extension to the filename Remember to select all files!
Here is an example
Separate the rules for the same selector with a semicolon Pepper liberally with comments to help you figure out what you were trying to do later! Color names Safe fonts
Link the structure with the presentation
Name of your style sheet
No comments about my artistic design capabilities, please! If you can do better, SHOW ME!
Other Properties you should know
font-size align decorate text (underline, line through, overline) indent boldness style (italics) All font properties at once Background image For a complete list, refer to the W3C
Lets add an Internal/Embedded
Style
External CSS file
specify styles that are inherited by all pages that use it
Are coded in the <head> of the page Apply only to the page that contains the embedded style Will override any style property specified in an external file Should be limited only to page-specific formatting!
Internal/Embedded Styles
If multiple pages will use it, put it in an external CSS to eliminate redundant code
How do I set it up?
Set up the style tags Add the rule(s)
Fancier stuff
Using style classes
When you have one type of tag but want to use multiple different styles. Can be used with external or embedded styles
Inline Styles
USE SPARINGLY IF AT ALL For occasional short text that is unique in the overall web site and unlikely to be used elsewhere Specify the style right in the tag!
<p style="color: green; font-family: serif "> This is a short text </p>
Style is an attribute of the tag
Rules are used like attribute values
What about changing a word?
Set up a style that spans something other than the usual elements. Span is a special type of element
<p> This sentence contains a <span style="font-size:150%"> big </span> word </p>
Span tags
Rule
Altogether now...
Embedded/Internal Style sheet
Inline Style
Inline using the <span> tag
What about your inheritance?
Scope
Elements on all pages
Browser
Defaults
External
Precedence
Used if there are no overrides
Elements on a single page
Embedded
Overrides external styles
Single element
In-line
Overrides all other styles
Your turn
You now have the tools to enhance your pages. Time to get to work!
