Simple CSS anatomy

Monday 06 February

Tips & Tricks

Praise from...

I have worked with Frank in many different ways over the past few years and have continued to both refer work to him and seek him as a colleague. Frank's work ethic is fantastic, he has great CSS skills and always considers usability and the potential user of a website while working. He's a great asset to any web team.

Drew Story
Web IT Project Manager | Developer
Patagonia, Inc.

Simple CSS anatomy

Tips & Tricks

A CSS rule is a block of code that formats a markup element (HTML tag) on a web page. The rule's construction starts with a selector, corresponding to a markup element, followed by one or more style declarations sandwiched between curly braces – { }. The style's declaration contains two parts, a property and its value. The property and value are separated by a colon and terminated by a semi-colon.

Style Rule

Selector body {
Declaration

Property font-family: Arial, sans-serif; Value

}

Types of Selectors

Simple Selector – Corresponds to an HTML tag, i.e. <h1>, or XML document element. h1

ID Selector – Corresponds to an element's id attribute value, can be used only once per web page, i.e. <div id="header">. #header

Class Selector – Corresponds to an element's class attribute value, can be used multiple times per web page, i.e. <img class="button">. .button

Next >