Design Portfolio


Posts tagged CSS
CSS Basics: Data Types Part 2


  • HEX

The abbreviation (line 2) only works when there's 3 consecutive pairs of 2 like above which code for the same color.

  • rgb (red, green, blue)
rgb(255, 169, 73)

This is the color orange.

255 represents pure white (max). 0 represents pure black (min).

  • rgba
    • a is alpha which controls opacity.
rgba(255, 169, 73, .4)

.4 is equal to 40%.

CodingElla ChiangCSSComment
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.