CSS Beginners Guide – part 1

So you have bought a hosting package and need to know how to build your new website? You know some basic HTML but need to know how to make your website look attractive. Perhaps you are using an application to build your website, such as WordPress, and you want to be able to customise the style of your template further than just adding pictures and content.

The purpose of these guides is to teach the essentials of CSS. We will be looking at this over a number of Blog Posts – starting here with a note on what CSS is and how to apply it. Even when using an editor to create your web page such as Dreamweaver or Firstpage, it is a good idea to understand the fundamentals of Cascading Style Sheets (CSS) as it will make the whole process of designing your website much easier and help you to produce something polished much quicker.

What is CSS?

CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document (colours, images, borders, margins etc…)

A style sheet is a set of guidelines for the browser indicating how the various elements of a document should be presented. For example, the following set of instructions constitutes a style sheet for web documents:

  • The colour of the document background should be grey
  • The font and size of your Top-level headings should be Arial, 14pt
  • Warnings should be indented on both sides and set in yellow.
  • Itemized lists should use an arrow bullet.

Applying CSS

There are three ways of applying CSS to HTML.

1.      In-line
Can be added to any individual html tag in a page. They look something like this: 

<p style="color: red">text</p>

This will make that specific paragraph red.

2.      Embedded
For controlling the display of an individual page by adding instructions between the <head> and </head> tags. This would look something like this:

<head>
<title>CSS Example</title>

<style type="text/css">p {color: red;}a {color: blue;}</style>

</head>

This will make all of the paragraphs in the page red and all of the links blue.

3.      External
External styles are the preferred method of using CSS and can be used for the whole, multiple-page website. This means that you can change how hundreds of pages look by changing code in a single CSS file. Any time this single file is changed, so does the visual style of any pages that are linked to it so you can control an entire site from one separate CSS file. The content of such a file will simply look something like this:

p {color: red;}
a {color: blue;}

If this file is saved as ‘web.css’ then it can be linked to in the HTML like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>CSS Example</title>

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

Where does the Cascading come in?
“cascading” refers to the hierarchy of control, which is laid out below

  1. In-line styles take precedence
  2. Then Embedded styles come next
  3. Linked external style will apply if neither In-line or Embedded instructions are present

This introduction to CSS should help you understand the purpose of CSS in web design and how to implement it. In our next instalment we will go further into how you would use an external style sheet.

Keep checking back for more tutorials and guides to make the most of your products.

Need Web Hosting? Compare our Hosting packages available HERE.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

Leave a Reply

Your email address will not be published. Required fields are marked *