Learn the Basics of Cascading Style Sheets (aka CSS)
Cascading Style Sheets are used to create an overall consistant look within all of
the pages of a web application by defining the attributes of the body, headers,
paragraphs, tables, form elements and more in one file. By having all of the formatting in one file, you can quickly
change the entire web site by editing the cascading style sheet rather than edit
each individual file.
External Stylesheets
CODE to link to an External Stylesheet:
< link href="basic.css" rel="stylesheet" media="screen" type="text/css" / >
* Change to media="print" for print stylesheets
All stylesheet links must be place in the <head> tags of your html code.
Links to your images in your stylesheet are relative to the stylesheet, not the
page using the image!!!!
You can have more than one stylesheet in your page. Why? You might ask...
Consider this scenerio:
- Use ONE stylesheet for the page layout
- Use ONE stylesheet for the print layout - hide unecessary menu bars
- Use ONE stylesheet for the font colors and images (themes)
- Use ONE stylesheet for each browser (IE, Firefox, etc.)
Cascading Style Sheets help you control the colors and fonts in the document.
Create definitions for the VISUAL ASPECTS of the web site then you can later change the
definition in the .css file and the entire web site will be updated. Remember: the
rules in the inline stylesheets override the conflicting rules in the external
or embedded stylesheets. So avoid setting styles in the page itself if you want
to have "global control".
Group Selectors:
If you want several HTML tags to share some of the same properties but not all of
the same properties, then you can create a group selector with the SHARED formatting
options and individual rules with the different properties for each individual HTML
tag. Example: h1, h2, h3, h4, h5, h6 {color: Blue;}.
Asterick: You can also use the * asterick symbol and define a style
to ALL tags on your page. Example: * {font-family:arial}
Keywords: large, x-large, xx-large, medium, small, x-small, xx-xsmall
medium is set to the "base" size of the page's set font-size. All other keywords
are either increase or decrease a factor of 1.2 in comparible size.
Percentages & EMs: To make a particular headline appear 2 times the size
of the average text on a page you would define the tag like this: font-size:200%.
A percentage is just an em multiplied by 100. (.5em is 50%, 3em is 300%)
Capitalizing: If you want all of the page titles to b in all caps,
try this:
text-transform: uppercase; OR text-transform: capitalize; OR do the reverse and
try this: text-transform:lowercase;
Understanding the Different Types of Styles:
Tag Selectors |
ID Selectors |
Class Selectors |
Decendant Selectors
Important Notes: The class names and id names are case sensitive!!!!!
The
ID will always override CLASS if the two conflict.
<span> and <div> Tags:
The
<span>...</span> is a "wrapper" tag that can be
used to wrap one or more html elements together and then define a style to that
span using its id. The span tag does not add any line breaks to the element/text
that it contains.
The <div>...</div> is a "wrapper" tag that can be used
to wrap one or more items together and then define a div style to the id. The div
tag does have a line breaks to the element/text that it
contains.
TRICK: To put 2 divs side by side, wrap them in another div like
this:
<div id="bodywrapper" style="text-align:center; width:500px;">
<div id="left" style="float:left; width:150px; text-align:left;" class="leftside>
'whatever
</div>
<div id="right" style="float:right; width:300px; text-align:left;"
class="rightside>
'whatever
</div>
</div>
!important
This means.......the browser should use this rule even if it thinks another one
might be used. Many browsers ignore the "hover" and "active" rules without the !important
declaration.
Define Element Widths in the Stylesheet:
-
use "100px" for a "fixed" width
-
use "80%" for a "flexible" width
"Float" / "Liquid"
Commenting your code:
/* MultiLine Comments start with a slash and asterick on
the first line.
* Then an asterick on the next line.
* And an asterick on the next line.
*/ Then an asterick and a slash on the last line.
TIPS and
Advanced Topics:
I encourage placing ALL stylesheets in a folder called Stylesheets.
Another option is using Cascading Style Sheets to control the layout of the entire
site is to use ASP.NET MASTERPAGES and set the styles there. You can also define
the stylesheet to use in the web.config instead of in the head of every page in
your website.
REMEBER THIS!!!!!
When referencing an image in a stylesheet, the path to the image is relative to
the stylesheet NOT the web page!
* Did you know that you can declare more than one class style to an html element?
Just do it like this:
<div class="private news membersOnly"> </div>
CSS + JavaScript = DHTML
Resources:
I believe the best website on Cascading Style Sheets is: BooBerry !!!!
Read this Informative Guide to
Cascading Style Sheets.
I also highly recommend the book
titled "CSS -the missing manual." It was so good I read the whole thing in only
2 days!
CSS Web Templates
Get FREE CSS designed Web Templates for FREE!
Get more FREE CSS designed Web Templates for FREE!