Professional Website
Development
TECH 272

Introducing CSS !

What are Stylesheets?

...then someone had a great idea, one file that defines all the values that those piles of tags would have done, and then have all your pages checking this file and formatting your pages accordingly. You can therefore leave out most of the formatting tags in HTML and use only nice structural elements (like headings, paragraphs and links) — separating structure and presentation." Ross Shannon

How CSS Works

Intro to CSS

Why Use Them? (aka CSS Benefits)

  • Better formatting and layout control - CSS formatting and layout is much more powerful than tag based. Settings like backgrounds, spacing, layers and borders are not always available with HTML tags.
  • Faster page downloads - sometimes by as much as 50%
  • Less development and maintenance time - Less code to type, and your pages are shorter and neater (easier to read)
  • Better accuracy/consistency throughout site - errors caused by editing multiple HTML pages occur far less often.
  • Improves the accessibility of web content - separation of content and presentation allows for improved access for alternative devices (such as PDA's and screen readers)...ensuring that mobile device users and users with disabilities have the best access possible.


CSS Steps

  1. Mark up your document with structural tags like <p>, <div>, <h2> example file
  2. Write your formatting "rules." Like this h1 {color: purple;}
  3. Attach your rules to your marked up document.

Writing Rules

Very Important! selector {property: value; property: value; property: value; }

example

p {color: blue; font-family: sans-serif; }

  • The selector is usually the name of a tag
  • The brackets are {curvy}, not [square] or (round).
  • After the property name there is a colon, and between each individual part there is a semicolon. Each of these pairs of properties and values is a declaration.

example style sheet

Exercise: My First Style Sheet

  1. Download and open this marked up document with its image.
  2. In the area indicated under the <style> tag, write rules that
    1. change the <h1> font to green
    2. makes the <p> font size small and the font face Verdana.
  3. Browse your document. Do you see the changes?
  4. Now update your css rules to do the following (try browsing after each change)
    1. change the h1 elements to red
    2. add a new rule that changes the h2 elements to red too
    3. add 100 px left margin to <p> elements using this declaration; margin-left: 100px;
    4. add 100 px left margin to the <h2> element as well
    5. add a red, 1-px border to the bottom of the <h1> element using this declaration;
      1. border-bottom: 1px solid red;
    6. float the image to the right and make the top and bottom margins 0 px and the right and left margins 12 px.
      1. img {float: right; margin: 0 12px; }

Attaching your Styles (3 ways)

  1. External Style Sheet- Use one CSS file for all your pages. This is the best way to do it!
  2. Embedded Style Block- Integrate CSS commands into the head of each of your documents.
  3. Inline Styling- Use the style attribute to put CSS code directly into a HTML element.

CSS allows you to use all three of these methods in glorious tandem, inheriting and overriding values as you go

External

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

  • rel stands for the file’s ‘RELationship’
  • type is CSS stylesheet
  • href is the absolute or relative path

Embedded - Style Block

<style type="text/css">
    p {font-weight: normal; color: gray; }
    h1 {color: black; }
</style>

Inline - using the Style attribute

<p style="color: blue; font-family: Arial; "> content </p>

Note: no curvy brackets used here; but the colon/semicolon rule still applies.

Exercise: My First External Style Sheet

  1. Cut and paste the code for your embedded style block to an external style sheet. Name it main.css.
  2. Don't forget your <link> tag in your twenties.html file.
  3. Try adding this inline style declaration <h2 style="color: purple">Connect the Dots</h2>
  4. What happened and why?
  5. Try changing the color of <h1> elements using an embedded style block

Hierarchy of Importance - the Cascade

The closer the styling is to the content; the more importance placed on the styling. So that the

General Order of Style Sheet Importance (least to most)

  1. external styles rules are given least importance
  2. embedded
  3. inline

Generally, styling starts with the external style sheet where all styling rules get passed down until they are overwritten by a style command closer to the source content.

So, what happens here?

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

Last one wins!

Overriding with !important

example
p {color: blue !important} would override

<p style="color:red">

Real Order of Style Sheet Importance (least to most)

  1. browser default
  2. user (custom) style settings - "reader style sheet"
  3. linked external
  4. imported external
  5. embedded style sheets
  6. inline style info
  7. any rule marked !important by author
  8. any rule marked !important by user

Inheritance - choosing the right selector

You can pass properties down via selectors!

inherit example
image from Learning Web Design by Jennifer Niederst ©2007 O'Reily Media

Given the diagram above and the p declaration in the image; how would this declaration affect the document.

body {font-family: "Times New Roman"; color: blue; font-size: small; }

CSS for Layout too? Yes!

Exercise: Boxes, Boxes Everywhere!

  1. Add the following embedded style rule: h1, h2, p, em, img {border: 1px solid blue; }
  2. What happened?
  3. These "boxes" are what we will use to position or layout our stylistic elements.