WDV 101 Intro to Website Development

Tutorial #3 Cascading Style Sheets

Review: Last ClassImage sizingPathnames Project

Default PathRelative PathAbsolute Path

Blackboard Homework Submission

Tutorial #2 Review - AnchorsLinks 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

AdvantagesConsistencyEasy modification of a lot of codeMore flexible formatting.

CSS – Style RuleA style sheet is a collection of rulesFormatSelector {

property1: value1;property2: value2;property3: value3;…

}

CSS – Style Ruleh1{

color: yellow;text-align: center;

}Colors (color: color_value;)

Name, Hex code, RGB tripletBlack, #000000, RGB(0,0,0)Page 141 has a list.On the web

http://www.w3.org/TR/css3-color/#svg-color

CSSInline Style Sheet<h1 style = “color: orange;”> Orange </h1>Embedded Style Sheet

Wrapped in <style> tagsPut 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 – Lab1. 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.<style type = "text/css">h1 {

color: blue;}h2 {

color: green;}</style>

External Style SheetsStyling across multiple pages can be handled

with external cssUsed a link element in the head sectionSame 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 ElementLink 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 - CommentsComments

In CSS comments are wrapped in /* */

/*Everything In here Is a CSSComment*/

CSS Background ColorIn CSS background-color

h1{background-color: gray;color: blue;

}

CSSCSS styles can be applied for all HTML

elementsa {

color: orange;}body{

background-color: white;}

FontsFont is a distinct set of charactersFont Family – A set of fonts with similar

characteristicsIn 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 - SizeFont-size: size;Unit of Measurements

Absolute unitsRelative units

Centimeters (cm)/Millimeters (mm)Inches (in)Points (pt) – 1/72 of one inchPixels (px)Em – Roughly equal to the size of the letter MPercent

CSS – More text formattingItalic – In CSS use font-styleBold – In CSS use font-weighth2{

font-style: italic;font-weight: bold;

}

HTML5 CSS

<strong> Font-weight: bold;

<em> Font-style: italic;

Transforming TextCapitalize – Capitalized the first letter of each

wordLowercase UppercaseNone – Removes and of the other values

h1{

text-transform: uppercase;}

Transforming TextOther text options:Letter-spacing

White space between lettersWord-spacing

White space between wordsText-indent

How much to indent the first line of each paragraph

Line-heightWhite space between lines.

Text Transform - LabModify your firstpage to have1. h1 tags in uppercase2. h2 in lowercase3. Change the paragraph font to "Courier

new", monospace4. Change paragraph font size to 2em;5. Add a CSS Comment at the start of the style

saying This style provided by: <your name>6. Add letter spacing to h4 to 25px;

CSS – Font Shorthand For fonts you could type out all properties or

use the shorthandDoes not have to have all but needs to be in

orderFont styleFont weightFont variantFont sizeFont family

h3{font: italic bold 1em Courier monospace;

}

CSS- Text AlignmentCan use text-align propertyLeftRightCenterJustify

h1{text-align: center;

}

CSS – Anchor UnderlineAnchor tags (links) can be modified with CSSText-decoration can be used to modify the

default underline of a linkOptions 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 - LabModify firstpage_css.hml:1. Make the h4 tag in italics (Using CSS)2. Add a link to http://www.dmacc.edu (if it’s

not there)3. Modify the link to have an overline style4. Modify the link to have a font-size of 3em;5. Change the background-color of the body to

be #00FFFF and paragraph to #90EE90

CSS ValidationValidate the CSS similar to the way we did

the HTMLCan alert of possible errorshttp://jigsaw.w3.org/css-validator/