WDV 101 Intro to Website Development

WDV 101 Intro to Website Development Tutorial #3 Cascading Style Sheets

Review: Last Class • Image sizing • Pathnames Project • Default Path • Relative Path • Absolute Path • Blackboard Homework Submission

Tutorial #2 Review - Anchors • Links to Site • <a href = http://www.dmacc.edu>DMACC </a> • Internal Links • <section id = “top”> </section> • <a href=“#top”>Go to Top <a/> • Mail To • <a href=“mailto:lehall@dmacc.edu”>Email me </a> • Local Links • <a href=“page2.html”> Page2</a>

Cascading Style Sheets (CSS) • CSS – Used to format the web page • Bold, Italics, fonts, outlining, highlighting, positioning • Advantages • Consistency • Easy modification of a lot of code • More flexible formatting.

CSS– Style Rule • A style sheet is a collection of rules • Format Selector { property1: value1; property2: value2; property3: value3; … }

CSS– Style Rule • h1{ color: yellow; text-align: center; } • Colors (color: color_value;) • Name, Hex code, RGB triplet • Black, #000000, RGB(0,0,0) • Page 141 has a list. • On the web http://www.w3.org/TR/css3-color/#svg-color

CSS • Inline Style Sheet <h1 style = “color: orange;”> Orange </h1> • Embedded Style Sheet • Wrapped in <style> tags • Put in the head section <style type= “text/css”> style rules </style>

CSS – Embedded Style <style type = "text/css"> h1 { color: blue; text-align: center; } h2 { color: green; } </style>

CSS – Lab • Modify Firstpage.html – Add Color to h1 and h2 tags using CSS • Move“hello world” inside of a paragraph tag if it’s not already there. <style type = "text/css"> h1 { color: blue; } h2 { color: green; } </style>

External Style Sheets • Styling across multiple pages can be handled with external css • Used a link element in the head section • Same code but in its own file <link href= “url” rel=“stylesheet” type=“text/css” /> • Good practice for styling to build it locally then copying the CSS to an external file

The Link Element • Link element is used to link an external style sheet into a web page. • Placed in the head section <link href=“url” rel=“stylesheet” type =“text/css” />

CSS - Comments • Comments • In CSS comments are wrapped in /* */ /* Everything In here Is a CSS Comment */

CSS Background Color • In CSS background-color h1{ background-color: gray; color: blue; }

CSS • CSS styles can be applied for all HTML elements a { color: orange; } body{ background-color: white; }

Fonts • Font is a distinct set of characters • Font Family – A set of fonts with similar characteristics • In CSS the font-family property can be used change the font. Font-family: Font1, Font2, …, GenericFont; Font-family: “Times New Roman”, Times, serif; • Fonts with spaces need to be in quotes.

Fonts - Size • Font-size: size; • Unit of Measurements • Absolute units • Relative units • Centimeters (cm)/Millimeters (mm) • Inches (in) • Points (pt) – 1/72 of one inch • Pixels (px) • Em – Roughly equal to the size of the letter M • Percent

CSS – More text formatting • Italic – In CSS use font-style • Bold – In CSS use font-weight h2{ font-style: italic; font-weight: bold; }

Transforming Text • Capitalize – Capitalized the first letter of each word • Lowercase • Uppercase • None – Removes and of the other values h1 { text-transform: uppercase; }

Transforming Text Other text options: • Letter-spacing • White space between letters • Word-spacing • White space between words • Text-indent • How much to indent the first line of each paragraph • Line-height • White space between lines.

Text Transform - Lab Modify your firstpage to have • h1 tags in uppercase • h2 in lowercase • Change the paragraph font to "Courier new", monospace • Change paragraph font size to 2em; • Add a CSS Comment at the start of the style saying This style provided by: <your name> • Add letter spacing to h4 to 25px;

CSS – Font Shorthand • For fonts you could type out all properties or use the shorthand • Does not have to have all but needs to be in order • Font style • Font weight • Font variant • Font size • Font family h3{ font: italic bold 1em Courier monospace; }

CSS- Text Alignment Can use text-align property • Left • Right • Center • Justify h1{ text-align: center; }

CSS – Anchor Underline • Anchor tags (links) can be modified with CSS • Text-decoration can be used to modify the default underline of a link • Options are none, underline (done by default), overline or line-through a{ text-decoration: none; } This can be useful for setting up a menu of links where you don’t want the line.

CSS - Lab Modify firstpage_css.hml: • Make the h4 tag in italics (Using CSS) • Add a link to http://www.dmacc.edu (if it’s not there) • Modify the link to have an overline style • Modify the link to have a font-size of 3em; • Change the background-color of the body to be #00FFFF and paragraph to #90EE90

CSS Validation • Validate the CSS similar to the way we did the HTML • Can alert of possible errors http://jigsaw.w3.org/css-validator/

WDV 101 Intro to Website Development