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

Comments in CSS

As with your HTML work, you should get in the habit of including comments in your CSS code.

These comments can be used to tell you what you are trying to do, leave yourself notes about what is happening and why, or be used to inform your instructors about what you were attempting.

In CSS, comments are placed inside of a ‘forward-slash’, ‘star’ set (/*...*/).

CSS

/* Everything between the forward-slash-star pair is a comment. */

/*
Comments in CSS are known as “block-comments”,
which means they can span multiple lines.

Notice how the comment delineators are placed on
lines above and below the text respectively.
*/

Leaving Notes:

This is the type syntax for comments in CSS regardless of whether your CSS is being written in a separate CSS document, as the above example implies, or within a style element in an HTML document.

HTML

<!DOCTYPE html>
<html>
    <head>
        <!-- This is an HTML Comment.  -->
        <!-- Including this style of comment in CSS would raise an error. -->

        /* This is a CSS comment. */
        /* Notice it does not color correctly. */

        <style>
            /* This is a comment in CSS. */
            /* This syntax is only valid inside CSS. */
            /* This type of comment would cause an error in HTML. */

            <!-- This is an HTML Comment. -->
            <!-- Notice it does not color correctly. -->
        </style>

    </head>
</html>