Selector Basics

Applying CSS Rules Using HTML Elements and Attributes

H02a- (:38 sec)
- CSS uses what area called selectors to designate where rules will be applied.
- What is a selector?
  - A selector is the means by which an html element is identified in order for a rule to be applied to it.
- HTML tags and certain attributes are used for the identification..
  - It can be done three different ways:
    - A rule can be applied to all uses of a specific element.
    - Or, it can be applied using either of these two html attributes:
      - class=
      - id=
- This is why you need to know html before learning css!

H02b - (3:24)
- tag or element
  - An html tag is given additional properties in addition to the ones it would have normally.
  - Anytime the tag is used anywhere on the page, those properties will be applied.
  - When defined, just the name of the tag is used:
    tagname
  - The tag's rule will be applied wherever that tag is used.
H02c - (4:59)

.class
- A class is used to identify an element as being part of a group.
- A class's rule can be applied wherever it will work.
- It can be used with as many tags as you like.
- When a class is defined, a dot is placed in front of its name:
  .nameofclass
- To apply it, the class attribute is added to a tag. Note that the dot is not used:
  <p class=nameofclass> Content </p>

#id
- An id is used to identify a single element on a page.
- It's value must be unique on a page.
  - Nothing will stop you from doing this, but it is incorrect and will cause problems, so don't do it.
  - Not allowed:
    - <h1 id="main">
    - <em id="main">
- An id is usually used to identify a section of a page.
  - such as:
    id=maincontent
    id=sidebar
    id=top
- When an id rule is defined, a number sign is placed in front of the name:
  #nameofid
- To apply it, use the html id attribute. Note that the # symbol is not used:
  <div id=wrapper>Section content </div>
- Because it is unique on a page, it has a high level of specificity.
- ID's are also used by JavaScript.

H02e - (1:42)
- Other types of selectors include the following, which are covered in later sections:
  - Pseudo classes
  - Compound selectors
  - ...and a few more.
- Regarding class and id names:
  - Do not name an id or class using an tag name.
  - Do not use special characters ( % & # ) in id and class names.
  - You can use hyphens ( - ) and underscores ( _ ) but not at the start of a name.
  - For the sake of simplicity and to minimize risk, only use lower case letters.
- Note that any existing properties of a tag, such as h1 making text large and bold, will remain unless overridden by css.
  - Elements such as headers are displayed large because of the browser's internal style sheet.
  - Obviously, some properties will not be applicable to some tags.
    - For example, if you specify a font for an image tag, it will have no affect.

H02f - (1:46)
1. Create an html5 file.
2. Name it yourlastname_H02.html
3. Add style tags in the head section of the file.
4. Create a rule for each of the three main types of selectors.
5. Use this declaration block with each selector
  {color:red;}
6. Put a couple of paragraphs of Lorem ipsum text on the page.
7. Apply each rule to three different parts of the page with no overlaps.
  - You ought to end up with three discrete areas of red text, each applied to the text using a different selector type.
  - Apply the element selector just once on the page. You can use h1, em, or any other tag, but please just use that tag once to prevent any chance of overlap.