CSS

Start Here

If you are looking for a quick and robust jump into CSS, check these resources:

General

Tools

Pre-processors

  • Less (Leaner CSS)- Influenced by SASS
  • SASS (Syntactically Awesome Style Sheets)
    • SCSS – Influenced by Less.

Units of Measurement

  • em – equal to the current font-size. If utilized with children, results in increasing font-sizes – probably not desired result.
  • rem – r stands for “root.” Whenever utilized it is measuring in proportion to the documents root font size, not its parent.
  • vh – 1/100th of height of viewport.
  • vw – 1/10th of width of viewport.
  • vmin / vmax
  • ex – x-height of current font or half of one em.
  • ch – stands for character.

  • Advanced Selectors
  • Advanced Display Values
  • Fonts:
    • font-size
    • font-family
      • serif (little bits on ends of letters), sans-serif (without bits), cursive
      • You can use a list of fonts which will be used in order depending on what fonts are available on the system, e.g. Verdana, Tahoma, serif
  • color
  • background-color
  • text-align: left, center, or right
  • Comments: /* */
  • Border – e.g., 1px dashed blue
  • border-radius – Modifies corners of objects.
  • text-decoration: none
  • margin: auto
  • You can choose a selector that involves nested elements, for example: div div p { property:value; }
  • * selects every element on the page.
  • Elements in HTML can be parents, children, or siblings. If an element is nested within other elements it is the child of each of the enclosing elements, not just one of them.
  • To get only direct children when applying a rule use > like so: div > p. This means that code like this will be affected: <div><p></p></div> but code like this will not: <div><ul><li><p></p></li></ul></div>
  • Selectors apply from least to more specific; so for example, if you have an element nested like so <div><table><tr><td></td></tr></table> the rule div table tr td { property:value } will take precedence over div table.
  • Classes and IDs are selectors considered more specific than nested selectors.
  • Use a class to apply a rule to multiple elements that all should be styled the same.
    • ex: <p class=”myclass”></p>
    • ex: .myclass { property:value; }
  • Use IDs for when only one element should be styled a specific way.
    • ex: <p id=”myid”></p>
    • ex: #myid { property:value; }
  • pseudo-class selector – For selecting items that aren’t part of the HTML tree.
    • e.g., status of a link (clicked, unclicked).
    • ex: selector:pseudo-class_selector { property:value; }
    • ex: a:hover { property:value; }
    • a:link (unvisited); a:visited (visited); a:hover (mouse hovering over).
  • first-child – A pseudo-class selector that applies only to the elements that are first children of their parents.
    • ex: <div><p>First child</p><p>Not</p></div>
    • ex: p:first-child { property:value; }
  • nth-child(x) – A pseudo-class that allows you to select any element after the first child.
    • ex: p:nth-child(2) { property-value; }
  • z-index – Determines the position of elements in the third dimension (not x/y, second dimension).
    • Only works with positioned elements (relative, absolute, fixed).
    • Stacking Level – The higher the number the closer to the front (screen).
    • Stacking Context – If defined, an element’s stacking level is not in relation to every other element on the page, but only those within its stacking context. If undefined it is in relation to document root element. See Stacking Context.

Basic CSS

You’ll also want to know these by heart.

  • CSS are rules about how styling is applied to HTML elements.
  • h1 { property: value; }
    • h1 is the selector (what HTML element)
  • One can select classes, use .
    • .header { property: value; }
  • To be more specific combine classes and element names.
    • .header p { property: value }
    • You can also access classes similarly:
      • .header .my-class p { property: value }
  • Layout
    • HTML elements are treated like boxes by CSS.
      • If element is block it is on a new line.
      • If element displays on same line it is inline.
      • display: block;
    • position: relative (or fixed);
    • top, bottom, left, right: 9x;
    • float: left (or right);
      • Moves element to far left/right of page.

Basic CSS Properties

  • color – sets color of text.
    • Use named colors, RGB (0 to 255), or hex (00 to ff) – from dullest to brightest.
    • color: rgb(102,153,0)
    • color: #9933CC
  • clear: both;
  • font-family – sets font of text.
    • Commonly used: Arial, Helvetica, sans-serif; “Times New Roman”, Times, serif; “Courier New”, Courier, monospace
    • font-family: ‘Open Sans’, sans-serif
  • font-size – sets size of text.
  • height – sets height of element.
  • Space Around Element:
    • Imagine a box around element.
    • background-color
    • background-image
    • border – Set width, style, and color of element border
      • border: 3px solid #cc0000
      • border: width style color
      • border-bottom: 1px solid #dbdbdb (also -right, -left, -top)
    • padding – Between content and border of an element.
      • Can be set on specific sides using padding-top, padding-bottom, padding-left, padding-right
    • margin – Increases outside border of element.
      • Specific sides same as padding.
      • Setting margin-left or margin-right to auto results in it using as much as possible.
        • Move Element to Far Left: margin-right: auto
        • Move Element to Far Right: margin-left: auto
        • Center Element: margin-right and margin-left to auto

Other CSS

You may be surprised at some of the rules I have included here. I have not chosen which rules to place here based solely on complexity but also on frequency of use…

Other CSS Properties

  • text-transform: uppercase;

CSS Framework

  • Bootstrap – provides prewritten CSS rules for grid layouts, navigation, showcases, etc.
    • Has a grid of 12 equal columns.
    • To span a specific number of columns: <div class=”col-md-6″>Spans six columns</div>
    • Use the row class to put columns in a horizontal group: <div class=”row”></row>
    • To make list items into tabs:
      • <ul class=”nav nav-tabs”></ul>
        • Set active tab by associating class=”active”
    • To make list items into pills:
      • Use nav-pills
    • Showcase – Large area featuring important content, aka jumbotron.
      • <div class=”jumbotron”></div>
    • .pull-left: left align element
    • .pull-right: right align element
    • .thumbnail: display a grid of images.
      • Each image needs its own class of thumbnail.

Bibliography / Further Reading

%d bloggers like this: