Articles: CSS Quick Tutorial
One of the nicest features
of using CSS is that you can reference
all of your pages to one external style
sheet document! So, if you want to change
the look of your whole website's text,
font size, font color, etc., you can do
so in just one document. Anyone that has
decided to change an item such as font
type on every single page in their site,
page by page, can appreciate the time
you can save only having to change one
document.
You can also embed 'styles'
into your individual pages. There are
three different ways to apply style sheets;
Inline Styles, Embedded Style Sheets,
and Linked Style Sheets.
Let's look at the Embedded
Style Sheets method in which the style
attribute is placed between the <head>
</head> tags in an individual web
page. We'll look at the Linked Style Sheets
later on. There are a few links to informative
CSS Tutorials at the bottom of this page.
1) Open a New Page and copy and paste
the following between the <head>
</head> tags: (Make sure you copy
and paste into Notepad, then into your
document to strip out the formatting we
have on this page.)
<style type="text/css">
b.header {color:blue; font-size:20px;
font-family:arial;}
</style>
2) Copy and paste the below between the
<body> </body> tags.
<b>This is normal bold</b><br>
<b class="header">This
is header style bold</b>
This is how your page should look in HTML
View:
<html>
<head>
<title>New Page 1</title>
<style type="text/css">
b.header {color:blue; font-size:20px;
font-family:arial;}
</style>
</head>
<body>
<b>This is normal bold</b><br>
<b class="header">This
is header style bold</b>
</body>
</html>
If you Preview your page, it should look
like this. By inserting the tag <b
class="header"> you assigned
the style class of "header"
to that text.
--------------------------------------------------------------------------------
Whew, okay, let's jump into creating an
external style sheet.
But wait, you have more
questions? Of course you do. There are
so many ways to use CSS that we have assembled
some links at the bottom of this page
where you can see (and copy like we do)
other examples of CSS code in action!
--------------------------------------------------------------------------------
How to make a Linked Style Sheet:
1) Open a New Page, copy the following
into it, and name it csstest.htm:
<html>
<head>
<title>My First External CSS Test</title>
<LINK REL=stylesheet HREF="mystyles.css"
TYPE="text/css">
</HEAD>
<BODY>
<H1>STYLE SHEET TEST</H1>
<H2>Header 2 Style</H2>
<H3>Header 3 Style</H3>
<a href="css.htm">This
is the hyperlink style</a>
<p>Done!!</p>
</BODY>
</HTML>
2) Now create a separate text file and
call it mystyles.css. Copy the text below
into your mystyles.css document. This
is the document that will control any
web pages in which you 'apply' any of
these styles, as in the example above.
The H1 designation will produce the words
STYLE SHEET TEST in the Comic Sans MS
font, in bold, and in blue. Let your design
tastes and imagination run wild!
P {font-family: Arial, Helvetica, sans-serif;
font-weight: normal; color: purple;}
H1 {font-family: Comic Sans
MS, Verdana, Helvetica; font-weight: bold;
color: blue;}
H2 {font-family: MS Sans
Serif, Verdana, Helvetica; font-weight:
bold; color: silver;}
H3 {font-family: Terminal,
Verdana, Helvetica; font-weight: bold;
color: green;}
A:link {text-decoration:
underline; color: blue;}
A:hover {text-decoration:
underline; color: #000080;}
A:visited {text-decoration:
none; color: orange;}
3) Upload the mystyles.css file into the
root of your web files. Take a look at
your csstest.htm web page in Browser View,
or on the Internet. If all went well,
you should see the styles applied to your
page that came from the css text file
that you created. It should look something
like this: csstest.htm
--------------------------------------------------------------------------------
Well, this has been a basic intro into
CSS Stylesheets. You are encouraged to
browse around on the Internet and read
some of the very good tutorials on this
subject, explaining all of the different
ways it can be used. Happy Styling!
|
