Cascading Style Sheets- CSS
What is a Cascading Style Sheet?
CSS allows you, the designer, to control the various elements of your web page without having to type in all that extra stuff in the tags. You can control the color, size, fonts, images, and just about everything else with reference to a CSS page by simply placing the reference in the head tag and class="***" in just about anything else. You'll see what I mean as we go on.
Linking to a style sheet
In the <head> tag, place the following code:
<link rel="stylesheet" type="text/css" href="URL HERE">
In-line styles
Simply include Style="style info here" inside whichever tag you are stylizing. For example:
<p style="font-family: 'Arial', 'Times New Roman'; color: #333333; font-weight: bold;>
Don't forget to separate the elements with semicolons!
Creating Generic Classes
A generic class is a class you can use with different tags. For example, you can use the same class for formatting elements in both the <p> tag and the <h1> tag. To set up a generic class, type a period followed by a name for the class. For example:.largeheading {properties go here}
Creating Specific Classes
Unlike a generic class, you specify which tag the class belongs to. To create one, simply put the name of the tag (p, body, h1, table, etc), a period, and then a name for the class.P.redletters {properties go here}
You don't need to specify a class name all the time, so one element would look something like this:
p {properties go here}
How to Apply Classes
In whatever tag you would like the particular style to be in, simply type class="whatever" (can be used more than once on a page) or id="whatever" (can not be used more than once on a page). For example:<p class="redletters">
<div class="announcement">
Easy as pie.
CSS Properties: Contents
|
::Fonts font-style font-weight font-family color |
::Text text-align text-decoration text-transform text-shadow |
::Backgrounds background-color background-image background-repeat background-attachment |
| ::Scrollbars | ::Dimensions | ::Margins and Padding |
|
::Borders Border Border-width Border-style |