CSS Basics: Selectors and Psuedo-Classes

  • Each linked stylesheet is a web request to the server, try to keep it at no more than 3 stylesheets. One or two is best.
    @import "css/import-styles.css";
  • Importing to css directly allows us to use multiple stylesheets and only link one CSS to the HTML.
* {
  margin: 0;

* is the universal selector, it selects all the elements on the page

  • Write type selectors in the same order as they appear in the HTML. This keeps things nice and neat.

  • There can only be one ID per page and an element can have only one ID.
    <span>Hello World!</span>
header span {
  color: blue;
  • A descendant selector is separated by a space. In the example above, <span> elements inside the <header> element will be colored blue.
  • A psuedo-class targets elements dynamically, based on user interaction and the element's state.
    • link history (style links)
  • user action psuedo-classes

:active get applied when an element is being activated by the user. Ex: the user moves the mouse to click a link or a button.

:focus is only applied to interactive elements link links, buttons, and form elements. Using the tab key will select these items and the user will be able to see the :focus styles applied to them.