beginning css

Adding Style with CSS The first steps to making your page look fab

Thursday, October 14, 2010

Before we start

• Install Firefox and Web Developer Toolbar

• Open http://doglr.com/base-css.html

• We will edit the CSS directly via WDT and save the changes to /css/start-css.css


http://doglr.com/base-css.html

http://doglr.com/base-css.html

What is CSS?

• Cascading Style Sheets

• The styles cascade. Generic rules are over powered by more specific rules.

• The closer you get to the tag, the more powerful the rule

• HTML provides structure, CSS provides style


CSS syntax

• selector {property:value; property:value;}

• selector selector {property:value;}

• selector.class {property:value}

• selector#id {property:value}


The most basic rule

• * {color:black}

• * = everything

• color:black = make text black


Style a container

• The uppermost container: html

• html {background: #000000; }

• #000000 = hexadecimal code for black

• #000 = #000000

• A specific container

• html body aside p {color:pink;}


Id and Class

• An id can only be used once on a page.

• A class can be used multiple times

• Keep the names functional, not stylistic, i.e. class=”intro” not class=”bigletter”

• header#hd = the header with id=”hd”

• p.first = the paragraph with class=”first”


Popular CSS properties

• border: 1px solid red;

• margin: 10px 0 5px 10px; /* top, right, bottom, left */

• background-color: yellow;

• width:500px;

• display:block;


Fonts Style for your text


What is an em?

• The size of the letter m

• A proportional size, that allows the user to resize the text.

• A better measurement for fonts and container widths.

•


What is a px?

• A single pixel.

• Proportional to the size of the screen.

• Good for objects that don’t resize, such as images


What is a pt?

• A point.

• Something used for printing on paper, not the web.

• Often times you’ll see this for web display and it’s not a good idea.

• 1px does not equal 1pt.


Font Families

• Serifs have feet and tails. These are good for reading paragraphs and large bodies of text. They are mostly used on paper.

• Sans Serifs do not have feet and tails. These are good for the web.

• Don’t use comic sans!


Popular Font Rules

• font-family: woot, helvetica, arial, sans-serif;

• The browser will use the first font your computer has available.

• font-size: 1.1 em;

• color: #808080;

• text-decoration:none;


Layout StylesCreate grids and text flows


Positioningrelative - absolute - fixed


Position

• Position:relative; The object remains in the content flow. This is a basic status, but is not a default.

• Position:absolute; Position the item absolutely to it’s closest relatively positioned parent.

• Position:fixed; object is positioned absolutely, but doesn’t move as the user scrolls.


FloatingPowerful grids and content flow


Floats

• Float:left; /* or right */

• The object will move as far to one side as it can. It stops when it hits something solid.

• Clear:left /* or right, both */

• The object will drop below anything previously floated


Text Flow

• Text and other elements will flow around an object that has been floated.

• This gives you the floated image effect.

This text willflow around

the floated box.


Next Class

• Why you should hate Internet Explorer

• How to use libraries

• Background images

• Intro to CSS3, pseudo-selectors, attribute selectors...


Resources

• http://csszengarden.com

• Subscribe to http://www.css-discuss.org/

• http://css.maxdesign.com.au/

• http://www.last-child.com/category/css/


http://csszengarden.com

http://csszengarden.com

http://www.css-discuss.org

http://www.css-discuss.org

http://css.maxdesign.com.au

http://css.maxdesign.com.au

http://www.last-child.com/category/css/

http://www.last-child.com/category/css/

beginning css

Technology

text black

text flow text

selector selector

value property

position position

text ows

html html

px display