Website design and programming.Intro to CSS (Part 2 of 5): CSS Rules
Sunday, February 17th, 2008Continued from the series Intro to CSS.
Style Sheets
Properly used, style sheets can save you a lot of time and hassle.
Normally styling information is stored in an external file with the .css extension. Keeping this information is an external file comes in handy when changing the look of all pages in your website.
The 4 styling types and priority.
Generally speaking there are 4 areas that styling information can be found.
1. Browser default (Default style when no styling information is found.)
2. External style sheet (style.css)
3. Internal style sheet (Found inside the <head> tag.)
4. Inline style (Found inside a single HTML element.)
The greatest priority number in this list will override the other styling information. For example, if styling information is located in an external CSS file and also found inside the <head> of your page for the same element, then the information in the <head> will override the information found in the external style sheet.
The CSS syntax.
A basic line of CSS code would look like this: #menu { color: #ffffff; }
The syntax for CSS is made up of 3 parts.
1. Sector
2. Property
3. Value
Sector: Normally this is the HTML element or tag you wish to define. In our above example the sector would be #menu
Property: This is the attribute you are going to change. In our example the attribute we are changing is color.
Value: This is the value that you’re changing the attribute to. In our example the attribute for color is #ffffff(color white) NOTE: If a value contains multiple words, you must place it in quotations. Example, p {font-family: "sans serif"}
Comments.
Comments may be place inside a style sheet. This is very useful for making programming notes or debugging. Comments found in a style sheet are placed between ‘/*’ and ‘*/’ delimiters. Anything written inside the ‘/*’ and ‘*/’ is completed ignored by the browser.
Examples:
/* Start menu style */
#menu { color: #ffffff; }
Case-insensitive.
CSS is unaffected by upper or lower case code. However attributes not in control by CSS is. This includes URL’s, Font Names, HTML/XHTML attributes, and element/attribute names in XML. Generally CSS code is typed in all lower-case.
Pages
Archives
Categories
