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 (

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 cwebdev.org/CIS2 04%20Summer% /Matt_Hall /homework/ cwebdev.org/CIS2 04%20Summer% /Matt_Hall /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) /CLASS_INFO/Class_Final.html /CLASS_INFO/Class_Final.html

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 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) Upper or Lowercase 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 1. Get the starter file Tutorial4.html from the Class Info/Labs/ folder 2. View Source, Copy, and paste into a new file (Save as tutorial4.html) 3. Format text around the image to be in the middle 4. Change the Unordered List bullets to a hallow circle 5. Change the ordered list to Uppercase Roman Numerals 6. Change the list position to inside for unordered lists

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; } Decedant Selectors EM Decendant S electors

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 a div tag. Home About me

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 1. Modify your file. Add a green background color and white text color for h1, h2, and h4 tags using the Group Selector 2. Modify the h3 tag to have a text color of purple 3. Create a Descendant Selector for h3 and em to have a color of orange. 4. Create a Navigation section in the HTML around the top links (Already Done in starter file) 5. Use CSS to style the Navigation. Nav background should be lightgreen, lists background as Blue, link color as white. 6. 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: … 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 */ 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

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 should NOT start with a number

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

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

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 1. Add a dependent class for color blue and apply to the h3 with Age in it. 2. Add an independent class called center with text- align set to center. Apply this to Title and Hometown 3. Add a pseudo-class for hover to have a black color on a white background 4. Set the pseudo-class for active to color orange. 5. Add a 2em margin on the right of the nav list item

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