|
|
 |
|
DHTML introduction
|
Cascading Style Sheets
CSS stands for Cascading style sheets and is the part of DHTML that controls the look and placment of the elements on a page. With CSS you can basically set any style property of any element on a HTML page. One of the biggest advantages with CSS instead of the regular way of changing the look of elements (the font tag and similar) is that you split content from design. You can for instance link a CSS file to all the pages in your site that sets the look of the pages, so if you want to change like the font size of your main text you just change it in the CSS file and all pages are updated! The syntax for CSS code is basically like this:
<style type="text/css">
ELEMENT{property1:value1; property:value2}
</style>
Let me give you a couple of examples: We always place the style tag inside the head of the document. So a document could look like this:
<html>
<head>
<style type="text/css">
H5{background-color:blue; color:white; font-size:20px}
</style>
<body>
<h5>Cascading style sheets</h5>
</body>
</html>
All H5 heading on that page would then look like this: Cascading style sheetsIf you wanted only that single H5 heading to look like that you could have used a id on the tag and done it like this:
<html>
<head>
<style type="text/css">
#heading{background-color:blue; color:white; font-size:20px}
</style>
<body>
<h5 id="heading">Cascading style sheets</h5>
</body>
</html>
Or you could used something called inline styles which means placing the style directly in the tag. This can be useful in some cases, but as you can see it sort of takes away some of the point with CSS: <h5 style="background-color:blue; color:white; font-size:20px">Cascading style sheets</h5> If you use inline styles you still have to go into the actual content to change the style for the element. Now, there's a third way of doing this. If you for instance have 10 P tags on your page and you want 5 of them to be bold, but not the rest of them, then you use a class. You can name a class whatever you want, just remember to have a "." in front of the name.
<style type="text/css">
.whatever{font-weight:bold}
</style>
And to assign that to a P tag we go like this: <p class="whatever">This is bold text!</p> This is the absolute basic of CSS. Unfortunately CSS is supported a little differently on the different browsers and is only supported at all on 4.x+ browsers. Here are some places where you can read more about CSS:
Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved. |