1. Intro to CSS
Mr. Singh

2. CSS What does it stand for? Cascading Style Sheets
We embed CSS inside of HTML but it isn’t actually HTML
What is the first thing we do when dealing with CSS?
Add a Style tag
Where?
Contained in the head tag below title

3. CSS When coding in CSS we need to use Style Rules
Style Rules use selectors. What are selectors?
Selector tells the browser what part of the webpage to style (Ex. h2)
Declaration – what is this?
Tells the browser how to style their part
Declaration goes inside { }

4. CSS cont’d Declarations have properties and values h2 { color: green;}
Color is the property, and green is the value
What if I wanted to use a more specific colour?

5. CSS Cont’d We use the RGB spectrum h2 { color: rgb (0,232,15); }
Each of those numbers represents a colour that is merged together to form your new colour

6. CSS Cont’d
What CSS style rule changes the background of your webpage? (Hint: What selector do you use)
body {
background-color: rgb (97, 250,255); }
Question: If you style an h2 header, does all h2 headers change as well?
Answer: Yes

7. Recap We select HTML elements to style such as h1, body, etc.
We use selectors to tell our CSS rule which HTML elements to style
Element Selector selects HTML elements based on their tag name.
You don’t need to add brackets when selecting elements

8. Selecting ID’s What is an ID? Why do we use it?
When styling an h2 element, all h2’s are affected. We use an ID when we only want to change one tag
We give a tag on our page a unique ID
<p id =“singh-baller”> Mr. Singh is a baller </p>
ID’s should be unique. How do you let the browser know you’re using an ID?
ID’s start with a #

9. ID’s <style> #singh-baller { background-color: red; }
This code is case sensitive so make sure you have all your code in lowercase

10. Class
Now what if I have multiple paragraphs <p> Mr. Singh is a baller </p> <p> He can shoot </p> <p> He can pass </p> If we want to have a different color for each paragraph, we’ve just learnt you could give each one their own ID’s That’s a lot of work!

11. Class Cont’d
A class is a way to assign a particular element to a group and you can assign as many elements as you want to a group
To add a class, we need to add a class attribute
<p class =“singh-baller” >Mr. Singh is a baller </p>
<p class = “singh-baller”> He can shoot </p>
<p class = “singh-baller”> He can pass </p>

12. Class Cont’d
<style> .singh-baller { background-color: blue; } </style> Can a class name have a space? Ex: singh baller Answer: No, spaces mean something else