150 likes | 267 Views
CS110: Computers and the Internet. Customized Markup, Fonts, Box Model. Today. Styling fonts Customized markup The Box Model. CSS Example. CSS. Style sheets can be put in (at least) three different places: Inline Styles . These are specified in the tag itself using the style attribute.
E N D
CS110: Computers and the Internet Customized Markup, Fonts, Box Model
Today • Styling fonts • Customized markup • The Box Model
CSS • Style sheets can be put in (at least) three different places: • Inline Styles. These are specified in the tag itself using the style attribute. • Document-Level (Internal) Style Sheets. These are specified in the <head> of a document, using a special tag <style>. • External Style Sheets. These are specified in a separate CSS file that is connected to the HTML file by the <link> tag. • http://cs.wellesley.edu/~cs110/lectures/CSS_example/CSSbasic/introCS1.html
Fonts with CSS serif family sans-serif family A Times New Roman Georgia Verdana Arial body { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; font-style: italic; } em { font-family: Impact; } Specifying font size: font-size: 14pt; font-size: 20px; font-size: 150%; Keywords:xx-small,x-small,small,medium, large, x-large,xx-large, smaller, larger default is normal
SPAN and DIV http://cs.wellesley.edu/~cs110/lectures/CSS_example/CSSbasic/introCS2.html
Class versus ID • The key is uniqueness: an id must be unique, while a class describes a kind/type/category of element.
Hands on Exercise • http://cs.wellesley.edu/~cs110/lectures/CSS_example/CSSbasic.html • Modify document-level style sheet: paper-based exercise on handout • Modify external style sheet: Computer-based exercise
CSS Box Model p { color: maroon; background-color: pink; width: 200px; padding: 20px; border: 5px dashed blue; margin: 50px; } margin padding width box content border The top, bottom, left and right sides of the margin, padding and border can be styled differently, to create many distinct appearances
Exploring the the Box Model with Firebug • http://cs.wellesley.edu/~cs110/lectures/BoxModel/box-ex1.html