CSS Basics

The three types of basic selectors

Selectors are the used to indicate where styles are to get applied. The three basic types of selectors are:

  1. tag (also called element) selector
    • This style gets applied whenever the tag is used.
  2. class selector
    • This style gets applied whenever the attribute class="style-name" is used.
      • Example: class="celebrity"
    • When being defined in code, the class name is preceded by a dot, as in: .classname
    • Classes may be applied to an unlimited amount of tags on a page, but the styles will have no effect if they are not relevant to the element they are applied to. For example, specifying a font type to an image will not do anything.
    • pseudo classes get applied when the viewer takes an action, such as rollover. The most common pseudo class is the following which will apply the style when the user hovers over the link: a:hover
  3. id
    • This type of style gets applied whenever the attribute id='style-name" is used.
      • Example: id="maincontent"
    • When being defined in code, the id name is preceded by a number sign, as in: #idname
    • Each id used on a page must have use a unique name on that page.

The three types of selector groupings used by rules

  1. Descendant selectors
    1. The style is applied if one element is inside another, even if there are other elements in between. Example of the code:
    • div ul {color:#333333;}
    • The above means that if there is a ul element inside a div element, then the style will be applied.
  2. Dependent selectors
    • The style will be applied if a class or id attribute is inside the element. Example:
    • h3.celebrity {color:#333333;}
    • The above means that whenever there is an h3 tag that has the attribute class="celebrity" then the style will be applied.
    • This will also work with id selectors, for example: h3#smith
  3. Grouping selectors
    • The style will be applied when any of the selectors are used.
    • Grouping saves adding code. If you want to apply the same style to multiple different selectors, you can group them.
    • h1, h2, div#specialcontent, .school {color:#333333;}
    • The above means that the style will be applied to:
      • all h1 and h2 tags
      • a div tag with the attribute id=specialcontent
      • when a tag has the attribute class="school"

The four parts of the box model, from the inside to the outside

Diagram of the box model

  1. content (inner most component)
  2. padding
  3. border
  4. margin (exterior component)

The four possible value specifications for padding, border, and margin

The following use padding as the example property. The syntax also applies to the border and margin properties:

1 value
padding: 15px
The above results in this padding:
all sides 15px
2 values
padding: 15px 10px
The above results in this padding:
top & bottom 15px
left & right 10px
3 values
padding: 15px 10px 20px
The above results in this padding:
top 15px
left & right 10px
bottom 20px
4 values
padding: 15px 10px 15px 20px
The above results in this padding:
top 15px
right 10px
bottom 15px
left 20px

 

The three units of measurement available for web pages

There are other units of measurement that CSS uses, but they apply to print, not to web pages (where physical size cannot be guaranteed).

The three specificity values of basic selector types

The higher the total number, the more the specificity. The highest specificity means the highest precedence; whenever there are more than one specification of the same property to the same element. specificity determines what gets applied. Here are the values

Examples:

Three places you can store CSS

  1. In an external style sheet file which is a text file that uses the .css file extension. It is linked to from within the <head> element. Syntax (there is no closing tag):
    <link href="path/file-name.css" rel="stylesheet" type="text/css">
  2. In the head of a document inside <style> tags as follows:
    <style type="text/css">
    selector {property:value;property:value;}
    selector {property:value;property:value;}
    /* and so on */
    </style>

  3. Inside a tag using html's style attribute. (this method ought to be avoided). Syntax using two example "properties":
    <anytag style="property:value;property:value;">content of the anytag element</anytag>