CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a language that web developers use to style the HTML content on a web page. It is used to modify colors, font types, font sizes, shadows, images, element positioning, and more.

This section covers:


Overview

Below is an example of some HTML code before and after a style sheet has been applied.

Website with no CSS: Website with CSS applied:
before after

Separate Style Files

Although the HTML <style> element allows you to write CSS code within HTML files, this mixture of HTML and CSS can result in code that is difficult to read and maintain. (Not recommended.)

It is common for developers to add substantial amounts of custom CSS styling to a web page. When all of that CSS code is placed within a <style> element in an HTML file, you risk the following two things:

  1. Creating a large HTML file that is difficult to read and maintain (by you and other developers). Overall, this can result in an inefficient workflow.
  2. Maintaining a clear distinction between web page structure (HTML) and web page styling (CSS).

An external style sheet has many advantages. Keeping the styles separate from your HTML content:

  • Helps avoid duplication
  • Makes maintenance easier
  • Allows you to make a site-wide change in one place

It is best practice to create a separate CSS file to hold your CSS style code to which your HTML code can refer.

Cascading and Inheritance

The final style for an element can be specified in many different places, which can interact in a complex way. This complex interaction makes CSS powerful, but it can also make it confusing and difficult to debug.

Three main sources of style information form a cascade. They are:

  • The browser's default styles for the markup language.
  • Styles specified by a user who is reading the document.
  • The styles linked to the document by its author. These can be specified in three places:
    • In an external file - Most common.
    • In a definition at the beginning of the document - Use this method only for styles that are used only on that page.
    • On a specific element in the body of the document - This is the least maintainable method, but can be used for testing.

For styles in the cascade, author stylesheets have priority, then reader stylesheets, then the browser's defaults. For inherited styles, a child node's own style has priority over style inherited from its parent.

Linking the HTML and CSS files

In order to apply the styling to the web page, link the HTML file and the CSS file together by using the <link> element. The <link> element must be placed within the head of the HTML file. It is a self-closing tag and requires the following three attributes:

  1. href - like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
  2. type - this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
  3. rel - this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.

When linking an HTML file and a CSS file together, the <link> element will look like the following:

<link href="https://www.codecademy.com/stylesheets/style.css" type="text/css" rel="stylesheet">

If the CSS file is stored in the same directory as the HTML file, then a relative path can be specified instead of a URL, like so:

<link href="/style.css" type="text/css" rel="stylesheet">
. .
Back to top Forward to CSS Structure ==>