Day four is an introduction to Cascading Style Sheets. You will learn how to write your own style rules to control the look of your website, both as internal and external CSS. Exercise 1 Create a new HTML page and insert some text in it. Mark parts of this text up with h2, h3, p [...]
Entries Tagged as 'HTML & CSS day 4'
4.1 What is CSS? Why use it?
June 29th, 2009 No Comments
Here and there in these notes you may have come across the statement that "this could be done better using CSS". So what is CSS, and why should you learn to use it? CSS stands for "Cascading Style Sheets". It was developed because of the inadequacy of using HTML for controlling the look of web [...]
Tags:
4.2 Create an Internal Style Sheet.
June 29th, 2009 No Comments
The true power of CSS is in using it as an external style sheet. But it is convenient to first demonstrate CSS as an internal style sheet. This is how it works. Create a new HTML page. Insert some content, using <h2> and <h3> tags to format some of the content Insert the some internal [...]
Tags:
4.3 The Parts of CSS
June 29th, 2009 No Comments
Lets have a closer look at that internal style sheet you created on this page. <style type="text/css"> body {background-color: #669900; } h2{color: #FFFFFF;} h3{font-style:italic ; font-size:14px ; } </style> Its easy to see that the <style type="text/css">….</style> tags specify where the internal style sheet starts, and where it ends. Each rule in this style sheet [...]
Tags:
4.4 Redefine existing tags and Create your own class
June 29th, 2009 No Comments
Let's have another look at the example of an HTML page with an internal style sheet: <html> <head> <title> </title> <style type="text/css"> body {background-color: #669900; } h2{color: #FFFFFF;} h3{font-style:italic ; font-size:14px ; } </style> </head> <body> <h2> One heading </h2> Just normal text <h3> Another heading </h3> Just normal text </body> </html> Re-defining existing tags [...]
Tags:
4.5 Create an external style sheet
June 29th, 2009 1 Comment
So far, we've been looking at internal style sheets, where the style sheet was inserted in the head section of the HTML between two <style> tags. But the real power of CSS is in external style sheets. External style sheets work like this: Create a document, containing all your style rules, and save it in [...]
Tags:
