Upsorn Praphamontripong, Fall 2014 (based in part on class materials by Jeff Offutt)

This is a short introduction to styling and cascading. Please feel free to compare page source with the screen.
For more information, please refer to Sebesta book.

Styling and Cascadings

What is CSS?

CSS (Cascading Style Sheet) is a style sheet language that let you style the html elements on your web page. It is embedded inside html but it is not html itself.

Why CSS?

Define how display html elements

Can we format/style the document using html?

How to use CSS?

Three levels of style sheets

Pros and Cons?

How to define CSS?

Rule structure

rule structure

Types of selectors

Some commonly used properties

Each property can have one or more comma separated values

Additional styling

Conflict Resolution


/* cstyle.css – an external style sheet for use with cascade.html */ p {font-size: 0.8em; }

<!doctype html> <!-- cascade.html --> <html lang =β€œen”> <head> <title> Style sheet levels </title> ... <link rel="stylesheet" type="text/css" href="cstyle.css" />

<style type="text/css"> p.docstyle { font-size: 1.2em; } </style>

</head> <body> <p> Now is the time </p> <p class="docstyle"> for all good men </p>

<p class="docstyle" style="font-size:1.6em"> to come to the aid </p>

</body> </html>

Cascade rules

      #id1 #id2 h1 {color: red; }  
      #id1 #id2 h1 {color: green; }     /* winner */
      #id1 h1 {color: blue; }      

More examples

Assignment Due
Assignment 5 09/30
Assignment 6 10/09

"Advice on submitting homework," by Dr. Jeff Offutt Although the professor will usually make an honest attempt to grade the homework completely objectively and solely on the basis of content, unfortunately, most homeworks require some judgement to evaluate. This means that the presentation of your homework can have a significant impact on the amount of time needed to grae, and ultimately, on your grade that you receive. Thus it is to your advantage, as well as your professor's, for you to do your best to make your homework not only correct, but easy to grade.

Sign Up!