Custom CSS

1. Custom CSS Creating your own Cascading Style Sheets CSU Extension Webpage template Session 9 May 2010

2. What does CSS do? • 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

3. Existing Template CSS • 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

4. Appending Your Own 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”

5. Syntax Basic syntax selector { property: value; } Example: HTML element h2 { color: blue; font-family:arial,helvetica,"sans serif"; font-style: italic; font-size:150%; } This would affect ALL H2 headers

6. Common Properties and Values • 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!

7. Creating a header class • You don’t want to change all h2 headers • Create a class to apply your CSS selectively h2.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;

8. Creating a paragraph class Useful for a pull quote p.emph { border-left: 3px #666 solid; border-right: 3px #666 solid; font-size: 120%; font-style: italic; padding: 15px; margin: 10px; }

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

10. Picture with caption • 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%; }

11. Using Extension CSS • 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