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

2. 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 (

3. 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.

4. Homework Page
Example setup on

5. 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)

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

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

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

9. 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

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

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

12. 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;)

13. 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.

14. 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

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

16. 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>

17. 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)

18. 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;

19. 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.

20. 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.

21. 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).

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

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

24. 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

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

26. 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.

27. 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

28. ID The "hash value" in the URL has a vey important role.
A URL like:
The browser will attempt to locate the element with an ID of "comments"
If found will automatically scroll the page to show that element

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

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

31. 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

32. 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

33. 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;

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

35. 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

36. 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: