[Home]
[Edit this page]
[Recent Changes]
[Special Pages]
[Help]
stylesheetswithhtml
----------------------------------------------------------
Cascading StyleSheets have been introduced to redefine existing HTML Tags attributes and widen their range of applicability. To do this, CSS offers to ways of redefining Tags.
This tutorial is the second in a series of Webprogramming tutorial. The first covers basic HTML Tags. In this tutorial I will introduce Cascading StyleSheets.
There are 2 ways of redefing HTML Tags. The first is, to choose an existing Tag, for example the <p> Tag, and then redefine it with some new attributes.
Consider the following example:
In the example above, we have redefined the <p> Tag with Verdanna as its default font, 12pt as its default size, gold as its default color and bold as its default font-weight. Notice that all CSS definitions go in the <head> section of the document. This is overall important of all Cascading Style Sheet definitions.
Now we have a gold text in bold anywhere in the document where we use the <p> Tag. Whats more, we can use it as we would use it usually in an HTML document. So there's no difference between:
If you have read the tutorial on HTML before, you remember that I have created a first website their with some basic HTML tags. Now I am going to improve this website with Cascding Style Sheets to give it a more personal look.
[Edit this page] [Page history] [What links here] [Discuss this topic] [Printer Friendly]
stylesheetswithhtml
An Introduction to Webprogramming
PART II: Cascading StyleSheets
---------------------------------------------------------- CSS Background Information
Cascading StyleSheets have been introduced to redefine existing HTML Tags attributes and widen their range of applicability. To do this, CSS offers to ways of redefining Tags. Getting Started with CSS
This tutorial is the second in a series of Webprogramming tutorial. The first covers basic HTML Tags. In this tutorial I will introduce Cascading StyleSheets. Redefing HTML Tags
There are 2 ways of redefing HTML Tags. The first is, to choose an existing Tag, for example the <p> Tag, and then redefine it with some new attributes.
Consider the following example:
<html>
<head>
<style type="text/css">
p {font-family:Verdanna; font-size:12pt; color:gold; font-weight:bold; }
</style>
</head>
In the example above, we have redefined the <p> Tag with Verdanna as its default font, 12pt as its default size, gold as its default color and bold as its default font-weight. Notice that all CSS definitions go in the <head> section of the document. This is overall important of all Cascading Style Sheet definitions.
Now we have a gold text in bold anywhere in the document where we use the <p> Tag. Whats more, we can use it as we would use it usually in an HTML document. So there's no difference between:
<p>Hello World</p> //Normal use of <p> Tag without new definition
<p>Hello World</p> //The p Tag as defined above with gold font and bold
//weight
Take That! Improving our Website with CSS
If you have read the tutorial on HTML before, you remember that I have created a first website their with some basic HTML tags. Now I am going to improve this website with Cascding Style Sheets to give it a more personal look.
<html>
<title>Writing Our first Website</title>
<head>
p { font-family:Comic Sans Serif; font-size:10pt; color: gold; }
h1 {font-family:Arial; font-size:12pt; font-color:silver; font-weight:normal }
</head>
<body bgcolor="blue">
<h1><center>Welcome To My Homepage</center></h1>
<hr>
<table border="1">
<tr>
<img src="alexphoto.jpg" width="100" height="100" border="1" align="left" />
< img src="alexphoto.jpg" width="100" height="100" border="1" align="right" />
</tr>
</table>
<br ="clear all">
<br />
<p>Thanks for visiting my Homepage. You will find any interestenting or relevant news about me. Have a lot of fun. If you like this page, feel
free to come back soon.</p>
<a href="hobbies.html">Hobbies</a><a href="curriculum.html">C. V.</a>
<br />
<a href="career.html">Career.html"</a><a href="photos.html">Photos</a>
</body>
</html>
[Edit this page] [Page history] [What links here] [Discuss this topic] [Printer Friendly]
