Tutorial #3 Cascading Style Sheets

Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local Links Page2

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, (0,0,0) Page 141 has a list. On the web colorhttp:// color

CSS Inline Style Sheet Orange Embedded Style Sheet Wrapped in tags Put in the head section style rules

CSS – Embedded Style h1 { color: blue; text-align: center; } h2 { color: green; }

CSS – Lab 1. Modify Firstpage.html – Add Color to h1 and h2 tags using CSS 2. Move“hello world” inside of a paragraph tag if it’s not already there. h1 { color: blue; } h2 { color: green; }

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 Good practice for styling to build it locally then copying the CSS to an external file

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; }

The Link Element Link element is used to link an external style sheet into a web page. Placed in the head section

CSS CSS styles can be applied for all HTML tags 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

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 1. h1 tags in uppercase 2. h2 in lowercase 3. Change the paragraph font to "Courier new", monospace 4. Change paragraph font size to 2em; 5. Add a CSS Comment at the start of the style saying This style provided by: 6. 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 – More text formatting Italic – In CSS use font-style Bold – In CSS use font-weight h2{ font-style: italic; font-weight: bold; } HTML5CSS Font-weight: bold; Font-style: italic;

CSS - Lab Modify firstpage.hml: 1. Make the h4 tag in italics (Using CSS) 2. Add a new paragraph tag 3. Added link to in the new paragraphhttp:// 4. Modify the link to have an overline style 5. Modify the link to have a font-size of 3em; 6. 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