It's all in the details, and rules are important. CSS is the acronym for Cascading Style Sheets. CSS is an extension to basic HTML that allows you to "style" how the content within your web pages will look. With CSS you can set up rules (or definitions) to tell specific HTML tags how to display content, or you can create rules and apply them to tags when you need them. Each browser has a set of parameters for how it reads paragraphs, headings, tables, etc., and then renders it on your screen. Each of the tags can be defined so that you can tell the browser how to display it. With this in mind, you can think of your CSS file as a sort of dictionary with a clear definition of how each item is displayed on the screen.
All HTML tags have default properties. With CSS you can define any HTML tag to change the defaults.
You can define a style for multiple tags at one time by separating each html tag name with a comma.
A class is a rule that can be applied to an HTML tag. You can give a class any name you want with the exception of a few reserved words.
Classes have an advantage in that you can create a number of different classes and apply them to different paragraphs, headings, divs, etc.
ID rules are similar to a class, but they can only be applied once on a page to a particular HTML tag. IDs are commonly used in CSS positioned layouts since items like a header or footer are only going to appear once on a page. An ID rule looks like the following:
Each of the rule examples above (html selector, class, and ID), consist of three distinct parts. The first part of the rule is the type of selector whether it be an html selector, a class, or an ID. The selector is followed by a space and then a beginning curly brace. Within the curly brace will be the property. It is followed by a colon.
After the property will come the value of that property. Note that you can have more than one property and value in a rule. The value is followed by a semicolon. To end the rule, place the closing curly brace. You cannot have a property without a value nor a value without a property. Below is the syntax for a CSS rule:
You can also choose where to place your CSS rules. You can place them in an external style sheet (preferred), as an embedded style, or as an inline style. Note that classes and IDs cannot be applied or placed in an inline style.
An inline rule is a style that is attached to one specific tag. There may be times when you need a rule that you don't plan to use anywhere else. The syntax for an inline style rule is different from that of embedded or external styles:
Inline styles have both advantages and disadvantages. One advantage would be if you want to override an already defined style. A disadvantage is having a lot of inline styles adding bulk to your HTML coding.
An embedded rule is a style that is attached to one specific web page. Embedded styles are placed within the <head> section of the HTML page and the rules affect the entire page. An embedded rule would look like the following:
An external style sheet is the file containing CSS information that can be linked with any number of pages. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file.
External style sheets are text documents with a .css file extension. The syntax for linking to an external style sheet is:
Congratulations! Take a break and, when you are ready, move on to the next lesson.
