No history yet

CSS Basics

The Look of the Web

Imagine you’ve built a house. You have walls, a roof, doors, and windows. It's functional, but it's just a plain structure. This is what HTML gives you: the structure of a webpage. But what about the paint color, the style of the windows, or the texture of the walls? That's where CSS comes in.

CSS stands for Cascading Style Sheets. It's the language used to describe the presentation of a webpage. Think of it as the interior designer for your website. While HTML organizes the content, CSS makes it look good. It handles the colors, fonts, spacing, and overall layout.

CSS (Cascading Style Sheets) defines the styling/presentation of a web page and the elements on it

The most powerful idea behind CSS is the separation of content from presentation. Your HTML file holds the content—the text, the images, the links. Your CSS file holds the style rules. This separation makes your website far easier to manage. If you want to change the color of all the headings on your hundred-page website, you only need to edit one line in your CSS file, instead of changing a hundred individual HTML files.

The Syntax of Style

CSS works by applying rules to HTML elements. A CSS rule has two main parts: a selector and a declaration block.

The selector points to the HTML element you want to style. This could be a paragraph (p), a heading (h1), or a specific element you've named.

The declaration block, enclosed in curly braces {}, contains one or more style declarations. Each declaration includes a CSS property and a value, separated by a colon and ending with a semicolon.

Let's look at a simple example. Suppose you want to make all the paragraphs on your webpage red and increase their font size. The CSS rule would look like this:

p {
  color: red;
  font-size: 16px;
}

Here, p is the selector that targets all <p> elements. Inside the declaration block, we have two declarations. The first sets the color property to red. The second sets the font-size property to 16px (16 pixels).

Connecting CSS to HTML

Now that you know how to write a CSS rule, how do you get your HTML file to use it? There are three ways to apply CSS to an HTML document.

1. External Stylesheet This is the most common and recommended method. You write your CSS in a separate file with a .css extension (e.g., style.css) and link to it from your HTML file. This way, you can use the same stylesheet for many pages.

<!-- In your index.html file -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* In your style.css file */
body {
  background-color: lightblue;
}

h1 {
  color: navy;
}

2. Internal Stylesheet You can place CSS rules directly inside your HTML file within a <style> tag, which goes in the <head> section. This is useful for styles that are unique to a single page.

<!-- In your index.html file -->
<head>
  <style>
    body {
      background-color: linen;
    }
    p {
      color: maroon;
    }
  </style>
</head>

3. Inline Styles You can apply styles directly to a specific HTML element using the style attribute. This method is generally avoided because it mixes content and presentation, making the code harder to read and maintain. It's usually reserved for very specific, one-off style changes.

<!-- In your index.html file -->
<p style="color: blue; font-size: 20px;">This is a special paragraph.</p>

Using an external stylesheet is the best practice. It keeps your code organized and efficient, fully realizing the benefit of separating your website's structure from its style.

Quiz Questions 1/5

What is the primary purpose of CSS?

Quiz Questions 2/5

What are the two main parts of a CSS rule?

With these fundamentals, you can begin to transform plain HTML documents into visually engaging webpages.