The Anatomy of Style

Select and Declare Elements and Rules Property and Value The Anatomy of Style TODO

Style Guide

Where to Style The Style Attribute The Style Element The Style Document TODO

CSS Documents

Directory Placement The <link> Tag Relationship Type Href The <link> Element TODO

CSS Applied

Comments in CSS Understanding Styling Applying Style TODO

Selector Types

Universal Selectors Element Selectors Class Selectors ID Selectors TODO

Cascading

Cascading in CSS Rules Order Specificity Setting Importance TODO

Exploring Color

Specifying Color Color Names RGB Values Hex Codes Saturated Color Desaturated Color (Grayscale) Combining Colors TODO

Using Color

Background Color Text Color Opacity Basic Positioning Learn More TODO

Basic Positioning

Designing layout is an intensive process, and is where most of your time will be spent as a dev. There are many advanced properties that will help you when creating layouts (particularly those that need to be responsive), but for now, let’s consider creating a static layout using absolute positioning.

The position property (position: ), as you may expect, allows developers to specify where the position of elements will be within the browser window.

Absolute positioning (position: absolute) sets elements absolutely, removing them from the normal flow (remember our discussion on block-level elements?). For our purposes, we can use absolute positioning and math to crudely “draw” on the page without having to do much page building.

For example, I can create a “canvas” 100px by 100px wide, and color half using a rectangle half the size of the parent, and positioned halfway across its width:

HTML

<head>
  <style>
    .canvas {
      background-color: black;
      height: 100px;
      width: 100px;
      position: absolute;
    }
    .rectangle {
      background-color: red;
      height: 100px;
      width: 50px;
      position: absolute;
      left: 50px;
    }
  </style>
</head>

<body>
  <div class="canvas">
    <div class="rectangle"></div>
  </div>
</body>

Example

Geometric Style: The following example, I created a “canvas” 300px by 300px, with 3 main elements - the sun, rainbow, and clouds. Most of these elements were positioned absolutely to the bottom and left of the canvas’ edges and the neighboring element.

Realism-ish Style: Alternatively, I placed all of my colored blocks in an additional .curved class, with the border-radius property (border-radius: ) set to a high curvature. It may look more like a rainbow, but more calculation required with this method, sizing in terms of the left, top, and right pixel values.