WDV 101 Intro to Website Development

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 (http://jigsaw.w3.org/css-validator/)

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 http://www.dmaccwebdev.org/WDV%20101%20Fall%2013/MattHall/homework/

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) • http://www.dmaccwebdev.org/WDV%20101%20Fall%2013/finalProject.docx

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 • 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) • Upper or Lowercase • 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

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 IDattribute <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 • http://css-tricks.com/the-difference-between-id-and-class/

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

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

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: