HTML + CSS II LET’S BUILD AN ACTUAL WEBSITE!

OVERVIEW This Session  Brief review of basics   “id” and “class”  Using a CSS template Upcoming Sessions  Feb. 11, 7-8pm: Wordpress **Next Wednesday!

A QUICK REVIEW Everything we will do tonight will assume a basic knowledge of HTML and CSS. Some key ideas include:  HTML tags  “nesting” tags  CSS selectors and properties  Proper CSS syntax: curly braces, colons, and semi-colons If there’s anything you’d like to review, please ask!

THE TAG In an HTML document, the tag is used to create sections. These individual divs can then be styled with CSS. For example: HTML: A title would go here! Some text! Some more text! CSS: body { background: blue; } div { background: red; } A title would go here! Some text! Some more text!

BUT WHAT IF YOU HAVE MORE THAN ONE ?

“ID” AND “CLASS” “ID” and “class” are both HTML attributes. For example: Class or ID can be added to any HTML element, but you cannot ever have both class and ID attached to the same instance of an element.

THE “ID” ATTRIBUTE Use the ID attribute when you want to style a single instance of an element. The same ID value can only appear once in an HTML document.

THE “CLASS” ATTRIBUTE Use the class attribute when you want to style a set of sections or elements the same way. The same class value CAN appear more than once in an HTML document.

TIME FOR SOME PRACTICE Go to the SkillfUL website: skillful.web.unc.edu Navigate to the HTML/CSS page. Download the class files folder to your desktop.

WRAPPING UP  Resources on the SkillfUL websiteSkillfUL website  UL Design Lab for assistance  Ask us at the desk  Set up a consultation Set up a consultation  Upcoming sessions  Wordpress, February 11 th at 7 p.m. **This is a Wednesday!  After that, the series is on break until March.  Feedback Form Feedback Form