|
How
to Creat a linked EXTERNAL STYLE SHEET ? |
To create
an external style sheet all you need to do
is create a simple text document (on windows
you simply right-click and select new ->
text document) and then change the file from
type .txt to .css.
You can change the file type by just changing
the files' extension. The files' extension
on windows tells the computer what kind
of file it is and allows the computer to
determine how to handle the file when for
example you try to open it.
|
You probably guessed it;
CSS files are just specially formatted text
files, and much in the same way HTML pages
are. There is nothing special or different
in the file itself, rather it is the contents
of the file that make an HTML document and
a CSS page what they are.
When working with a external CSS document,
there are a couple of points to remember:
|
| |
| 1. You don’t add these
tags in the CSS page itself as you would if
you embedded the CSS code in your HTML: |
| |
| <style type="text/css">
</style>
|
| |
| Since the CSS link in your
web page says that you are linking to a CSS
page, you don’t need to declare (in the
external CSS file) that the code in the CSS
page is CSS. That is what the above tags do.
Instead you would just add your CSS code directly
to the page like so: |
| |
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
} .my2ndNewStyle
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
} |
| |
| In the above example I have
created a series CSS classes that can be applied
to any HTML tag like so: |
| |
| <p class="myNewStyle">My
CSS styled text</p> or
<h2 class=”my3rdNewStyle”>My
CSS styled text</h2> |
| |
| You will notice that
in the above example I applied a CSS style to
a <h2> tag. Normally this tag sets the
size of the text that it wraps to a size that
is preset in the browser (ex: 10 pixels).
When you apply a CSS class
to it, the CSS code overrides the default
size that you would normally get with an <h2>
tag in favor of the size specified in the
CSS class. So now you can see that CSS can
override default HTML tag behavior!
In the above examples, I
have CSS code where I define my CSS classes
and then ‘apply’ them to various
elements in the page. Another way to apply
CSS is to globally redefine an HTML tag to
look a certain way: |
| |
| h1 { font-family: Garamond,
"Times New Roman", serif; font-size:
200%; } |
| |
| What this CSS code
does is set the font style and size of all <h1>
tags in one shot. Now you don’t have to
apply a CSS class as we did before to any <h1>
tags since they are automatically all affected
by the CSS style rules. Here
is another example of where I give the whole
page bigger margins: |
| |
| body { margin-left: 15%;
margin-right: 15%; } |
| |
| As you can see, you can redefine
any tag and change the way it looks! This can
be very powerful: |
| |
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
} |
| |
| The above CSS code
sets that any <div></div> tag will
now have a background color of ‘rgb(204,204,255)’
and have a padding of 0.5em and a thin 1 pixel
border that is solid black. A
few things to explain about the above:
Color in CSS can be
expressed in a few ways: |
| |
1. In Hex -> for example:
#000000 – this is black and this: #FF0000
is red.
2. In rgb -> rgb(204,204,255) is a light
purple blue color.
3. With named colors like: ‘red’
or ‘blue’ |
| |
| I typically use hex color
since I am familiar with them or I just use
named colors. So the last example can be rewritten
like so: |
| |
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
} |
| |
| So instead of ‘rgb(204,204,255)’
, I just specified ‘green’.
By using RGB (RGB is the
acronym for: ‘Red Green Blue’)
and Hex color, you can really get the exact
color you want easily when you know your codes.
Luckily many programs (like Dreamweaver) provide
easy to use color pickers for you so you don’t
need to know the values for the code.
In this last example I will show you the ‘super
cool’ CSS code that allows you to create
link roll-over affects without images:
|
| |
:link { color: rgb(0,
0, 153) }
:visited { color: rgb(153, 0, 153) }
:hover { color: rgb(0, 96, 255) }
:active { color: rgb(255, 0, 102) } |
| |
| The above CSS will
cause your links to change color when someone
hovers their mouse pointer over it, instant
rollovers with no images! One important note
with the above code is that it is important
that the style declarations be in the right
order: "link-visited-hover-active",
otherwise it may break it in some browsers.
CSS is very powerful
and allows you to do things that you can’t
do with standard HTML. It is supported nicely
now in all the modern browsers and is a must
learn tool for web designers. The above examples
are just a small sample of what you can do
with CSS, but it should be more than enough
for you to start styling your pages nicely.
Like with many technologies CSS has a lot
of capability that most people will not need
to use often if at all. Don’t get caught
in the trap of thinking that if there is some
functionality/feature available that you have
to use it. |
| |
