Lesson 03 // Cascading Style Sheets

CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a markup language that lets you control how your web page looks.

How to access elements in CSS?

By element p {}

div {}

span {}

By id p#container {}

div#header {}

By class li.Items {}

div.footer {}

Nested div div#container {}

div#footer p#first {}

In other words:

HTML

<li class=“container”></li>

REFERNECED IN CSS:li.container { }li = element. = dot (references elements by class)container = class name

<li id=“container”></li>

li#container { }li = element# = pound (references elements by id)container = id name

In other words:

HTML

<li class=“container”><a href=“http://www.msu.edu/”></a></li>

REFERNECED IN CSS:

li.container a{ }

li = element. = dotcontainer = class name = space (refers to nested elements)a = element (nested inside the li element)

HTML

<div class=“container” id=“topbox”>

<h1>Hello</h1></div><div class=“container” id=“middlebox”>

<h1>Hello</h1></div><div class=“container” id=“bottombox”>

<h1>Hello</h1></div>

REFERNECED IN CSS:div.container h1 {

font-size: 12px;}

Which of the h1s will have a font-size of 12px?

div#topbox h1 {font-size: 16px;

}

Which of the h1s will have a font-size of 16px?

REPRESENT THE FOLLOWING CSS IN HTML

div.container span#topbox { }

IS THIS HOW THE BELOW CSS IS WRITTEN IN HTML?

div.container div#topbox h1{ }

<div class=“container” id=“topbox”>

<h1>Hello</h1></div>

CSS HTML

VISUALS

font-size

font-weight

font-family

font-style

color

background-color

text-decoration

border-color

border-style

border-left

border-right

list-style-type

list-style

text-align etc

POSITION

float

clear

position

padding

margin

border

display

width

height

etc

Examples of CSS Properties

<ul><li class="stylinglist">About

Us</li><li

class="stylinglist">Products</li><li

class="stylinglist">Services</li><li

class="stylinglist">Research</li><li class="stylinglist">Contact

Us</li></ul>

HTML

li.stylinglist {float: left;padding: 5px 0;width: 120px;background-color: #990066;border-left: 1px dotted #ffffff;list-style-type: none;text-align: center;

}

CSS

li.stylinglist {float: left;list-style-type: none;width: 120px;background-color: #990066;padding: 5px 0;border-left: 1px dotted #ffffff;text-align: center;

}

In the previous example we used text-align to center each word within the 120px list width:

Centering inline and block-level elements:

text-align applies on block containers containing inline-level content. Here the block container is li to which we applied text-align:center to center text (inline-level content) within the block li.

Other text-align values besides center:left, right, justify

text-align could also apply on:• a div (block) containing img (inline)• p (block) containing text (inline)• th (block) containing words (inline) etc

div#container {width: 700px;height: 700px;margin: 0 auto;background-color: #ff0099;

}

Block-level elements however, don’t understand text-align. In order to center them we use margin: 0 auto; on block element itself, not on its parent.

div#bluebox {width: 500px;height: 300px;background-color: #33cccc;padding: 20px;word-spacing: 15px;

}

What about word-spacing? It is applied on ALL elements (block and inline) and specifies spacing behavior between words and other inline-level content, such as images.

15px

P.S. text-align and word-spacing are examples of “inherited” styling attributes.

Ex, If a p with word-spacing nests a span without, the span inherits the word-spacing styling attribute of p.

Examples of properties that can come in shorthand: font:

body {font: bold italic 12px Arial, Helvetica, sans-serif;

}

body {font-weight: bold;font-style: italic;font-size: 12px;font-family: Arial, Helvetica, sans-serif;

}

Examples of properties that can come in shorthand: background:

body {background: #000000 url(images/smile.jpg) no-repeat;

}

body {background-color: #000000;background-image: url(images/smile.jpg);background-repeat: no-repeat;

}

Examples of properties that can come in shorthand: border:

div#container {border: 3px solid green;

}

div#container {border-width: 3px;border-style: solid;border-color: green;

}

Examples of properties that can come in shorthand: list-style:

li.stylinglist {list-style: circle outside;

}

li.stlylinglist {list-style-type: circle;list-style-position: outside;

}

The a element in CSS:

a {font-size: 12px;

}

a:link {color: red;

}

a:visited {color: green;

}

a:hover {color: blue;

}

a:active {color: maroon;

}

a:link = unvisited link

a:visited = visited link

a:hover = mouse over link

a:active = selected link

Different formats for margin/padding representation:

margin: 5px; Applies to all 4 edges

margin: 5px 10px; Applies to top & bottom left & right

margin: 5px 20px 7px; Applies to top left & right bottom

margin: 5px 15px 0 12px; Applies to top right bottom left

P.S. Same for padding.You can choose to be more specific:

margin-top: 5px;margin-right: 10px;padding-left: 7px;etc

The Box Model:

ma

rgin

bor

de

rp

add

ing

• If padding has 0 width, padding edge same as div edge

• If border has 0 width, border edge same as padding edge

• If margin has 0 width, margin edge same as border edge

• The width & height dimensions refer to the inner most box

width

heig

ht

Inheritance:

Under Firefox/Preferences/Content and Safari/Preferences/Appearance are the default font and size that the browser is using.

If font and size not specified in CSS, the text in your webpage inherits those specified in the browser’s default.

In the case of nested elements, the child sometimes inherits properties from its parent, like font, font-size, color, and so forth, unless its own are specified in CSS.

Check W3C for a list of all the properties, including their inheritance http://www.w3.org/TR/CSS2/propidx.html