View
31
Download
2
Category
Preview:
DESCRIPTION
Custom CSS. Creating your own Cascading Style Sheets CSU Extension Webpage template Session 9 May 2010. 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 - PowerPoint PPT Presentation
Citation preview
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
Recommended