CIT150 - CSS - How To Use CSS by gvt10191


									                                                                        Page |1

CIT150 – CSS – How To Use CSS

How to Use CSS

Using inline CSS is very much like coding an attribute and value into an
XHTML tag. Here's an example of an inline style rule.

<font style="font-size: 12px; font-weight: bold; text-indent: 30px;">

The above style rule is the same style I used to show the above code
example. It's a simple <font> tag with a style rule added. To cancel that
style rule, I used the </font> just as you know from standard XHTML.

Using inline CSS only affects the XHTML element that it's coded into. If you
wanted to repeat that style at another place on your page, you'd have to
code that style into another font tag.

There are a multitude of different things you can do with CSS, it's just a
matter of learning what the options are and how to code them.


Embedded styles are placed in the HEAD section of your page, between the
style declaration opening and closing tags. Unlike inline style rules where
you have to code a style into each XHTML element, embedded rules affect
every usage of an XHTML element. Here's a example:

<style type="text/css">
div {font-family: Arial; font-size: 14px; margin-left: 30px;}
p {border-left: dashed gray 1px;}

If the above style rules were placed in the HEAD section of your page, here's
how it would affect your page display:

   •   Each time you used a division tag (<div>) on this page the text within
       that division would be shown in the Arial font at 14 pixels high.
                                                                        Page |2

   •   The division would have a margin of 30 pixels on the left side. That's
       how I indented the code example.
   •   Each time you used a paragraph tag (<p>) there would be a 1 pixel
       thick dashed gray line on the left border.

You probably noticed that the formatting of style rules differs from XHTML.
Good job! Let's look a little closer at that.

As you know, XHTML elements are enclosed between the < and > signs.
Confusion would abound for webmasters and browser programmers alike if
CSS also used arrow brackets. Therefore, the opening <style
type="text/css"> and closing </style> tags identify the code in between as
CSS code.

The selector (the XHTML element you wish to create a rule for) is listed
without any brackets since it's already enclosed between the opening and
closing style declaration. The selector is then followed by curly braces { ... }
that enclose the property and value, which is the rule for the chosen

The property and value are separated by a colon and space. Example:

color: red;

The semi-colon signals the end of a rule. Because each selector can have
more than one rule, the semi-colon also serves as a rules separator.

color: red; background-color: black; font-size: 18px;

You should always include the semi-colon after a rule, even if you're only
creating one rule. Truth is, a single rule will work most of the time if you
forget the semi-colon, but results can be unpredictable in some instances.
It's also a good habit. If you always include the semi-colon, there's less of a
chance you'll leave one out where it's needed as a rules separator.


A linked style sheet contains the style rules you create, saved in a plain text
file, but with a .css file extension instead of a .txt file extension. To save a
file with a .css extention, in most text editors you can simply place quotation
marks around your file name as you save it. Example:
                                                                         Page |3


The contents of your linked style sheet is the same as you would place in an
embedded style, minus the opening <style type="text/css"> and closing
</style> declarations. These are not needed because the browser knows it's
a style sheet from the link to the style sheet.

To link to a style sheet, place this in the HEAD section of your page:

<link rel="stylesheet" href="css/sitewide.css" type="text/css">

There is no closing tag for this link. Where I have css/sitewide.css, you'd
change this to reflect the path and the name of your own style sheet. To see
a real example of a linked style sheet, try this one saved as a text file
(because not everyone will have a program associated to read .css files).
You could save this sample style sheet file to your local computer with a .css
extension and link it to any .html file that you have. The style sheet would
control the XHTML elements that have matching rules on all the linked

To top