CSS — Cascading Style Sheet

We use CSS to apply visual styling to our HTML. It describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS is really powerful and can accomplish a wide variety of things: colors, sizes, order, positioning, hiding, showing, animation, etc.

We can write styles within HTML itself using the style attribute or using the <style> tag. We can also write it in an external document with a .css document extension, this is called an external stylesheet and the most common way of writing CSS.

CSS in action!

Good work! Your explanation is already clear, but here’s a review, correction, and slight improvement to make it even more professional and easier to read:

---

CSS Syntax

CSS syntax defines the rules for writing correct CSS code.

<style>
  p {
    color: hotpink;
    border: 4px solid teal;
  }
</style>

<h1>Introduction to CSS</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipiscing elit, ornare vitae cum non
  congue nullam. Molestie quisque consequat faucibus mattis taciti vehicula
  ornare maecenas nascetur magnis ligula nec.
</p>

Introduction to CSS

Lorem ipsum dolor sit amet consectetur adipiscing elit, ornare vitae cum non congue nullam. Molestie quisque consequat faucibus mattis taciti vehicula ornare maecenas nascetur magnis ligula nec.

Code Breakdown

1. Selector (p)

   The selector targets the HTML elements you want to style. In this case, every <p> (paragraph) element will receive the styles inside the { }. (Selectors can be elements, IDs, classes, or more advanced patterns.)

2. Properties (color and border)

   Properties define what aspect of the element you want to style.

   • color controls the text color.
   • border sets the width, style, and color of the element’s border. (CSS includes hundreds of properties that affect appearance, layout, and even behavior.)

3. Values (hotpink and 4px solid teal)

   Values specify how the property should be applied.

   • hotpink sets the text color to hot pink.
   • 4px solid teal creates a 4-pixel wide solid border with a teal color.

4. Semicolon (;)

   Each property-value pair must end with a semicolon (;). This separates different declarations and helps avoid syntax errors.

Class Selectors

• Attach a class to an element using the class attribute.
• An element can have multiple classes.
• Select classes in CSS by prefixing the class name with a ..

<style>
  .warning {
    color: orange;
    font-weight: bold;
  }
</style>

<p class="warning">This paragraph displays a warning!</p>

This paragraph displays a warning!

ID Selector

• Attach an ID to an element using the id attribute.
• An ID should be unique to one element per page.

<style>
  #danger {
    color: red;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

<p id="danger">
  This text is uppercase, bold, and red, and it's uniquely marked because you should only use an ID once per page.
</p>

This text is uppercase, bold, and red, and it’s uniquely marked because you should only use an ID once per page.

Descendant Selectors

A descendant selector combines one or more classes, IDs, or elements, separated by spaces, to indicate a family relationship.

<style>
  .warning p {
    color: violet;
  }
</style>

<article class="warning">
  <p>All paragraphs in this article will have a color of violet.</p>
  <p>This paragraph too! No more classes needed!</p>
</article>

All paragraphs in this article will have a color of violet.

This paragraph too! No more classes needed!

Grouping Selectors

You can select multiple elements and apply the same styling to all of them at once.

<style>
  h1,
  h2 {
    color: green;
  }
</style>

<article>
  <h1>This heading is green</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipiscing elit, ornare vitae cum non
    congue nullam.
  </p>
  <h2>This heading is also green</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipiscing elit, ornare vitae cum non
    congue nullam.
  </p>
</article>

This heading is green

Lorem ipsum dolor sit amet consectetur adipiscing elit, ornare vitae cum non congue nullam.

This heading is also green

Lorem ipsum dolor sit amet consectetur adipiscing elit, ornare vitae cum non congue nullam.

We have other ways of selecting elements such as combinators, pseudo-classes, pseudo-elements, and attribute selectors. We will touch upon them as we work on projects.

Inline Styling

You can also apply styles directly to an HTML element using the style attribute:

<p style="color: blue; font-size: 20px;">Styled using inline CSS</p>

Styled using inline CSS

Importing External Stylesheets

We’ve seen how to use the style attribute and <style> tags for applying styles. However, the most common method we will use is the external stylesheet.
To use an external stylesheet, create a new file and give it a .css extension, for example, style.css.

Then, link the stylesheet within the <head> element using the <link> tag:

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

Comments

Just like in HTML, we can add comments in CSS that the browser will ignore.

/* This comment gets ignored by the browser */
p {
  color: chocolate;
  background-color: hotpink;
}
/* Comments are useful for documenting your code */

CSS Recap

• Selectors: Target elements to apply styles (p, .class, #id)
• Properties: Define what you’re styling (e.g. color, font-size)
• Values: Specify how the styling should look (hotpink, 16px, solid)
• Where to Write:
  • Inline (style attribute)
  • Internal (<style> tag)
  • External (.css file linked via <link>)