Introducing CSS

Notes Home

CSS stands for Cascading Style Sheets. It was first proposed in 1994 to define visual styles for HTML pages on the World Wide Web but took time to gain acceptance, though eventually becoming standard.

"Cascading" refers to the way the style are implemented, with external, internal and inline style rules being applied to pages in order.

CSS uses selectors to target elements and add visual styles. Any HTML element, such as body or p can be used as a CSS selector, although the default styles and behaviors of HTML elements vary. Every selector has one or multiple values that define a corresponding property.

CSS defines rules for the colors, fonts, dimensions and positions of elements on a web page.

There are three ways to include CSS styles in an HTML document.

External stylesheets are linked into the HTML page by a tag. These styles can be applied to multiple HTML pages:

<link rel="stylesheet" href="style.css" type="text/css" />

Internal stylesheets can be added anywhere inside of an HTML document, using the style tag, but are typically found in the <head> section. These styles will only apply to elements on a single page, but will apply to all elements of that page.

<style>
	a { color: pink; }
	a:hover { color: blue; }
</style>

Inline styles are added inside of an HTML element as an attribute and will apply to that element only.

<div style="background:blue;padding:5px;"></div>

Comments

In code, comments are sections of the program that are not read by the compiler. Different languages use different conventions to separate comments within the language of the program. These are used by developers to note what the code is doing for other developers or for future reference.

It's extremely important to comment your code with useful comments.

In HTML, a comment can be written using this syntax:

<!--  COMMENT TEXT GOES HERE -->

In CSS, comments use this syntax:

/* COMMENT IS HERE */

Resources

MDN Getting Started With CSS

Tutorials

Code Academy

Don't Fear the Internet