CIS 204 Intro to Website Development

WDV 101 Intro to Website DevelopmentTutorial #4 Formatting Text and LinksTutorial #3 Review - CSSCSS formatSelector {property1: value1; /* Comments */}Embedded, In-Line, and External CSSStyles - color, background-color, font-family, font-size, text-transform, letter-spacing, word-spacing, text-indent, line-height, text-align, font-style, font-weightCSS Validation (http://jigsaw.w3.org/css-validator/)

Homework PageCreate an index.html page for your homeworkUpload to your server account Have an H1 tag at the top with Homework of your nameEach Tutorial section should be separated with an H2Each homework should be linked in an unordered listEventually you will have a main page that links to homework, final, etc.

Homework PageExample setup on http://www.dmaccwebdev.org/WDV%20101%20Fall%2013/MattHall/homework/

Final ProjectThe final project has 300 points available, plus some extra credit. Failure to complete a final project will result in a grade of 0 for the project and a failing grade in the course. Requirements:Purpose and Organization: (70 points)Required Technical Features: (200 points)Project Presentation: (30 points)Extra Credit Features: (20 points maximum)

http://www.dmaccwebdev.org/WDV%20101%20Fall%2013/finalProject.docx

Vertical-Align PropertyUsed to position images and other elements with textMost common positionsTopMiddleBottomAll positions listed on Page 192img {vertical-align: middle;}Styling ListsLists can be styled with multiple propertiesList-style-typeList-style-positionList-style-image

ul{list-style-property: value;}List-Style-Type Property ULUsed to change the default circle of unordered listsFour values can be usedDisc A filled circle (Default)Circle A hollow circleSquare A filled squareNone No bullet is shownul {list-style-type: square;}List-Style-Type Property OLUsed to change the default number of ordered listsDecimal Leading 0 or notRoman NumeralUpper or LowercaseAlpha (A, B, C, etc)Upper or LowercaseNonePage 194 has the propertiesList-Style-ImageGives options for custom bulletsUses images

ul{list-style-image: url(imagename);}

List-Style-PositionUsed to change the position of the marker or bulletDefaults to outside. Text indents

Other options is inside. Text

LabGet the starter file Tutorial4_start.html from the Class Info/Labs/ folderView Source, Copy, and paste into a new file (Save as tutorial4.html)Format text around the image to be in the middle (vertical-align: middle;)Change the Unordered List bullets to a hallow circle (list-style-type: circle);Change the ordered list to Uppercase Roman Numerals (list-style-type: lower-roman;)

Grouping SelectorsSelectors can be grouped together in a comma separated list.This will apply the styling all of the selectors in the list.Example:h1, h2, h4{color: red;}The three elements above will be styled with the color red.Descendant SelectorsA selector nested within another selectorTreated as a combined element for formattingSpace separated selectors (commas would group)

p strong {background-color: lightblue;}The above would only modify the text within a paragraph tag that has a strong tag nested in itDescendant Selectors h3 {color: purple;}h3 em{color: orange;}Decedant Selectors

EM Decendant Selectors

The nav ElementUsed to contain a block of navigation links (navigation menu)No functional purpose, just identifies a block of navigation linksPrior to HTML5 this would be done with tags instead of nav tags. More on div tags later.

Home

About me

The nav ElementUsing Nav tag and CSS can easily style a consistent menu. Use Descendant Selector with nav and li for formatting the list. Use nav a to format the linksUsing display property with inline as the value will stack the list horizontal. The value of block will stack it up (this is default)The nav Elementnav{background-color: lightgreen;display: block;}

nav li{background-color: blue;display: inline;padding-right: 2em;}

nav a {color: white;font-weight: bold;}LabModify your file. Add a green background color and white text color for h1, h2, and h4 tags using the Group SelectorModify the h3 tag to have a text color of purpleCreate a Descendant Selector for h3 and em to have a color of orange.Create a Navigation section in the HTML around the top links (Already Done in starter file)Use CSS to style the Navigation. Nav background should be lightgreen, lists background as Blue, link color as white.The list in the nav should display inline. InheritanceIn CSS child elements inherit styles from parent elementsFor example if you have the following HTML:

If the nav tag has a CSS style of red for color, both ul and li will inherit that color. Inheritancenav {color: red; } /* CSS */

• 1
• 2
• 3

Notice the coloring of the list items are in red even though the CSS does not specify then li with color red. The red color is inherited from the style of it's parent (in the case the style of the nav element).

ClassIn CSS a class is defined with a period in front.class {property: value;}

In HTML use the class attribute

ClassIndependent Can be applied to any tagDependent Specific tag specified. Can only be used with the element.

Element.dependentclass{property: value;}

ClassDefining a classCan only contain Alpha or numeric charactersMust be one word (no spaces)Should describe the purpose of the classClass name can NOT start with a number

Class.center{text-align: center;}

li.attention {background-color: redfont-weight: bold;color: white;}

IDIn CSS a ID is defined with a # in front#id {property: value;}In HTML use the ID attribute i.e. content css #wrapper{color:pink;} Turns all text rapped in the div tags pink.Like the nav, aside and content in document.IDDefining an idCan only contain Alpha or numeric charactersMust be one word (no spaces)Should describe the purpose of the container id name can NOT start with a numberThe id selector is used to specify a style for a single, unique element. Nominally a div tag.Only used once per web pageIndependent Can be applied to any group of tagshttp://css-tricks.com/the-difference-between-id-and-class/

IDThe "hash value" in the URL has a vey important role. A URL like: http://yourdomain.com#comments The browser will attempt to locate the element with an ID of "comments" If found will automatically scroll the page to show that elementCSS --- Class vs Id attributesCLASS period.title{color: firebrick;font-size: 2.5em;}

ID hash or pound sign#title{color: firebrick;font-size: 2.5em;}

Span ElementHTML inline element used to mark inline content.title{color: firebrick;font-size: 2.5em;} Inheritance and Classes

Div Element stands for division.HTML block element used for defining a section of your document ( generic containers) . Can be formated with CSS.In HTML5 tags such as have diminished the need for the div tag.Class and Id attributes are used with the div tag

Pseudo-Class Selectorspseudo-class exists in CSS but not directly defined in HTMLFor hyperlinksa:link Style for links that have not been clickeda:visited Style after the link has been clickeda:hover Style when mouse is over the linka:active Style when most button is pressed on the linkIn CSS MUST be defined in that order! Do not put spaces between the colon Pseudo-Class Selectorsa:link, a:visisted {color: white;font-weight: bold;}a:hover{color: black;background-color: white;font-size: 1.3em;}a:active{color:orange;}MarginsMeasurement for corresponding edge of the documentMargin-topMargin-rightMargin-bottomMargin-leftLabAdd a dependent class for color blue and apply to the h3 with Age in it.Add an independent class called center with text-align set to center. Apply this to Title and HometownAdd a pseudo-class for hover to have a black color on a white backgroundSet the pseudo-class for active to color orange.Add a 2em margin on the right of the nav list item

Lab - ExtraCreate a dependent class for unordered listCreate your own bullet or take bullet.png from images on lab/images in class_infoApply your class with list image to the 1,2,3 list.

Look something like: