How Cascading Style Sheets Improve HTML

Part of the CSS Web Design For Dummies Cheat Sheet

CSS (Cascading Style Sheets) was a technology recommended by the World Wide Web Consortium (W3C) in 1996. An easy way to understand the purpose of CSS is to view it as an addition to HTML that helps simplify and improve web page design. In fact, some CSS effects are not possible via HTML alone.

Another advantage of CSS is that it allows you to specify a style once, but the browser can apply that style many times in a document. For example, if you want some of the pictures displayed in your website to have a thin, blue frame around them, you can define this frame as a style in your CSS. Then, instead of having to repeat an HTML definition of the thin and blue frame — each and every time you want that particular frame — you can merely insert the CSS style as an attribute for each graphic element that you want framed.

Put another way, you use CSS to define general rules about how the elements in your web pages behave and how they look — where they’re located, their size, their opacity, and so on. Then you can merely refer to the rule’s name whenever you want to enforce it within your HTML page.

Here’s a CSS rule that defines a couple of qualities you decide to apply to your largest headlines, H1:

<style>
H1 { font-size:16pt color:blue;}
</style>

With this CSS rule in effect, any HTML code containing an H1 element is automatically rendered in 16-point type and colored blue:

<html>
   <body>
      <h1>this headline is blue and 16 pt.</h1>
   </body>
</html>

CSS rules can be defined in a separate .css file or embedded within the HTML file. Here’s the CSS headline style rule embedded within the header of an HTML file:

<html>
   <head>
      <style>
h1 { font-size:16pt color:blue;}
      </style>
   </head>
   <body>
      <h1>this headline is blue and 16 pt.</h1>
   </body>
</html>

Notice the <style> element. You can define your CSS styles inside this element. (You can also have multiple <style> elements on a page if you wish.)

blog comments powered by Disqus

SERIES
CSS Web Design For Dummies Cheat Sheet

Advertisement

Inside Dummies.com