Intro to Cascading Style Sheets (CSS)

Topics Covered in This HTML & CSS Tutorial:

The Style Tag, Tag Selectors, the Font-size, Font-family, Color, & Line-height Properties, Hexadecimal Color Codes

Exercise Preview

Exercise Overview

In this exercise, you'll transform plain HTML content into a visually engaging webpage using Cascading Style Sheets (CSS). While HTML provides the semantic structure—defining headings, paragraphs, lists, and other content types—CSS controls the visual presentation, telling the browser exactly how to render that content. This separation of concerns is a fundamental principle of modern web development that ensures maintainable, scalable code.

1. If you completed the previous exercise, index.html should still be open in your code editor, and you can skip the following sidebar. If you closed index.html, re-open it now from the News website folder. We recommend completing the previous exercise (1C) before starting this one, as it establishes the HTML foundation we'll be styling. If you haven't finished it, follow the instructions in the sidebar below.

Understanding Tag Selectors: Establishing Global Design Standards

Tag selectors are your first tool for creating consistent design patterns across your website. They target all instances of a specific HTML element, effectively setting "default" appearance rules that ensure visual consistency without requiring individual styling of each element.

1. Return to index.html in your code editor.

2. CSS operates behind the scenes of your webpage, which is why it belongs in the head section rather than the visible body. The style tag creates an internal stylesheet—perfect for learning and small projects. Add the following code in the head section, immediately below the title tag:

   <title>The Onion—Today's Top Stories</title>
      <style>
   
      </style>
   </head>

3. CSS selectors are the foundation of targeted styling—they tell the browser precisely which elements to style. The tag selector is the most straightforward type, targeting every instance of a specific HTML tag throughout your document. Add this h1 tag selector inside your <style> tags:

   <style>
      h1 {
   
      }
   </style>

   This rule will apply styling to every h1 element on your page, ensuring consistent header appearance across your entire site.

4. Within the h1 selector's curly braces, add these property declarations:

   h1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 35px;
      color: #006b3a;
   }

   A complete CSS rule consists of a selector (h1) followed by property declarations enclosed in curly braces. Each property declaration pairs a predefined CSS property (like font-size or color) with a specific value (35px, #006b3a). Professional developers format each property on its own indented line—while not required by browsers, this convention dramatically improves code readability and maintenance.

5. Save the file using Ctrl+S (Windows) or Cmd+S (Mac).

6. Return to your browser and refresh the page to witness the transformation. The heading styling should now reflect your CSS rules—your first step into the world of web design!