where "NameOfFile" is the actual name of your file, of course.
The styles in a linked style sheet can therefore be used by many pages. Changing the original style sheet will automatically change all documents that use it.
In a linked style sheet you can define a style for any HTML element, like H1 or P or TABLE, or you can create classes that can be applied to an HTML tag. You can also create an ID selector to style an element with a particular ID. The ID can appear on a page only once.
Internal or Embedded Style sheet
A style sheet that is defined in the HEAD of the page itself. Applies only to that particular page. It overrides styling from all linked style sheets. All the rules are written between STYLE tags:
Styling that is applied directly to an HTML tag. It overrides both external and internal styling, but applies only at that one spot.
<span style="color:red"> This SPAN tag would set the text color to red.
Rule
A statement of the styles being set.
A simple rule has the form:
selector {property:value}
For example:
h3 {color:teal;
font-family:"Comic Sans MS", Helvetica, sans-serif;
font-size:12pt;}
This rule sets three properties (color, font-family, and font-size) for the H3 heading level.
Selector
The part of the rule that states what element of the page the styling will affect. For the rule p {font-size:10pt} P is the selector.
Declaration
The part of the rule that declares what formatting is applied to the selector element. In the h3 example above all the statements between the braces { } form the declaration.
A declaration is of the form: property:value
In the rule p {font-size:10pt} , the declaration is font-size:10pt, the property is font-size and the value is 10pt.
Class
A variation on an element tag. Below we see a rule for ordinary paragraphs and one for a paragraph with the class named second.
p {font-size:12pt;
color:blue;
font-family:"Times New Roman", Times, serif;}
p.second {font-family:Arial, Helvetica, sans-serif}
While the rule for the P element is applied whenever you use the P tag, you must call the class specifically.
To apply the P.second rule, you would use the syntax:
<p class="second"> instead of <p> in your document.
Note that the p.second rule inherits from the P rule those settings that it didn't specifically reset. In this case, using <P class="second"> will give you blue 12 point text but in Arial instead of Times New Roman. It's part of the 'cascade'.
ID
Any element can have an ID, like <div id="headerarea">. In a style sheet you can create a style that can be applied ONLY to that element. Only one such element is allowed on a page.
Elements which result in a new line. Includes those like P, DIV, H1, BLOCKQUOTE.
Some properties will affect only block-level elements.
Script
A short (relatively) piece of computer code using a scripting language like JavaScript, Visual Basic, or Perl. A script is used to create a response to user actions on the page. JavaScript operates on the viewer's computer, so the browser must support it. Perl scripts live on the server and must send info back to the web page's server for action there.
Syntax Tips
WARNING: Punctuation and spelling are critical! If you type fontfamily instead of font-family, your styling will not be used. Some typing errors cause the styles that follow to be ignored also!
There are many different ways to mess up the code for style sheets. Some browsers will make a guess at what you meant. But leaving out closing characters (quotes, braces, tags) can scramble a page or make the browser ignore what came next.
(Old browsers) To keep browsers that don't understand styles from displaying the rules between the <STYLE> tags, you must trick the browsers into thinking your code is a comment.
<STYLE>
<!--
.....your rules...
-->
</STYLE>
Don't write anything on the same line after the <!-- or your first rule will be ignored! You can put an extra set of braces { } after the words if you really want to include a comment.
Semicolon: Use a semicolon ; to separate multiple properties in your rule declaration. You don't have to have the semicolon just before the ending brace }, but it helps you avoid an error if you add a new property later.
Separate line for each property: Your code will be easier to read. The line breaks are ignored by the browser.
Don't repeat selectors: Styling for a particular selector should be set in a single rule. Don't list it twice in the same style sheet. An exception to this is grouping selectors (see the next rule).
Group selectors for common rules: You can list several selectors (separated by commas) to set rules that they all have in common and then do separate selectors for the properties that they don't have in common.
For example, headings H1, H2, and H3 can share a font-family but be different for other properties.
h1, h2, h3 {font-family:Georgia, "Times New Roman", Times, serif;}
h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-indent:20px;}
Colon: Separate the property and its value with a colon : , not equal = sign. This one is Oh So Hard!
Names with spaces: In a rule, surround font names with quotes if the name has spaces.
Right:
{font-family:"Times New Roman",Times,serif}
Wrong:
{font-family:Times New Roman, Times, serif}
Errors cause other errors: Errors may make the browser ignore statements that follow. This can totally confuse your layout and formatting!
In fact, any error in your CSS code, like not putting the unit with in a property
like font-size, can cause the whole rule or parts of a rule to be ignored by some
browsers.
HTML elements: If you create a style for a standard tags, like P, H1, UL, and LI, your styles will be applied automatically everywhere those tags appear. Create once, apply everywhere!
Order: Sometimes the order you list multiple properties in a style seems to make a difference. If a setting is not being used and the punctuation and spelling are correct, try switching the order. Keep all font properties together. Try listing background settings before font settings. The order of styles is always important. The browser applies styles in this order: external, then internal , then inline.
How to apply a class:
Add class="nameOfClass" to the element's tag,
like
<p class="specialcase">
You can apply multiple classes to the same element. Just have a space between the names of the classes. The order of the classes is important!
<p class="comment width300">
The class must be defined in an external or an internal style sheet.
How to apply an inline style:
Inline styles use style="....." rather than class="...",
like
<p style="font-family:Arial,sans-serif;">
Separate different property: value combinations with a semicolon (;).
Try not to use inline styles very often. It is harder to edit if you change your mind!
Inline styles override all other instructions, even when you define an ID selector for the element.
Block properties only for block elements: Remember that some properties, only apply to block-level elements. So they won't have any effect with inline elements, like SPAN, for example.
Previous