Learnwizy Technologies Logo

Learnwizy Technologies

Class 3: CSS Fundamentals - Styling Your First Page

In this class, we dive into the world of Cascading Style Sheets (CSS), the language used to style the look and feel of web pages. While HTML provides the structure, CSS gives your web content its visual appeal, controlling colors, fonts, layout, and much more.

What is CSS? How CSS Rules Are Structured

CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. A CSS rule set consists of a selector and a declaration block.

A declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Here's the basic structure:

selector {
  property: value;
  property-2: value-2;
}

Example: To make all paragraphs on your page blue: 

p {
  color: blue;
}

Ways to Include CSS

There are three primary ways to include CSS in an HTML document:

1. Inline Styles

Inline styles are applied directly to individual HTML elements using the style attribute. While quick for small changes, they are generally not recommended for larger projects as they mix content with presentation and make maintenance difficult. 

<p style="color: red; font-size: 18px;">
  This paragraph has inline styles.
</p>

2. Internal Stylesheets

Internal stylesheets are defined within the <style> tags in the <head> section of an HTML document. They are useful for applying styles to a single HTML page. 

<head>
  <style>
    h1 {
      color: green;
    }
    p {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

3. External Stylesheets

External stylesheets are the most common and recommended way to include CSS. The styles are written in a separate .css file and linked to the HTML document using the <link> tag in the <head> section. This approach separates content from presentation, making your code cleaner and easier to manage and reuse across multiple pages. 

// styles.css
body {
  background-color: lightblue;
}

h2 {
  color: navy;
}
// index.html
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Basic CSS Properties

Let's look at some fundamental CSS properties you'll use frequently:

color

Sets the color of the text within an element. Values can be color names (e.g., red, blue), hexadecimal codes (e.g., #FF0000), RGB values (e.g., rgb(255, 0, 0)), or HSL values. 

h1 {
  color: purple;
}

font-size

Sets the size of the font. Values can be in pixels (px), em units (em), rem units (rem), percentages (%), or other units. 

p {
  font-size: 16px;
}

background-color

Sets the background color of an element.

div {
  background-color: #f0f0f0;
}

text-align

Aligns the text content within an element horizontally. Common values include left, right, center, and justify. 

h2 {
  text-align: center;
}

CSS Selectors: Element, Class, ID Selectors

Selectors are patterns used to select the HTML elements you want to style.

1. Element Selector

Selects all occurrences of a specific HTML element.

p {
  color: brown;
}

2. Class Selector

Selects HTML elements with a specific class attribute. A class can be used on multiple elements, allowing you to apply the same style to different elements. In CSS, class selectors are denoted by a dot (.) followed by the class name. 

// index.html
<p class="highlight">This is a highlighted paragraph.</p>
<span class="highlight">This is also highlighted.</span>
// styles.css
.highlight {
  background-color: yellow;
  font-weight: bold;
}

3. ID Selector

Selects a unique HTML element with a specific id attribute. An ID must be unique within an HTML document. In CSS, ID selectors are denoted by a hash (#) followed by the ID name. 

// index.html
<h1 id="main-title">Welcome to My Website</h1>
<p>Some other content.</p>
// styles.css
#main-title {
  color: darkblue;
  text-decoration: underline;
}

Common CSS Units

CSS units are used to specify the size and other dimensions of elements on a web page. Understanding different units is crucial for creating responsive and well-designed layouts.

Absolute Length Units

Absolute length units are fixed and do not change regardless of the screen size or parent element's size. They are generally not recommended for responsive design but can be useful in specific scenarios (e.g., print stylesheets).

Relative Length Units

Relative length units specify a length relative to another length property (e.g., parent element's font-size, viewport size). These are highly recommended for creating responsive designs.