CSS is the way that most modern websites are designed, simply put CSS
is the code used for the style and layout of webpages.CSS comes it 2 forms
- Linked / Embedded - this is either an external style sheet page that is directly linked to from a page or style included in the HEAD section.
- inline - this is when the CSS code is directly applied to a page element.
So how do you link an external style sheet to your page.
<link rel="stylesheet" type="text/css" href="{link to actual css file}">
Simply place this code in your HEAD section of your webpage and away you go.
Style Sheet Media
Ok so now we have a link to a stylesheet for our page, but in additon to the basic need for a style sheet to style your page within a normal web browser. You can addtionally specify which delivery a particular style sheet is for.
You can have your website look a certain way for people using your website in a normal browser, and a different way for people who print your page. For example an order form or similar.
The default action for CSS and if you use the code example above is for all viewing to look the same, if you wish to show your website different to different medias, you use one of the following.
The most common media types are as follows:
- all - defines the stylesheet for all formats, this is the default behaviour
- screen - defines the stylesheet for you by a web browser or on screen viewing
- print - defines the style sheet for use when your user is doing a print preview or print of you website.
In additional to the above you can additionally specify any of the following:
- aural - defines the stylesheet for screen scrapers / speech synthesizers
- braille - defines the stylesheet for use by tactile feedback devices.
- embossed - defines the stylesheet for braille printers (this is a print driven media)
- handheld - defines the stylesheet for use by handheld devices, pda, mobiles phones etc
- projection - defines the stylesheet for use by screen projectors presentations, including using over-head projector transparencies..
- tty - defines the stylesheet for fixed-pitch devices, such as terminals
- tv - defines te stylesheet for use by TV type devices.
to use any of the above media types simply add the media attribute to your link to your style sheet in your head section.
<link rel="stylesheet" media="print" type="text/css" href="{link to actual css file}">
the above example defines the stylesheet for use by the printer and print preview screen.
NOTE - the media type is case sensitive
A Basic Style Sheet
OK. Now we have a grasp on how to implement a stylesheet, how to do create a style sheet.
StyleSheet Elements
Stylesheets are styled again elements within your page, these elements can by defined by tag type i.e BODY or by id or class.
Page Tag Styling
Firstly we will start by the easy ones, page tags. So if we want to have all our page links to look a certain way we can just do the following
B {color:red } - this would define all bold elements as the color red
i.e <b>this is a bold red </b> and looks like this is a bold red
NOTE - you can apply style to any page tag, and in some cases tags have multiple actions which you can style against, such is the case for your page hyperlinks, as follows.
- a:hover - this defines the style for a page hyperlink when the mouse moves over the link
- a:visited - this defines the style for a page hyperlink for links that have been visited
Note - there is a colon between the tag and the action i.e a:hover
Element ID Styling
You can apply individual style to page elements for nay element you have given an ID to. So if we have a DIV element on our page with an ID of DIV1 we can apply style only to this element, by doing the following in our style sheet.
#DIV1 {color:red;}
the element on our page is defined by
and any contents in this div would be red
Again you can do this for any element on your page you have assigned an ID to.
Ok we have a way to individually style elements, but what if we want to have a set of object carry a similar look and feel, it would be time consuming to individually style each tag by ID. So in this case we assign a class for these elements.
Style By Class
To define a page element with a class just add the class attribute to the element, as follows:
<div class="thenameoftheclass">text</div>
To define the style for this class you do the following in you stylesheet.
.thenameoftheclass {color:red;}
NOTE - there is a full stop (.) before the class name in the style sheet.
A Basic Example - Using a embedded stylesheet
Embedded StyleSheets come in 2 types
- external stylesheet in a linked file
- stylesheet coded directly in the HEAD section
For this example for are going to create a basic HTML page and a 2 CSS stylesheets.
1. Create an HTML page with the following code in it
<head>
<!--this sets the link for stylesheet for the screen-->
<link rel="stylesheet" href="stylesheet.css" media="screen"/>
<!--this sets the link for stylesheet for printing-->
<link rel="stylesheet" href="printstylesheet.css" media="print"/>
</head>
<body>
<!-- this element has an ID of DIV1 and a class of div1_class -->
<div id="DIV1" class="div1_class">This is styled by the #DIV1 style and the div1_class<br />the font color is coded from the #DIV1<br />the border is coded by the DIV1_class</div>
<!-- this element has a class of div1_class -->
<div class="DIV1_class">This is styled by the DIV1_class</div>
<h1 class="screen">Please use the print preview of this page to see the different styles</h1>
<h1 class="print">This is the Print version of this page</h1>
</body>
</html>
2. Next create a stylesheet file in the same directory as the page above called stylesheet.css with the following code.
/*THIS IS THE STYLESHEET FOR SCREEN VIEWING*/
/*using body sets the body elements*/
body
{
background:#eeeeee;
font-family:arial,sans-serif;
}
h1.screen
{
display:block;
}
h1.print
{
display:none;
}
/*this sets style for the element with an id of div1*/
#div1
{
color:Red;
}
/*this sets the style for the elements using the class of div1_class*/
/*NOTE - More than 1 element can use the same class*/
.div1_class
{
border:1px solid #blue;
}
3. Next create a stylesheet file called printStyleSheet.css in the same directly as the code above, with the following code:
/*THIS IS THE STYLESHEET FOR PRINTING AND PRINT PREVIEW*/
/*using body sets the body elements*/
body
{
background:#ffffff;
font-family:Verdana,sans-serif;
}
h1.screen
{
display:none;
}
h1.print
{
display:block;
}
/*this sets style for the element with an id of div1*/
#div1
{
font-weight:bold;
color:green;
}
/*this sets the style for the elements using the class of div1_class*/
/*NOTE - More than 1 element can use the same class*/
.div1_class
{
border:10px solid #green;
}
Now if you run the newly create HTML page in your browser you will see the page elements styled from the stylesheet.css style sheet. Now open the print preview of this page adn you will now see a different view of the page, which is now styled by the printStyleSheet.css.
This example gives you a quick idea how to hide / show page elements and how to style for your screen and for your printer.
To code your embedded style sheet directly in the HEAD of your website you do the following
In The Head Section
<head>
<style>body{font-family:verdana,sans-serif;}</style>
</head>
<body>
this body has verdana font
</body>
</html>
A Basic Example - Inline Stylesheet
Directly styling the element
Simply put this mean adding the style attribute to your element as follows
<div style="{your style stuff}">this is styled</div>
As in the following example
<head>
</head>
<body>
<div style="font-family:verdana,sans-serif;">this body has verdana font</div>
</body>
</html>
This guide shows you how to use CSS to style your website or blog. There are lots of cool stuff you can do with CSS to make your website look cool and the same in all browsers. So just go nuts.
Thanks
Sean J Connolly
Visit AJAX Web Development Store
DMS - Document Management, Webmail
BuzzProperties.co.uk - Online Property Sales and Letting
