WDV 101 Intro to Website Development Tutorial #4 Formatting Text and Links

Tutorial #3 Review - CSS CSS format Selector { property1: value1; /* Comments */ } Embedded, In-Line, and External CSS Styles - color, background-color, font-family, font-size, text-transform, letter-spacing, word-spacing, text-indent, line-height, text-align, font-style, font-weight CSS Validation (http://jigsaw.w3.org/css-validator/)

Homework Page Create an index.html page for your homework Upload to your server account Have an H1 tag at the top with “Homework of your name” Each Tutorial section should be separated with an H2 Each homework should be linked in an unordered list Eventually you will have a main page that links to homework, final, etc.

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

Final Project The 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 Property Used to position images and other elements with text Most common positions Top Middle Bottom All positions listed on Page 192 img { vertical-align: middle; }

Styling Lists Lists can be styled with multiple properties ul{ List-style-type List-style-position List-style-image ul{ list-style-property: value; }

List-Style-Type Property UL Used to change the default circle of unordered lists Four values can be used Disc – A filled circle (Default) Circle – A hollow circle Square – A filled square None – No bullet is shown ul { list-style-type: square; }

List-Style-Type Property OL Used to change the default number of ordered lists Decimal Leading 0 or not Roman Numeral Upper or Lowercase Alpha (A, B, C, etc) None Page 194 has the properties

List-Style-Image Gives options for custom bullets Uses images ul{ list-style-image: url(imagename); }

List-Style-Position Used to change the position of the marker or bullet Defaults to outside. Text indents Other options is inside. Text

Lab Get the starter file Tutorial4_start.html from the Class Info/Labs/ folder View 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 Selectors Selectors 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 Selectors A selector nested within another selector Treated as a combined element for formatting Space 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 it

Descendant Selectors h3 { color: purple; } h3 em{ color: orange; <h3>Decedant Selectors </h3> <h3> <em>EM Decendant S</em>electors </h3>

The nav Element Used to contain a block of navigation links (navigation menu) No functional purpose, just identifies a block of navigation links Prior to HTML5 this would be done with <div></div> tags instead of nav tags. More on div tags later. <nav> <ul> <li>Home</li> <li>About me</li> </ul> </nav>

The nav Element Using 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 links Using 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 Element nav{ background-color: lightgreen; display: block; } nav li{ background-color: blue; display: inline; padding-right: 2em; nav a { color: white; font-weight: bold;

Lab Modify your file. Add a green background color and white text color for h1, h2, and h4 tags using the Group Selector Modify the h3 tag to have a text color of purple Create 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.

Inheritance In CSS child elements inherit styles from parent elements For example if you have the following HTML: <nav> <ul> <li> … If the nav tag has a CSS style of red for color, both ul and li will inherit that color.

Inheritance nav { color: red; } /*  CSS */ <nav> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </nav> 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).

Class In CSS a class is defined with a period in front .class { property: value; } In HTML use the class attribute <element class=“classname”>

Class Independent – Can be applied to any tag Dependent – Specific tag specified. Can only be used with the element. Element.dependentclass{ property: value; }

Class Defining a class Can only contain Alpha or numeric characters Must be one word (no spaces) Should describe the purpose of the class Class name can NOT start with a number

Class .center{ text-align: center; } li.attention { background-color: red font-weight: bold; color: white;

ID In CSS a ID is defined with a # in front #id { property: value; } In HTML use the ID attribute <element id=“idname”> i.e. <div id=“wrapper”> content </div> css #wrapper{color:pink;} Turns all text rapped in the div tags pink. Like the nav, aside and content in document.

ID Defining an id Can only contain Alpha or numeric characters Must be one word (no spaces) Should describe the purpose of the container id name can NOT start with a number The id selector is used to specify a style for a single, unique element. Nominally a div tag. Only used once per web page Independent – Can be applied to any group of tags http://css-tricks.com/the-difference-between-id-and-class/

ID The "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 element

CSS --- Class vs Id attributes CLASS  period .title{ color: firebrick; font-size: 2.5em; } ID  hash or pound sign #title{

Span Element HTML inline element used to mark inline content .title{ color: firebrick; font-size: 2.5em; } <span class="title"> Inheritance and Classes </span>

Div Element <div> </div> 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 <header> <nav> <section> <main> <aside> <footer> have diminished the need for the div tag. Class and Id attributes are used with the div tag

Pseudo-Class Selectors pseudo-class exists in CSS but not directly defined in HTML For hyperlinks a:link – Style for links that have not been clicked a:visited – Style after the link has been clicked a:hover – Style when mouse is over the link a:active – Style when most button is pressed on the link In CSS MUST be defined in that order! Do not put spaces between the colon

Pseudo-Class Selectors a:link, a:visisted { color: white; font-weight: bold; } a:hover{ color: black; background-color: white; font-size: 1.3em; a:active{ color:orange;

Margins Measurement for corresponding edge of the document Margin-top Margin-right Margin-bottom Margin-left

Lab Add 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 Hometown Add a pseudo-class for hover to have a black color on a white background Set the pseudo-class for active to color orange. Add a 2em margin on the right of the nav list item

Lab - Extra Create a dependent class for unordered list Create your own bullet or take bullet.png from images on lab/images in class_info Apply your class with list image to the 1,2,3 list. Look something like: