CSS Fundamentals

Topic Overview

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

Href

href="#" / >

Provide the relative or absolute URL as the value to the href="" attribute. This tells the browser where the document is located at.

The process of linking CSS documents is the same as you’ve been doing for other site files, such as images and videos.

External Style Sheets

Many sites link out to external CSS documents as well, and will be linked via an absolute URL.

HTML

<head>
  <title>Tuna the Cat</title>
  <link rel="stylesheet" type="text/css" href="https://codepen.io/rachelnabors/pen/bpAJH.css">
</head>

Internal Style Sheets

Internal files, like your own created CSS document, should be linked via relative URL.

HTML

<head>
  <title>Tuna the Cat</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

NOTE: When linking the same stylesheet in your child pages, you would need to add an additional ‘dot’ to your file path (../) to move up a directory.