Selectors IN CSS

1. Selectors IN CSS Web Page Design – CSS Lesson 2

2. Lesson objectives • Learn a wider range of CSS selectors • Understand the idea of cascading • The universal selector (*) • Class and ID selectors • Pseudo selectors

3. Universal Selector • * selector is commonly known as the universal selector • selects and styles ALL elements *{ font-family: Calibri; }

4. Parent, Children, siblings • Think of it all like a tree… • Stump, branches, and sub branches • Parent = HTML • Children = Head & Body; these children have children • Siblings = Head & Body (brother & sister)

5. Nested & Styled • div > p (directly focuses on p within the div tag) • In CSS, it would look like this: div > p{ font-family: Cursive; }

6. CLASses & IDs • Classes – used when you have a bunch of elements that should receive same styling. • HTML example: <span class=“ulmer”>content here</span> • CSS example: .ulmer{ height: 100 px; }

7. Classes & IDs • IDs – used when you have exactly one element that should receive a certain kind of styling. • HTML example: <div id=“first”>content here </div> • CSS example: #first{ color: #FF0000; }

8. Pseudo-class selectors • A way of accessing HTML items that are not a part of the document tree • One of its main uses is to control the appearance of unvisited and visited links on a Webpage. • Have you ever hovered your mouse over a link and it changed color/style?

9. 3 types of pseudo-class selectors 1) a:link – an unvisited link 2) a:visited– a visited link 3) a:hover– a link you have your mouse over • CSS example: a: hover{ text-decoration: none; }