Today’s goals:
- Learn about CSS classes and how to apply them
- Learn about the “C” in “CSS”- Cascading
- Learn 2 new CSS properties- box-shadow and line-height
- Start Thanksgiving webpage project
Today’s featured website:
- https://archive.org/web/– This useful site lets you view old webpages and archive your own site
CSS Classes
- Go to http://apps.workflower.fi/vocabs/css/en and look at type, ID, and class selectors. What do you notice?
- What are the type selectors 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 webpage (example: p class=”light”).
- Let’s create a basic class and apply it. Let’s make one of the paragraphs look different by creating a class and applying it to one of them. Let’s make a class called .light and use the background color of lightgreen.
- What happens when we add another paragraph? Why?
- Why does the paragraph with the class of .light still have all of the other CSS styles such as a border, etc.? How could we change that? The answer here leads us into the next topic, how CSS “cascades”.
Cascading
- Cascading Style Sheets- how the browser assigns styles to content Styles “cascade” down a style sheet and control how things look unless we specify something different (like when we use classes).
- “Parents” and “Children”– what are they? Let’s identify them on our practice page.
- What matters to the cascade: Origin & Importance; Selector Specificity; Order of Appearance; Initial & Inherited Properties (default values)
- Let’s review this helpful site: https://blog.logrocket.com/how-css-works-understanding-the-cascade-d181cd89a4d8
Thanksgiving Webpage Project
You are going to make this:
You will take broken code and follow the directions in the comments. Copy and paste the following code into a new Notepad++ file. Save it as thanksgiving.html.