web design class: css (cascading style sheets) fundamentals
DESCRIPTION
This "beta" deck is for a CSS (Cascading Style Sheets) Fundamentals course I first gave at the West Hollywood Library on 14 February 2014. It's still in beta, because I will very likely be refining it and the way I'm going to be teaching the class. In addition to the deck, I gave participants two handouts: 1) the HTML source for Fluffy's page, 2) the CSS Stylesheet for Fluffy's page. Fluffy is my fictional cat.TRANSCRIPT
WEB DESIGN CLASS: CSS FUNDAMENTALS (OR THE TIP OF THE ICEBERG)Oleg Kagan, [email protected]
Photo: (cc) Uta Wollf, Rodebay (With permission)
beta
STYLE SHEETS?
Photo: (cc) Dreftymac Wikimedia Commons
CASCADING?
USER AGENT (browser defaults)
EXTERNAL STYLESHEET (seperate file)
INTERNAL STYLESHEET (in <head> tags)
INLINE STYLE (in other tags)
USER-DEFINED STYLE
WHERE WILL FLUFFY GO?
WHERE WILL FLUFFY GO?
selector {property: value;
}
RULES ARE MADE TO BE...Creative
body {background: #0097ff;font-family: Arial, sans-serif;color:black;
}
SEE?Selector
Property
Value
5 SELECTORS TO KNOW
* {
padding:0;margin:0;
}
a:link {text-decoration:none; color: #40FF00; }
a:visited {text-decoration:none; color: #40FF00; }
a:hover {text-decoration:underline; }
a:active { }
RULING THE HEADER!
h1 {letter-spacing:3px;font-size: 60px;margin: 10px 0px 10px 0px;width:100%;text-align:center;
}
text-transform: capitalize|uppercase|lowercase|initial|inherit;line-height: value;
RULING THE PARAGRAPH!
<p style="width:50%; text-align:center; margin-left:350px;"> My Paragraph</p>
INLINE STYLE (in other tags)
Class: Many of the same.
ID: One of a kind.
CLASSES & IDS, OH MY!
<hr class="groovy-hrs" />
<DIV> AND CONQUER
<div id="favorite-things">
#favorite-things {float:left;margin: 20px 20px 20px
353px;}
20px
20px
20px
353px
BOX MODEL
More: http://www.w3schools.com/css/css_boxmodel.asp
A FEW GOOD PROPERTIES...o border: 3px white solid;o list-style-type: disc|square|circle;o float: left|right|turn-yourself-around;o display: Play it! o position: Play it!o font-size: value px / em / pt / % etc;o font-style: italic|oblique|initial|inherit;o font-weight: 100-900, etc.;
QUESTIONS?
THANK YOU