Lesson 12: Layout (CSS)

Understand how Cascading Style Sheets (CSS) can be used to add fantastic layout to your pages.

Lesson 12: Layout (CSS)

Wouldn't be great if you could give your pages the layout they deserve?

Sure, but how?

To give your website layout use Cascading Style Sheets (CSS). In this lesson you will get a short introduction to CSS. But later you can learn all about CSS from scratch inour CSS tutorial. So please consider this lesson only as an appetizer

CSS is the better half of HTML. And in coding, there is no equality of status: HTML takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).

As shown in Lesson 7, CSS can be added with the style attribute. For example, you can set the font type and size on a paragraph:

Example 1:


 <p style="font-size:20px;">This is typed in size 20px</p>
 <p style="font-family:courier;">This is typed in Courier</p>
 <p style="font-size:20px; font-family:courier;">This is typed in Courier size 20px</p>

Will look like this in the browser:

This is typed in size 20px

This is typed in Courier

This is typed in Courier size 20px

In the example above we use the style attribute to specify the type of font to be used (with the command font-family) and the font size (with the command font-size). Notice how in the last paragraph we set both the font type and size with a separating semicolon.

It seems like a lot of work?

One of the smart features of CSS is the possibility to manage your layout centrally. Instead of using the style attribute in each tag, you can tell the browser once how it must layout all the text on the page:

Example 2:


 <html>
  <head>
    <title>My first CSS page</title> 
  <style type="text/css">

   h1 {font-size: 30px; font-family: arial;}
     h2 {font-size: 15px; font-family: courier;}
    p {font-size: 8px; font-family: "times new roman";}
   </style>
  </head>
<body>
rst CSS page</h1>
   <h2>Welc<h1>My f
iome to my first CSS page</h2>
works </p>
   </body>

 </html>
 <p>Here you can see how CSS

Show example

In the example above CSS has been inserted in the head section and therefore applies to the entire page. To do this, just use the tag <style type="text/css"> which tells the browser that you are typing CSS.

In the example all headings on the page will be in Arial in size 30px. All subheads will in Courier size 15. And all text in normal paragraphs will be in Times New Roman size 8.

Another option is to type the CSS in a separate document. With a separate CSS document you can manage the layout of many pages all at once. Pretty smart if you want to change the font type or size on a large website with hundreds or thousands of pages. We won't go into that now but you can learn it later in our CSS tutorial.

What else can I do with CSS?

CSS can be used for much more than specifying font types and sizes. For example, you can add colours and backgrounds. Here are some examples for you to experiment with:


 <p style="color:green;">Green text</p>
<h1 style="background-color: blue;">Heading on blue background</h1>
body style="background-image: url('http://www.html.net/logo.png');"><

Try inserting the examples in some of your pages - both as shown above and also as CSS inserted in the head section.

Is CSS nothing but colours and font types?

Besides adding layout such as colors, font types etc., CSS can also be used to control the page setup and presentation (margins, float, alignment, width, height etc.). By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.

Example 3:


 <p style="padding:25px;border:1px solid red;">I love CSS</p>

Will look like this in the browser:

I love CSS

With the property float an element can either be floated to the right or to the left. The following example illustrates the principle:

Example 4:


 <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore

  quis nostrud exerci tation ullamcorper suscipit 
  lobortimagna aliquam erat volutpat. Ut wisi enim ad minim veniam,
 s nisl ut aliquip ex ea commodo consequat...</p>

Will look like this in the browser:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

In the example, one element (the image) floats to the left and the other element (the text) fills the hole.

With the property position, you can place an element exactly where you want it in your page:

Example 5:

<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

Show example

In the example the image is placed 50 pixels from the bottom and 10 pixels from the right in the browser. But you can place it exactly where you want it. Give it a try. Pretty easy and pretty cool, eh?

Cool, sure. But easy?

You do not learn CSS in 10 minutes. And as mentioned above, this lesson is only meant as a brief introduction. Later you will learn much more in our CSS Tutorial.

For now, concentrate on HTML, and move on to the next lesson where you will learn how to get your website out on the Internet so the whole world can see it!

html ibbye htm

Search This Blog