How 2 Create A Website | HTML 4 Tutorials - CSS Introduction
What's the big fuss with CSS .
Let's have a look at Cascading Style Sheets (CSS) and find out why it is so powerful when it is combined with html
Style sheets are used to enhance document content. If you use an external css file then it easier to change a color, font etc. on all of the web pages by changing the value in the the css file.
There are different ways of applying style sheets in a HTML document.
- Internally on the html page with <style> tags
- From outside the html document by calling the css file
An example of a styling tags in the head section.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head><title> CSS Styling </title> <style type="text/css"> body{ h1{ </style> <body> <h1>This an example of CSS</h1> </body> </html> |
This is how it will look in a web browser
 |
| body css | background-color:green; |
| h1 css | font-family: Verdana,Arial,sans-serif; font-size: 120%; color: #0000FF; |
Styling using Class
All html 4 tags that display content can accept classes. You can add classes to your stylesheets and call it between the body tags.
An example of a styling tags and a classes in the head section
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head><title> CSS Styling </title> body{ .exampleclass { font-family: Verdana,Arial,sans-serif; } </style> <body> <h1 class="exampleclass" >This an example of CSS</h1> </body> </html> |
This is how it will look in a web browser
|
Using Identity with Style sheets
In HTML 4 you can also use an attribute called identity which as name can be applied to.
The "id" tag can be used to refernce a style sheet and apply the formatting in between the body tags of your web page.
An example of a styling tags an identity (id)in the head section
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head><title> CSS Styling </title> body{ #exampleid { font-family: Verdana,Arial,sans-serif; } </style> <body> <h1 id="exampleid" >This an example of CSS</h1> </body> </html> |
This is how it will look in a web browser
|
next | working with css continued