call us now!

08 9459 5730

0402 142 559

Cheap web design services in Perth! Your local web designer in Perth. Quality low cost web design that you can afford.

What is CSS?

CSS stands for Cascading Style Sheets.

CSS was first developed in 1997, as a way for Web developers to define the look and feel of their web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on - the mark-up of content. Before CSS, web developers designed websites using tables for web page layout.

Cascading Style Sheets are a very powerful tool for the web site developers. They give you the chance to be completely consistent with the look and feel of your pages, while giving you more control over the layout and design.

Styles are defined as rules. These rules tell any web browser that understands them how to display specific types of HTML docuemnt. CSS defines HOW HTML elements are to be displayed.

In HTML 5.00 all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today. CSS saves you a lot of work because to change the appearance of HTML pages, you only change one file.

The current version of CSS is CSS Level 3 - CSS3.

Applying CSS to HTML Documents

Parts of a CSS Rule

Every style consists of one or more rules as shown below. A CSS rule has two main parts: a selector, and one or more declarations:

css

A CSS declaration always ends with a semicolon, and declaration groups are enclosed within curly brackets to separate them from selectors. A declaration is the combination of a CSS property and value.

  1. A selector that defines HTML element (s) to which the rule applies. The selector is normally the HTML element you want to style. For example, h1 (heading 1), h2 (heading 2), p (paragraph) etc...
  2. Declaration is made up of a property and a value. The property is the style attribute you want to change and has a value. For examples, h1 {color:blue; font-size:12px;}. In this example, we want to tell the browser that the color of heading 1 is blue and the font-size is 12px. Color and font-size are properties and blue and 12px are values.
  3. Semicolon - As you can see from the image above, each declaration must be followed by a semicolon. The semicolon is the end of the declaration.

Where can CSS Styles be Defined?

There are three ways of inserting a style sheet into HTML document:

Inline Declarations

You can style any element by listing style declarations inside that document’s style attribute. These are referred to as inline declarations because they are defined inline as part of the document’s HTML. You can assign a style attribute to almost all HTML elements. For example, to make a second-level heading within a document appear in red text and capital letters, you could a line like this:
<h2 style=”color:red; text-transfoorm:uppercase;”>I am heading two<⁄h2>

Embedded CSS

Specifying style properties in an embedded style sheet is an approach that’s often used by beginning web designers and those just learning the techniques involved in CSS design. It’s not my favourite method.

To embed a style sheet in a web page, we place a style element in the head of the document’s HTML and fill it with style rules, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
h1, h2
{
     color:blue;
     font-size:20px;
     font-family:Tahoma, Geneva, sans-serif;
}
</style>
</head>

The CSS rules contained in the style block apply to all current document HTML h1 and h2. In this case, the first rule tells the browser to display all level one and two headings (h1, h2) in blue, font 20px and font type Tahoma.

I always start each rule on a new line, and each declaration within the rule appears indented within braces on its own line to make the codes easier to read.

External CSS

You can define CSS rules in a file that’s completely separate from your HTML document. You can link to this file by including a link element in the head of any HTML document on which you want to implement those styles.

Example of external CSS:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>What is CSS - Learn how to design website with CSS</title>
<meta name="description" content="What is CSS - Learn how to design website with CSS." />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/responsive.css" media="only screen and (max-width : 480px)" />
</head>

There are two CSS styles in this example; style.css and responsive.css for mobile phones. These CSS styles are located in css folder in the website's root directory. Below is the exteral CSS file in my website root directory:

css

The External CSS is the preferred way to use CSS, for a number of reasons:

  • If you define an external style sheet file, you can apply it to as many pages of your site as you want, simply by linking to the style sheet from each page on which you want it used. Using external CSS also makes your site a lot easier to maintain, you only have one css file to change. If you use embedded or – worse yet – inline styles, you will have to change every single page of your website. If you have 1000 pages, you have to change every page of that 1000 pages.
  • External style sheets are treated as separate files by the browser. When the browser navigates to a new page that uses the same style sheet as a previous page, the external style sheet will not be downloaded again. Therefore, pages that used external style sheet much quicker to load.
  • External style sheets are simply more professional. By using them, you demonstrate and understanding of the importance of the separation of content from presentation.

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

/****************************HEADER*******************************/

#header
{
     float:left;
     background:#FFF;
     padding:0;
     width:980px;
     height:95px;
}