<h1></h1> , <h2> </h2> …… <h6> </h6>

Paragraph: <p>Some text </p>

Lists

Ordered List <ol> <li>I’m a list item</li></ol>

Unordered list <ul> <li>I’m a list item</li> </ul>

Document Section <div></div> (Important for page layouts!)

Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />

Links <a href=“http://www.google.com”>Google</a>

It allows document authors to specify the look of a web page (e.g. fonts, spacing, margins,etc.) separately from the structure of the web page (e.g. body, text, links, etc.)

The Selector ~ tells the rule what elements it should apply to

The Rule ~ does the formatting of the element

Made up of a property:value pair

p { color: #000000; }

Doing this causes all the tags of that name (i.e.<p>) to be formatted according to the style rule declared.

Possible to do this for multiple elements

If the page you’re working with has 2 colours in its background, you need to put light text on the dark background, and dark text on the light background

Classes are defined using a dot (.) and a given name, e.g.

.lightText { color: #ffffff }

To use the class in the document:

If you need an element on a page presented in a particular way, you can use an Identifier (remember an element’s id attribute is unique to a page)

Identifiers are defined using a hash (#) and a given name, e.g.

#siteTitle{ font-family: ‘Times New Roman’, serif}

To use the class in the document:

customise & alter the look of multiple web pages

ensure continuity of design throughout the website

@davkell

linkedin.com/in/davkell

www.ambientage.com

www.davidkelly.ie

Slides & Footnotes

www.ambientage.com/blog/091labs/