CSS Basics

CSS (cascading style sheets)

CSS is used to apply formatting to HTML documents. HTML is intended only to identify categories, or kinds, of information, not the formatting that gets applied to that information. CSS applies the formatting to HTML elements (that is, to text, page layout, borders, and so forth).


What is a CSS selector?

The three types of basic selectors

The three basic types of selectors are:

  1. tag (also called element) selector
    • This style gets applied whenever the specified tag is used.
  2. class selector
    • This style gets applied whenever the attribute class="style-name" is used.
      • Example: <p class="celebrity">
    • When being defined in code, the class name is preceded by a dot ( . )
      • For example (note that this rule has two declarations and is written using typical indentations):
        .celebrity {
              color:red;
              font-size:1.1em;
        }
    • 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-family for an image will not do anything.
    • pseudo classes are a special type of class that gets applied when the user takes, or has taken, a specific action, such as hovering over an element. The most common pseudo class is the following which will apply the style when the user hovers over a link: a:hover
  3. id
    • No, this has nothing to do with Sigmund Freud and his theory about id and ego!
    • In this context, id is an abbreviation for identify.
    • This type of style gets applied whenever the attribute id="style-name" is used.
      • Example: <div id="container">
    • When being defined in code, the id name is preceded by a hashtag ( # )
      • Example:
        #container {
              margin:10px;
              padding:5px;
        }
    • The id attribute is also used extensively by JavaScript to uniquely identify an element on a page. Therefore, each id used on a page must have use a unique value on that page (but that id value can be reused on other pages, but, again, only once within any other page).
    • For example, you are not permitted to have two id="container" attributes in one html file, but you can have that id and value in any other html file, but only once per html file.
      • Note that you actually can code the same id value more than once in one html file, but it is not acceptable coding practice and will cause problems in many circumstances.

The three types of compound selectors

Most of the time CSS selectors are a combination of multiple basic selector types.

  1. Dependent selectors
    • This type of compound selector requires that a specific class (or id) attribute and value be within an element.
      • Example of the CSS code for a dependent selector, in this example a class is used:
        • h3.celebrity {color:#333333;}
      • Example of how it would be applied in the HTML code:
        • <h3 class="celebrity">text</h3>
    • The above means that whenever there is an h3 tag that has the attribute class="celebrity" then the style will be applied.
    • This concept also works with id selectors
      • Example:
        • h3#bonus
      • Could be applied thus:
        • <h3 id="bonus">
  2. Descendant selectors
    • This type of style is applied if one element is nested inside another element, 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 nested inside a div element, then the style will be applied.
      • For example, the above would be applied to the ul clement in this html code:
      • <div><aside><ul>content</ul></aside></div>
  3. Group selectors
    • This type of style will be applied when any of the selectors listed are used.
    • The selectors in a group selector can include single and group selectors.
    • Grouping saves code. If you want to apply the same formatting to multiple selectors, you can group them into one rule for ease and control and to minimize the amount of code.
    • Example:
      • h1, h2, div#spec, .school {color:#333333;}
      • The above means that color:#333333; will be applied to:
        • h1 and h2 elements
        • A div tag with the attribute id="spec"
        • Whenever 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 CSS 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


box-sizing

The box-sizing property is used to control how the width and/or height of an element is calculated.

There are two possible properties:

Following are explanations of how overall width is calculated when using the two different property values:

box-sizing: content box; (this is the default)

			  5px (left border)
		 	 20px (left padding
			200px (specified element width)
		 	 20px (right padding)
 		       	  5px (right border)
			250px total width

box-sizing: border-box;


The three units of measurement typically used in CSS

There are other units of measurement that CSS provides, but many use physical measurements (inches, cm, mm) that are not relevant to the web and mainly apply to printed output, but not to web pages (where physical size cannot be guaranteed).

Note that there are other units of measurement that are being used now that are more complex in nature such as rem, vw, vh, and others.


The three specificity values of basic selector types

Sometimes there is more than one CSS property value specified for an element. For example, if you have one CSS rule that says text ought to be blue and another that specifies red, which one takes precedence? Part of the cascade rules used to calculate which formatting takes precedence is the specificity of the selector used to apply the formatting.

The highest specificity means the highest precedence in applying a format, although there are several other factors to take into account when determining the formatting precedence in addition to specificity. Specificity is an important factor for determining precedence.

To determine the specificity of a selector, the values of its component selectors are used. These are the values for each type of basic selector:

Examples:

Note that pseudo-element and pseudo-class selector specificities are calculated by adding their components. For example the pseudo class :hover plus the anchor element together a:hover has a specificity of 11.

Three places you can store CSS

  1. In an external style sheet (plain text) file that uses the .css file extension. It is linked to within the <head> element of the html file.
    • Example (note that the link element has no closing tag):
      <link href="path/file-name.css" rel="stylesheet" type="text/css">
  2. In the head of a document, putting the code inside <style> tags.
    • Example with two declarations:
      <style rel="stylesheet" type="text/css">
            span.celebrity {font-size:1.1em; color:#9bc439;}
            #container {width:1100px: margin:0 auto;}

      </style>

  3. A style can also be stored inside an opening tag using html's style attribute. This is often referred to as an inline style. This method ought to be avoided in favor of using an external .css file which allows for applying the style elsewhere and modifying it in one central location.
    • Example using two properties:
      <h2 style="color:#F35c68; font-weight:normal;">Content goes here</h2>

12/20/17 last full update