CSS is the acronym for:
‘Cascading Style Sheets’. CSS is an extension to basic HTML that
allows you to style your web pages. An example of a style change
would be to make words bold. In standard HTML you would use the
<b> tag like so:
<b>make me bold</b>
This works fine and there is nothing wrong
with it per se except that now if you wanted to say change all
you text that you initially made bold to underlined, you would
have to go to every spot in the page and change the tag.
Another disadvantage can be found in this
example: say you wanted to make the above text bold, make the
font style Verdanna and change its color to red you would need a
lot of code wrapped around the text:
<font color="#FF0000"
face="Verdana, Arial, Helvetica, sans-serif"><strong>This is
text</strong></font>
This is verbose and
contributes to making you HTML messy. With CSS you can create a
custom style elsewhere and set all its properties, give it a
unique name and then ‘tag’ your HTML to apply these stylistic
properties:
<p class="myNewStyle">My
CSS styled text</p>
And in between the
<head></head> tags at the top of your web page you would insert
this CSS code that defines the style we just applied:
<style type="text/css">
<!--
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
-->
</style>
In the above example we
include the style sheet code inline, or in other words, in the
page. This is fine for smaller projects or in situations where
the styles you’re defining will only be used in a single page.
There are many times when you
will be applying your styles to many pages and it would be a
hassle to have to copy and paste you CSS code into each page.
Besides the fact that you will be cluttering up your page with
the same CSS code, you also find yourself having to edit each of
these pages if you want to make a style change. Like with
JavaScript, you can define/create you CSS style in a separate
file and then link it to the page you want to apply the code to:
<link
href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
The above line of code links
your external style sheet called ‘myFirstStyleSheet.css’ to the
HTML document. You place this code in between the <head> </head>
tags in your web page.
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 it from a file type .txt to .css. You can change
the file type by just changing the file names extension. The
file name’s 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 link in your web
page connecting the CSS page to your HTML page says that you are
linking to a CSS page, you don’t need to declare that the code
in the page is CSS. That is what the above tags do. Instead you
would just add your CSS code directly to the page:
.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. 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 a 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;
}
Set in the above code, 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) } /* for unvisited links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
:hover { color: rgb(0, 96, 255) } /* when mouse is over link */
:active { color: rgb(255, 0, 102) } /* when link is clicked */
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.
A final comment:
Now that you have the basics
covered, why not try my CSS
tutorial.
