html3.doc-jma50101/20/2013

Cascading Style Sheets (CSS)

Outline:

· What are styles

· What are style types

· Where do we store styles

· Boxes

Let’s add some CSS styling to improve the way the page displays

· Tutorials: http://www.w3schools.com/html

· Great Examples: http://www.csszengarden.com/

· Scroll on the right side to choose all designs

· Can see the HTML and the css

Styling Purpose

HTML was designed to markup scientific papers; e.g. here is a heading 1, here a (sub) heading 2, and here is a paragraph. It wasn’t designed to style the pages (bold, font, color etc.), CSS (Cascading Style Sheets) is

We want to separate the content from the styling

Our Current Page:

Kind of bland, we need to add styling information.

What are styles?

They are made up of rules: The example below shows a rule for paragraphs

p {color:#C0C0C0;}

Format:

· Element to be styled (p) above

· {

· CSS property (color above)

· :

· a property value (#c0c0c0 above)

· ;

· }

We might save this in the

section

p{color:#c0c0c0;}

…

Can enter this in

section…see below… (or one of two other possible locations: inline (within the paragraph) and external in a .css file )

Don’t confuse this p with

.

The example specified a color(c0c0c0) to be applied to paragraphs. (Kuler color below)

Remember: The CSS rule can be placed inside the

section:

Don’t type what you see below. Instead, open the (css for index page ) link, select the content and paste into index.htm.

I added a new

element because we’ll be styling it:

Recall kuler:The colors used in this CSS:

#efefef color:

#087368 results in:

Style Types

Three main types of styles:

· Tag,

· Class, and

· ID

· Tag Selectors are applied to existing HTML elements (Like the example above)

· Class selectors create styles can be applied to anything, and

· ID selectors can be applied to sections of a document (won’t use much )

1.) Tag Selectors

General format of a tag selector rule:

An HTML tag (a.k.a the selector),a {, a CSS property, a : a value and a ; and a }

Example:

You can have multiple declarations for one rule:

2.) Class SelectorsFormat: A period, a name and a declaration

· Can be applied to anything

· Example:

3.) ID Selectors

Applies to a section of your page

OK, so three style types: Tag, Class and ID

As noted previously, most HTML tags create boxes,

creates a box

, do too. Like any boxes, they can have a background color, a border, a margin, padding and so on. We’ll look at the box model again a bit laterBlock Level Elements (tags)…let’s call them boxesThey have a blank line above and below them. Examples of blocks

· p – Paragraphs

· h1,h2…h6…level 1, level 2 sizes etc

· div – arbitrary Division

· o, uL – List

· table – for tabular data

Inline elements (no boxes):Placed inside the paragraph

· , , even

Save and test

· Test your page. Should look like this (May have to hit ctrl- a few times to shrink the page; see the border (different size each side). It’s centered,)

Box Model

Margins: Want a box (p, h1) to be so many pixels away from all the adjacent boxes

Padding: Want the content of this box to be so many pixels from its border, if there is one

Can place a border around the box

The CSS box model is made up of four parts:

· margin

· border

· padding

· content

The margin is the outermost edge of the box. It is transparent and manifests as space between the element and others on the page. Margins can collapse into one another, so that the bottom margin of one element overlaps with the top margin of the element below it.

The border is the next thing surrounding the box. Borders can be colored or transparent. If the border is set to 0 it effectively disappears and the border edge is the same as the padding edge.

The padding is the space between the content and the border. Padding is the same color as the background color for the box. If the padding is set to 0, the padding border is the same as the content border.

The content is what most people think of as the element. This is the text or image or whatever is displayed inside the box.

You can manipulate the different parts of the box model with CSS properties:

· margin

· border

· padding

· width

· height

Here is an example of a box

Placing style information:

Recall we can save the styling information in one of three locations:

· inline …>/em> for example or,

· embedded in the

section (as we did), or

· Saved as an external file (.css) and then link to it. In our case, the styling information is inside the page…called embedded

External CSS…will cover more in Dreamweaver

Another benefit of CSS: I can save the styles in an external file, and link my pages to that file: Here is the concept:

· Would modify the link rel line to look like this…just an example, don’t type

So, we’ve seen examples of the two main places to store CSS information: embedded and external…we won’t deal with inline very much

So far, we’re working with Tag selectors…what are class selectors? Class Selectors

Now let’s add what are called a class selector; a style that can be applied to anything:

· Add the these classes to your index style section

· I made up the name border; it’s called a class selector—can apply it to anything, note the period in front

· footer’s the same

· To make them do anything, we have to apply them to something. For example,

· Add class=”border” inside the

as shown below. If you don’t have an anymore, create an Class projects after the img tag, and apply the class:

· It draws a line (border) around the

at the top and bottom

Applying a footer selector

· Let’s push text in row 3 to the right, change its color and make it smaller:

We already created the .footer class (see above)

Attach the class to the

· Go down to where your name is

· Inside that

enter class=”footer”

· Like this:

Here is my entire styling

· Here is the rest of the page:

Here is the rendered page:

· Save and test

· FTP the following:

· index.htm,

· banner.gif,

· Test using http://....

We’ll do more with CSS when we look at Dreamweaver

END

CSSPage 18