Creating your own Cascading Style Sheets

CSU Extension Webpage templateSession 9

May 2010

HTML is content, CSS is presentation Defines the overall structure of the site

• 3 column, 2 column structures Styles the font

• Type, size, color of font• Behavior of hyperlinks• Appearance of bullet points• Headlines (headers, e.g. h2, h3)

Won’t need to make major changes, might want to tweak exisiting styles

Inside CSS folder general.css

• Pulls in other CSS pages master.css

• Where most of the CSS is Rest of the CSS is descriptively labeled

• one_column.css, two_column.css, table.css Rather than change existing css,

append your own sheet onto the general.css

Add this to general css/* my styles */@import url("new.css");

This will point to a .css sheet called “new.css”• Put your own css in here

File>New>CSS will start new css page• Save it in css folder as “new.css”

Basic syntaxselector { property: value; }

Example: HTML elementh2 { color: blue;font-family:arial,helvetica,"sans serif";font-style: italic; font-size:150%; }

This would affect ALL H2 headers

Color• Determines text color, takes name of color (blue)

or hex code (#669966) Font-size

• Ems, percentages, pixels, “larger” and “smaller”• Percentages are scalable

Border• Takes size, weight, color• You can specify border-left, border-right

Margin, padding• In pixels

Text-align• Left, center, right

Dreamweaver will suggest possible values

Use the internet!

You don’t want to change all h2 headers Create a class to apply your CSS

selectivelyh2.emph {text-align: center;color: black;font-size: 140%;} Add class of “emph” to h2 header Add “!important” to trump existing

styles color: black !important;

Useful for a pull quotep.emph {border-left: 3px #666 solid;border-right: 3px #666 solid;font-size: 120%;font-style: italic;padding: 15px;margin: 10px;

}

A way to emphasize text.mybox {background-color: #669966;border: #666 1px solid;padding: 10px;margin: 20px;color: #fff;font-size: 110%;}

You can contain several elements with divs• Use the div icon in the Insert panel

div.mycaption { float:right; border: thin silver solid; margin: 5px; padding: 5px; text-align: center; font-style: italic; font-size: 75%; }

Current general.css points to local files/* Master styles for screen media */@import url("master.css");

Pointing them to Extension server allows us to tweak errors

/* Master styles for screen media */@import url("http://www.ext.colostate.edu/css/master.css");

Replace general.css with web_general.css

Won’t overwrite your own CSS• It will continue to point to a local file