Lesson 1
Introduction
CSS stands for Cascading Style Sheets, they are used to add fonts, colors
and spacing to your web pages. If you have written code in HTML you will
know the work involved in setting up your fonts for paragraphs, headings,
links, etc. All of this can be eliminated by using CSS. Adding a couple of
lines of syntax to your web page and your formatting is complete.
CSS is also very easy to change, if you want to change your formatting you
simply change the few lines of CSS instead of having to go through your
entire document to change all the coding. If you use an external style sheet
then all of your web pages on your site can be changed simply by changing
the one style sheet. Think of the time that would be saved by using an
external style sheet to design your page!
The one disadvantage to CSS is that not all browsers are supported by it,
the older browsers may only support some CSS or none at all.
Syntax
Syntax is basically the rules you must follow when writing in any computer
language. CSS has it's rules too. A style is made up of two parts, the
selector and the declaration. If you have coded pages in HTML you will most
likely recognize the selector, as it is an HTML tag. The declaration will
determine what the selector should display. Your declaration is held between
the { } symbols. For example:
H1 {font-size 12pt; color: blue; font-family: arial}
The H1 is your HTML tag or your selector, the font size, color and family is
your declaration. All declarations must be separated by a semi-colon.
Creating Style Sheets
Style Sheets can be applied in three different ways, they can be applied
locally, internally and externally. You can even apply all three to your web
pages, but there is a precedence.
Creating Internal Style Sheets
The internal style sheet are placed within an HTML page between the <HEAD>
and </HEAD> tags. Naturally the formatting taking place in this case would
only effect the page in which you are inserting the style sheet into. Below
is an example of the code used within an HTML document and the sample page
can be seen here. The internal Style sheet is
best when creating individual web pages with a lot of text.
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets - Sample Page</TITLE>
<STYLE>
H1 {text-align: center; color: blue; font-family: arial}
P {text-align: left; color: green; font-family: Verdana; font-size: 14pt}
</STYLE>
<BODY>
<H1>Cascading Style Sheets - Sample Page</H1>
<P>This page has been created to show how CSS works within a web page.
The Title of the page has been centered with blue text and the font is arial
size 14pt.
This paragraph has been formatted using a left alignment, green text and
size 14pt Verdana font.</P>
</BODY>
</HTML>
Creating External Style Sheets
The external Style Sheet is creating as a text file saved with the css
extension. It is then linked to from the HTML document between the <HEAD>
and </HEAD> tags using the <LINK> tag. The external Style Sheet can be used
for all your pages in your web. When changes are needed for your web you
only need to change the Style Sheet instead of each individual page in your
web. If you are using FrontPage you can simply create a new page and
view it via the HTML view, remove the provided code and enter your css code.
When finished simply save the document when the Save As window pops up under
Filename enter the name for your file then add the .css extension to it,
under Save As Type use All Files. The next time you open that page in
FrontPage you will not be given the option to change from HTML to Normal or
Preview. When using notepad to create your css file save in the same manner
as FrontPage. Below is an example of the code I used to create the page
here.
H1 {text-align: center; color: blue; font-family: arial}
P {text-align: left; color: green; font-family: arial; font-size: 14pt}
And the code used in the HTML page linking to the CSS page.
<HTML>
<HEAD>
<TITLE>External Style Sheets</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="samplecss.css">
<BODY>
<H1>External Style Sheet</H1>
<P>This page uses an external style sheet</P>
</BODY>
</HTML>
Creating Local Style Sheets
And finally Local Style Sheets are used within HTML tags to render the style
of a particular element on a web page. For those who do use FrontPage, when
you view your document in the HTML view you could very well see that
FrontPage uses Local Style Sheets at times. The syntax for Local Style
Sheets is slightly different than when using the external and internal Style
Sheets. The Style attribute will be placed inside the HTML tag that you are
wanting to apply the style to. The one thing to remember is that with the
local style sheet you are applying the code to just one tag, it will not
affect anything else in the document, nor will it affect any other page in
your web. Below is an example of a local style sheet and you can find the
page using it here.
<html>
<head>
<title>Applying Local Style Sheets</title>
</head>
<body>
<P style="background-image: url('d156889.shared30.cdxsolutions.com/backgrnd.jpg');
font-face: arial; font-size: 14pt; color: #008080; text-align: center">
This paragaph has been formatted using a local style sheet. As you can see
the
font color is teal, the font size is 14 pt and font family is Arial. I have
centered the text and used the AMM background.</P>
<P> </P>
<P>This paragraph is not affected by the local style sheet.</P>
</body>
</html>
