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.
<style>
    @import "css/import-styles.css";
</style>
  • 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.
<header>
    <span>Hello World!</span>
</header>
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)
a:link
  • user action psuedo-classes
a:hover
a:active
a:focus

: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.