Welcome to Lesson 2! Now that you have learned the basics of HTML, it is time to style your web pages using CSS, which stands for Cascading Style Sheets. CSS is not a programming language; it is a style sheet language that describes how HTML elements should be displayed on the screen. With CSS, you can control colors, fonts, spacing, layouts, and even animations. Mastering CSS is essential for making your web pages visually appealing, user-friendly, and responsive across different devices.

CSS can be applied to HTML in three main ways: inline, internal, and external. Inline CSS is added directly to an HTML element using the style attribute, for example: <p style="color:red;">Hello</p>. While this is simple, it is not recommended for large projects because it mixes content with presentation.

Internal CSS is written inside a <style> tag within the <head> section of your HTML document. This method is useful for single-page projects or testing styles without creating a separate file. Example:

<style>
p {
  color: blue;
  font-size: 16px;
}
</style>

The preferred approach for professional web development is external CSS. This involves creating a separate .css file and linking it to your HTML page using the <link> tag:

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

External CSS makes your code more organized, reusable, and easier to maintain. It allows multiple HTML pages to share the same styling file, ensuring a consistent look across your website.

CSS syntax is made up of selectors, properties, and values. A selector targets an HTML element, a property specifies the style you want to change, and a value defines how you want to style it. For example:

p {
  color: red;
  font-size: 18px;
  line-height: 1.6;
}

In this snippet, the selector p targets all paragraph elements. The color is set to red, the font size to 18 pixels, and the line height to 1.6, improving readability. Experimenting with different properties allows you to customize the appearance of your page to your liking.

Selectors can be simple or complex. Common selector types include:

  • Element selectors: target HTML tags directly, like h1 or p.
  • Class selectors: target elements with a specific class, using a period before the class name, e.g., .button.
  • ID selectors: target a unique element with a specific ID, using a hash, e.g., #header.
  • Universal selector: targets all elements, using *.
  • Group selectors: allow multiple selectors to share the same style, e.g., h1, h2, p { margin-bottom: 15px; }

Colors can be applied in several ways: by name (e.g., red, blue), hexadecimal codes (e.g., #ff0000), RGB (e.g., rgb(255,0,0)), or HSL (e.g., hsl(0, 100%, 50%)). Choosing the right color combination is important for accessibility and aesthetics. For example, light text on a dark background can improve readability at night, while dark text on a light background works well for daytime reading.

Fonts can be customized with the font-family property. You can specify multiple fonts as fallbacks in case the first one is unavailable:

body {
  font-family: Arial, Helvetica, sans-serif;
}

CSS also controls spacing and layout through properties like margin (outside space) and padding (inside space). Understanding the box model, which includes content, padding, border, and margin, is crucial for creating visually balanced designs.

Text alignment, decoration, and transformation can be handled with properties like text-align, text-decoration, text-transform, and letter-spacing. For example:

h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

CSS also enables interactive effects through pseudo-classes like :hover, :focus, and :active. For instance, you can change a button’s color when a user hovers over it:

button {
  background-color: #28a745;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  transition: background 0.3s;
}

button:hover {
  background-color: #218838;
}

CSS positioning and layout are key for arranging elements. There are several positioning methods:

  • Static: default position in the normal flow.
  • Relative: positioned relative to its normal position.
  • Absolute: positioned relative to the nearest positioned ancestor.
  • Fixed: stays in a fixed position on the viewport.
  • Sticky: toggles between relative and fixed depending on scroll.

Additionally, you can use display properties like block, inline, inline-block, flex, and grid. In the next lesson, we will dive deeper into advanced layouts using Flexbox and Grid.

Responsive design is also important. CSS media queries allow your website to adapt to different screen sizes:

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

This ensures that your text, images, and layout look good on mobile devices, tablets, and desktops.

By the end of this lesson, you should be able to:

  • Apply CSS to HTML elements using inline, internal, and external styles
  • Understand selectors, properties, and values
  • Style colors, fonts, spacing, and text properties
  • Create hover and interactive effects using pseudo-classes
  • Use layout and positioning properties for visual arrangement
  • Apply media queries for responsive design

Practice is essential. Start by styling your HTML pages from Lesson 1. Experiment with colors, fonts, margins, paddings, borders, and buttons. Try to recreate simple web page designs you find online. Adjust text sizes, add hover effects, and explore different layouts using positioning and display properties. The more you practice, the more confident you will become in designing professional, responsive web pages.

In the next lesson, we will explore advanced CSS layouts using Flexbox and Grid. These techniques allow you to create complex page structures with less code and more flexibility. Mastering them will make your web pages fully responsive and visually appealing.

Next Lesson: Advanced CSS (Flexbox & Grid) →