Cascading Style Sheets

CSS

CSS stands for Cascading Style Sheet. Typical CSS file is a text file with an extention.css and contains a series of commands or rules. These rules tell the HTML how to display.

*To create a style sheet, create a file using Notepad save it as a .css document and start writing the CSS code.

/* Styles for sitename.com*/

body {font-family:Arial; background: #000;}

#container {text-align:left;width:1020px;

}

#header {height:232px;}

#footer {width: 100%;padding: 0 10px;margin-bottom: 10px;

}

And so on….

Why use it?Used to control formatting

◦Change text properties◦Control the spacing between

elements on your page◦Draw borders◦Add images◦Etc.

Compatible with HTML and XHTML

Benefits to Using CSS• Separates structure from presentation

• Provides advanced control of presentation

• Easy maintenance of multiple pages

• Faster page loading

• Better accessibility for disabled users

• Easy to learn

Only downside…CSS does not work exactly the same way in all

browsers.◦ You should be able to ensure that your site is

still accessible, useable, and attractive in any browser.

Without using CSS “HTML without CSS is

like a piece of candy without a pretty wrapper.”

Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default.

With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.

Box Model

CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float.

HeaderNavigationContentFooter

HTML & CSS

• HTML and CSS work together to produce beautiful and functional Web sites

• HTML = structure

• CSS = style

We have not given up HTML, we are only adding to it!

CSS Rule Structure

A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value.

selector {property: value;}

declaration

Selectors

body { property: value; } h1 { property: value; } em { property: value; } p { property: value; }

•The name of the desired type of element, without any attributes.

Properties and Values

body {background: purple;} h1 {color: green; }h2 {font-size: large;}p {color: #ff0000;} /*hexadecimal for red*/

Properties and values tell an HTML element how to display.body {background: purple;color: green;}

*CSS code can be written in a linear format (above) or in a block format (left).

PropertiesProperty is the name of the CSS

property that describes the sort of formatting you would like to apply.

Properties are basically the same as attributes used in html formatting. Some are the same; however, be careful!

Some examples:Same: border, color, Different: font-size, line-height, text-align,

font-family, background-color

ValuesMany values are the same as when you used

them in html. Some of the rules may change slightly.

Some examples:Same: colors, font styles, size (aside from stating how you are using the size #), Different: border values (html=”0” vs. css: none), if using pixels, you must state it as px

In css, values are not surrounded by quotation marks

Grouping Selectors

h1 {color: black;}

h1 {font-weight: bold;}

h1 {background: white;}

h1 {

color: black;

font-weight: bold;

background: white;

}

Group the same selector with different declarations together on one line.

Example of grouping selectors (both are correct):

Grouping SelectorsGroup different selectors with the same declaration on one line.

h1 {color: yellow;}

h2 {color: yellow;}

h3 {color: yellow;}

h1, h2, h3 {color: yellow;}

Example of grouping selectors (both are correct):

Quick ReviewWrite out a rule structure (4

parts)_________{______________} (then

name what the information is between the curly brackets.

Write out a rule structure using elements for each part

Group selectors with a common declaration

Group a selector with 2 or more elements within a declaration

Review AnswersRule structure:Selector {property: value;} Declarationh2 {color: blue;}h1, h2, h3 {font-weight: bold;}p {text-align: center; font-style:

“times new roman” arial;}

CommentsYou can add comments to your

html (xhtml) documents in order to remind yourself what you were trying to achieve with your html tags

They only appear when the document is opened with an editor (they are invisible to the end user)

Comments: TipsUseful for describing why you used a

particular tag and what effect you were hoping to achieve

Useful to remind yourself to include, remove, or update certain sections

You should view your commented page with a browser before publishing to avoid sharing your private comments with the public

Comments may not be nested within other comments!

Comments Continued…Different when using html and css:Html: One tag, no closing tag:

<!--My comments that I want to state-->

Css: /*My comments that I want to state*/

p {color: #ff0000;} /*Company Branding*/

Either way is correct depending on your purpose.

Let’s play with it a littleGo to www.w3schools.comClick on “Learn CSS” to the left of

the page.Work through the introduction to

ID and Class.

Attaching a Style Sheet Attach a style sheet to a page by adding the code to the

<head> section of the HTML page. There are 3 ways to attach CSS to a page:

1. External Style Sheet: Best used to control styling on multiple pages.

<link rel="stylesheet" type="text/css" media="all" href="styles.css" />

2. Internal Style Sheet: Best used to control styling on one page.

<style type=“text/css”>h1 {color: red)</style>

3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags.

<p style=“color: red”>Some Text</p>

Begin a new pageSet up a new html documentSave it as personal.html in a new

folder called “personal pages”Create a heading using h1 tags (do

not format!)Add a comment after your h1 tag that

states an image should be placed there.

Create 2 paragraph tags with some content within it

Make sure you are closing ALL appropriate tags!