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