ALBERT WAVERING BOBBY SENG

Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements

HTML User Input Elements  Checkboxes   Radio buttons   Text fields   Buttons  Go  Can be grouped into a ‘form’

HTML User Input: Forms First name: Last name: Password: Male Female Bike Car Submit

More HTML stuff  Headings ,,,,,  Used by search engines, etc to index page (use properly)  Horizontal rule (line)  

More HTML stuff  Anchors   Already saw use as links  Anchor certain places on a page: Contents …. Go to Contents

HTML Tables  table tag table row table cell … …

HTML Colors  Hexadecimal notation  #red green blue  Each color is expressed as a combination of its red, green, and blue components  Each component has a value from (o to FF in hexadecimal)  Black = #000000, White = #FFFFFF  Pure red = #FF0000, Pure green = #00FF00, Pure blue = #0000FF

HTML Colors  RGB notation  rgb(red,green,blue)  Integer values of components   Red = rgb(255,0,0), Blue = rgb(0,255,0)  Text notation  Blue, red, green, etc

Introduction to CSS  Cascading Style Sheets  CSS provides a way to apply formatting to certain HTML elements  Class- or element-based  A CSS file can be included on any HTML page  CSS lets you make changes to an entire site by editing just one file

Linking CSS to HTML  I have a file named style.css  To use this style sheet in my webpage:  That’s it! Your CSS will be applied to the elements in your page

Writing CSS  Plaintext  CSS applies properties to elements  Color  Alignment  Font styling (bold, underline, strikethrough)  Font family (Arial, etc)  Image size and location  Many other attributes!

CSS Usage  Selector  Declarations p{ color: red; text-align: center; }

CSS Usage [element] and/or [.class] or [#id]{ property: value; } (without the [ or ] characters)

CSS Usage  Selector nesting #navigation a{ style… }

Backgrounds and CSS  Common CSS background properties:  background-color:#  background-image:url('flowers.jpg')  Many different properties; check resources online to learn specifics body{ background-color:# }

Formatting Text with CSS  Commonly used properties:  color: (red, #0000FF, rgb(1,2,3)  text-decoration: (none, overline, underline)  text-align: (center, right, justify)  Fonts  Generic family: similar-looking fonts (Serif, Sans- serif, Monospace)  Font family: (Verdana, Times New Roman, etc)  font-family: “Times New Roman”  font-style: (normal, italic, oblique)

Formatting Text with CSS  Font size  font-size: (12px, 20px, 36px)  NOT INTERNET EXPLORER (yay standards)  For Internet Explorer:  ‘em’ unit equal to default text size  font-size:2em would be equal to double the normal text size

Formatting Links with CSS  Properties  linkunvisisted link  visistedvisited link  hovermouse over link  activeselected link  Can use text decoration, colors to assign values to these properties

Assignment  Edit your previous week’s homework!  Include at least three new elements discussed today  Write a separate style sheet file and include it in your HTML file to style your page  Use at least three CSS selectors to style your page  by midnight next Wednesday to