Key Concepts

Review core concepts you need to learn to master this subject

<link> Link Element

Purpose of CSS

Class and ID Selectors

Write CSS in Separate Files

Groups of CSS Selectors

Write CSS in HTML File

Selector Chaining

!important Rule

See more

<link> Link Element

<!-- How to link an external stylesheet with href, rel, and type attributes -->

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

The <link> element is used to link HTML documents to external resources like CSS files. It commonly uses:

  • href attribute to specify the URL to the external resource
  • rel attribute to specify the relationship of the linked document to the current document
  • type attribute to define the type of content being linked
CSS Setup and Selectors
Lesson 1 of 2
  1. 1
    Intro to CSS
    The basic structure of every web page, HTML, is very plain on its own. The beautiful websites that you see across the internet are styled with a variety of tools, including CSS. CSS, or Cascad…
    Start
  2. 2
    Inline Styles
    Although CSS is a different language than HTML, it’s possible to write CSS code directly within HTML code using inline styles. To style an HTML element, you can add the style attribute directly…
    Start
  3. 3
    The <style> Tag
    Inline styles are a fast way of styling HTML, but they also have limitations. If you wanted to style, for example, multiple elements, you would have to add inline styling to each element manually…
    Start
  4. 4
    The .css file
    Developers avoid mixing code by storing HTML and CSS code in separate files (HTML files contain only HTML code, and CSS files contain only CSS code). You can create a CSS file by using the **.css…
    Start
  5. 5
    Linking the CSS File
    Perfect! We successfully separated structure (HTML) from styling (CSS), but the web page still looks bland. Why? When HTML and CSS code are in separate files, the files must be linked. Otherwise,…
    Start
  6. 6
    Tag Name
    CSS can select HTML elements by using an element’s tag name. A tag name is the word (or character) between HTML angle brackets. For example, in HTML, the tag for a paragraph element is . The CSS …
    Start
  7. 7
    Class Name
    CSS is not limited to selecting elements by tag name. HTML elements can have more than just a tag name; they can also have attributes. One common attribute is the class attribute. It’s also possi…
    Start
  8. 8
    Multiple Classes
    We can use CSS to select an HTML element’s class attribute by name. So far, we’ve selected elements using only one class name per element. If every HTML element had a single class, all the style …
    Start
  9. 9
    ID Name
    If an HTML element needs to be styled uniquely (no matter what classes are applied to the element), we can add an ID to the element. To add an ID to an element, the element needs an id attribute: …
    Start
  10. 10
    Classes and IDs
    CSS can select HTML elements by their tag, class, and ID. CSS classes and IDs have different purposes, which can affect which one you use to style HTML elements. CSS classes are meant to be reused…
    Start
  11. 11
    Specificity
    Specificity is the order by which the browser decides which CSS styles will be displayed. A best practice in CSS is to style elements while using the lowest degree of specificity, so that if an ele…
    Start
  12. 12
    Chaining Selectors
    When writing CSS rules, it’s possible to require an HTML element to have two or more CSS selectors at the same time. This is done by combining multiple selectors, which we will refer to as chaini…
    Start
  13. 13
    Nested Elements
    In addition to chaining selectors to select elements, CSS also supports selecting elements that are nested within other HTML elements. For instance, consider the following HTML: … ….
    Start
  14. 14
    Chaining and Specificity
    In the last exercise, instead of selecting all h5 elements, you selected only the h5 elements nested inside the .description elements. This CSS selector was more specific than writing only h5. Addi…
    Start
  15. 15
    Multiple Selectors
    In order to make CSS more concise, it’s possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code. For instance, the following code has repetitive st…
    Start
  16. 16
    Review CSS Selectors
    Throughout this lesson, you learned how to select HTML elements with CSS and apply styles to them. Let’s review what you learned: - CSS can change the look of HTML elements. In order to do this, …
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo