Today’s goals:

• Review: CSS box model, setting up a page wrapper, and the opacity property
• Continue learning: box-sizing: border-box; and how browsers compute the width of content
• Learn difference between IDs and classes in CSS, how to apply them, and how CSS “cascades”

 Today’s featured website:

• http://ismycomputeronfire.com/ and http://ismycomputeron.com/– Very important questions

 Review: CSS Box Model, Page Wrapper, and Opacity Property

• Question: What is the CSS box model? What can we do with it? What are the box model properties?
• The opacity property controls the opacity level (whether something is fully visible or transparent) of an element. Last week we changed the opacity of an image. Opacity can range from 0 (totally transparent) to 1 (fully visible) with decimal values in between (such as 0.5).
• Open Notepad++ and set up a basic webpage with opening and closing html, head, title, style, and body tags. Let’s add a headline and give it some styles- color, font-size, and opacity. How can we change the opacity while hovering over the headline? Check your code from last week on how to create a pseudo-class.
• Let’s set up a page wrapper that will contain all of the content on our webpage. We can look at the code from our webpage last week for help. The page wrapper should have margins, a border, padding, a width of 1200px, a height of 100%, and a background-color.

 Box-sizing

• Go to http://guyroutledge.github.io/box-model/ and select border-box under box-sizing to see the difference in how the browser computes the width of content.
• Content’s true width: Browsers add margins, borders, and padding to the width of content on a webpage. For example, content that is 100 x 100 pixels that has 5px margins, 2px border, and 3px padding is actually 100 + 5 + 2 + 3 + 3 + 2 + 5 = 120 width and 120 height. A special CSS property and value, box-sizing: border-box; has the browser include the padding and the border in the content’s width and height. Let’s check out some examples here.
• Launch your webpage in Google Chrome. Right click on the headline and choose Inspect. In the small box on the right, chose Computed, and now you’re looking at a box model of the headline. Roll your mouse over the margins, border, and padding to see how the browser is computing the actual width of our headline. Do the same for the other content on the page.

 CSS Classes

• Go to http://apps.workflower.fi/vocabs/css/en and look at type, ID, and class selectors. What do you notice?
• What’s a type selector on the webpage we just created? What’s the ID selector?
• Classes are used in CSS to style multiple elements at once and contain several properties (such as text that’s bold, 16px and red). Classes are preceded by a period on a style sheet. Classes can be called anything you want but it’s a good idea to keep it short and simple (such as .dark if you’re creating a class to make content darker than the rest of the page).
• ID (uniquely applied, usually used just once on a page)- preceded by # on style sheet. Generally used to identify specific sections of a webpage (ex. #wrapper, #menu, #header, #sidebar)
• Elements (a.k.a. type selectors- the various HTML elements, such as paragraphs, links, etc., that are defined by the style sheet)- not preceded by anything on a style sheet (p, h1, a, img).
• In the body section of your webpage, you can use div tags that correspond to the class and ID selectors in your style sheet. For example, div id=”wrapper” or div class=”dark”. You can also apply classes to any content on your webpag (example: p class=”light”).
• Let’s create a basic class and apply it. Let’s underline our headline by creating a class. What happens when we add another headline? Why?
• Cascading Style Sheets- how styles “cascade” down Styles “cascade” down a style sheet and control how things look unless we specify something different (like when we use classes). Let’s add 3 paragraphs to our HTML. Just type your name or the word paragraph inside the paragraph tags and make sure to number them. Let’s add some styles for p (type selector) in our CSS- font-size: 20px; color: darkblue;. Let’s create 2 new classes to style our paragraphs. The .small class will make the paragraph 16px and the .light class will change the text color to blue. How do we apply the classes to our second and third paragraphs?
• Questions: Why is the second paragraph the same color as the first? Why is the third paragraph the same size as the first?