Twitter 
FacebookNewsletter
Please enter your name and email below if you would like to hear about future offers and information.
Bookmarks
What Is CSS (Cascading Style Sheets) And How To Use Them
By Craig Deane, Blue Ice Web Design Limited
CSS (cascading style sheets) were created to separate the content and the layout of a website page, cascading style sheets can be linked to HTML page and will include layout details such as font, website colours, table layouts and more.
CSS style sheets will then allow you to make changes to all the pages connected to a style sheet by simply changing the style sheet once, this will save you time as otherwise changes to fonts etc on all your pages would require you to manually change each page. Although this would make CSS worthwhile alone, there are more reasons to learn CSS.
- Your web page will load faster as there will be less code to process
- It is much better to have a consistent look and feel for your site as otherwise it may well become unusable
- Specify units to use such as cm, em, pixels etc
- Add rollover effects to links
To use CSS styles you need to create a file with the .css extension, to download a basic CSS style click on the links below.
Set background colour to green
Use the above basic CSS style sheets to learn and practice CSS.
To link CSS styles to your web page you can do one of the following:
- Internal style sheets
- External style sheets
Internal Linking
<head> <style type="text/css"> hr {color: sienna} p {margin-left: 18px}
</style> </head>
The above will go into the head of the HTML pag
External Linking
<head> <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
This goes into the head tag and you will need to change the stylesheet name.
To specify the space between lines you could use the following code in your CSS layout.
<style type="text/css">
p.small {line-height: 80%}
p.big {line-height: 200%}
</style>
Then in your web page you can define the css by doing the following:
<p>
hello
</p
The above would use normal space between lines.
<p class="small">
hello
</p>
The above would use the small line spacing.
<p class="big">
hello
</p>
The above would use the big line height CSS option.
Article created by Blue Ice Web Design
Author Information
This article was created by Blue Ice Web Design Limited, they are a website design company based in the UK that offers many website design services at competitive prices.
http://www.blueicewebdesign.co.uk
Please Note: If you are copying this article for use on your website then you must include the entire article unchanged including the links to the author site and the author information.
<<<<< Get back to the articles main page
Website design and development + unlimited revisions + search engine optimisation (SEO) + free hosting and domain name for a year from just £149.
Visit our website design page or get a free no obligation web design quote today.