web design class: css (cascading style sheets) fundamentals
Post on 27-May-2015
404 Views
Preview:
DESCRIPTION
TRANSCRIPT
WEB DESIGN CLASS: CSS FUNDAMENTALS (OR THE TIP OF THE ICEBERG)Oleg Kagan, okagan@library.lacounty.gov
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
top related