TweetFacebookShareThis

CSS Terminology

Previous Page    Next Page

Creating a CSS rule starts with the selector for the element you want to style such as the h1 for a heading or p for a paragraph, then you create a declaration block which includes a property such as a color or font-size and a value which is the color or font-size of your choice, this is wrapped inside a pair of curly braces { }, the example declaration declares a property in this case color and font-size and a value which in this case is black (hexadecimal shorthand #000), and 2em for the font size and all of this is known as a rule, note: make sure you include the semi-colon after the curly braces to make the syntax of the rule complete

Selector Declaration
  Property Value
h1 { color: #000;}
h1 { font- size: 2em;}

Styling a Document

Embedded Styles

An embeded style rule is inserted between the head tags of the document, the (p) is the element selector which is followed by the declaration block which consists of the property (color) and a value (#0000ff which is hexadecimal for the colour of blue), these are enclosed between two curly braces and a semi-colon is placed at the end of each rule.

<html>
<head>
</title>Exercise 1</title>
<style type="text/css">
p {color:#0000ff;}
</style>
</head>
<body>
<p>This paragraph should be coloured blue</p>
</body>
</html>

This paragraph should be coloured blue

Inline Styles

Inline styles are placed within the body of the document to target specific elements

<p style="background-color:#ccc; color:#f00;">This paragraph should have a background colour of grey and the text is coloured red this is achieved by using an inline style</p>

This paragraph should have a background colour of grey and the text is coloured red this is achieved by using an inline style

External Style Sheets

External style sheets are linked to an external document within the head of the HTML document using the following code

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

This paragraph should be coloured green and italic and is styled from an external style sheet

You can link more than one style sheet to a document

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

External style sheets and embedded style sheets can also be used together, but the embedded styles should be placed under the linked styles within the head of the document.

<head>
<link rel="stylesheet" type="text/css" href="secondarystyle. css" media="all">
<style type="text/css">
p {color:#0000ff;}
</style>
</head>

A style sheet can also be imported into the document using @import url( style. css) ;

You can also import more than one style sheet, this would maybe be used for linking style sheets together

@import url( style. css) ;
@import url( secondarystyle. css) ;

A demonstration of what can be accomplished through CSS-based design
www.csszengarden.com
www.cssbeauty.com

CSS tutorial sites
www.maxdesign.com.au

Previous Page    Next Page

Recommended Books