Introduction to CSS | Design Shack

What is CSS?

Where HTML is the language you use for designing the structure of a web page and adding the content, CSS is the language for adding styles, colours and layout options to the content you have written in HTML.

It allows you to define and create styles, which can either be linked to pre-existing tags such as <a> or <h1>, or completely new styles which you would reference by placing <div style="yourstylename"></div> around the content.

How to include a style sheet

The general practice for including a CSS file in your webpage is to place the following code in the <head></head> area of your page:

<link rel="stylesheet" type="text/css" href="style.css" />

The pathname (style.css) would need changing to the name and location of your CSS file.

The basic website

Here is the code of a simple website, ready to be styled with CSS. If you follow through the example and explanation, it should really help you when you come to create your own CSS styled web page.

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <title>Design Shack</title>
   </head>
   <body>
      <h1>Design Shack</h1>
      <p>Welcome to our website showcasing CSS and XHTML designs</p>
      <div class="box">
         This content will be in a CSS styled box
      </div>
   </body>
</html>

At the moment, this website will look something like this. Very basic, and not too pretty. Let’s go ahead and create a CSS file to link to this page, defining some styles.

The basic style sheet

body {
font-family: Verdana, Arial;
font-size: 11px;
color:#000;
background: #FFF;
}
h1 {
font-family: Arial, Verdana, Serif;
color: #99723b;
text-size: 18px;
}
.box {
padding: 10px;
border: 5px solid green;
width: 300px;
background: #f0f0f0;
}

The website now looks much better, with more colour, layout ideas and more attractive fonts.

Most of the code used above in the CSS example is very self explanatory. The body section applies to everything within the <body> HTML tag, h1 to everything inside a <h1> tag, and .box to anything within the <div class="box"></div> tags. The dot before box denotes this as a custom style, not a standard one such as body or h1.

Why is CSS important?

Most of the effects shown above can be achieved by using <font> tags in your design, or tables. The great thing about CSS is that it separates design from layout, and keeps your HTML code easy to read and understand. Pages load quicker, search engines have an easier time indexing your site and everyone benefits.

It also reduces the repetition of using lots of font tags, and if you wanted to change the look of all the headings on your website, you need only alter one CSS file rather than every single page.

Where to go from here

Start experimenting! Set up your own page in a similar way to above, try your own styles and see just how easy it is to achieve stunning visual effects with CSS.