CSS1 & CSS2
As a general rule, CSS1 shapes your pages' appearance and CSS2 gives you
positioning control. It is CSS1 also gives you the ability to set margins, text and graphics
precisely. Here is the STYLE for this page. Note that we have
set our left margin as 2cm, which indents this text nicely. Then we have
added a background element which is only 25 px wide and repeated it vertically. It sets nicely into
the left border without interfering with the text. You can use CSS2 to
precisely place images. Click
here for more information about absolute positioning. Be sure to
check our resources section, too.
<STYLE TYPE="text/css"
MEDIA="screen">
BODY
{
background-color:#FFFAFA;
color: #027002;
background-image: url(images/shadow.gif);
background-repeat: repeat-y
}
H1 {
text-align: center;
font: bold italic 150% sans-serif;
color: green;
}
P {
text-align: justify;
margin-left: 2cm;
}
</STYLE>
Web pages look a lot nicer with bigger margins. You can set the left and
right margins with the "margin-left" and "margin-right"
properties, as shown above. Margins can be measured in cms or in % of
window width. You can also set margins for headings using negative values,
like so:
h1 { margin-left: -8%;}
Negative values are used to move the start of the headings to the left of the
margin set for the body. You would not use negative values to indent
paragraphs, however. Use the text-indent property below.
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
This will indent the first line of each paragraph by 2 em's with no
margins.
Do you find yourself using
<BODY topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
on your web pages so that both IE and Netscape will know what you mean?
Try using this CSS instead:
BODY { margin-top:0; margin-bottom:0; margin-left:20; margin-right:20}
Going to Class
CSS also gives you the ability to establish classes when you want to have a
special effect apply to certain text. First you define and name the class
in the external style sheet, then you use the definition as an inline
style. You can name the classes whatever you please as long as you use the
period before the name. Here I have named them after my daughters.
In my external style sheet, I will specify:
.erin { color: green }
.jocelyn { color: lime }
.kelli { color: blue }
And your HTML code would look like this:
<P CLASS="erin">This paragraph will have green text. </P>
<B CLASS="jocelyn">This bold will be lime colored.</B>
<SPAN CLASS="kelli">Text within the span tags will be blue.
</SPAN>
You can also use the span text with inlined style. For example, if you
wanted to change the font of a word, your rule would look like this:
<SPAN STYLE="font-family:
Verdana">Verdana</SPAN>
As you can see, the <SPAN> (and also the <DIV>) styles are useful
for identifying text for a CLASS application. For example, you can
establish the class:
div.box { border: solid; border-width: thin; width: 100% }
Then use it as an inline STYLE, like so:
<div class="box">The content within this DIV element will be
enclosed in a box with a thin line around it. You can put anything you
like in this box, including a graphic.</div>
Here is what it looks like:
The content within this DIV element will be enclosed in a box with a thin line around it.
You can put anything you like in this block, including a graphic.
Your border value doesn't have to be solid. You can make it dotted, dashed, solid, double,
groove, ridge, inset or outset. The border-width property can be thin, medium or
thick, or a specified width such as 0.1em.
The border-color property allows you to set the color. You can also
control the properties for each of the sides of the box using border-left,
border-top, border-right and border-bottom properties with the appropriate
value.
For example, this will be the embedded rule:
div.boxx { border-left: solid; border-right: solid; border-top: none; border-bottom:
double; border-left-width: thin; border-color: red; }
This would be the inlined rule:
<div class="boxx">Odd looking Box</div>
and this would be the box: I hope you have enjoyed this introduction to
CSS! Believe me, there is
much more that can be done with CSS1, CSS2 and CSS3. Click on the link below for
a list of resources. |