This document provides an introduction to CSS (Cascading Style Sheets) and how to use CSS to style HTML elements and lay out web pages. It covers basic HTML tags, linking an external CSS stylesheet, using selectors and properties to style elements, adding divs to structure content sections, and other CSS techniques like typography, images, and white space. Examples are given throughout and the reader is prompted to practice these skills by adding CSS to their own HTML code.
4. Some HTML tags Tag Function Usage Output <p> Paragraphs <p>Sample text…</p> <p>Next paragraph.</p> Sample text… Next paragraph. <h1> Heading <h1>A headline</h1> A headline <strong> Bold <strong>Be bold</strong> Be bold <em> Italics <em>For emphasis</em> For emphasis <a> Hyperlink <a href=“link.html”>Click here</a> Click here <img /> Image <img src=“photo.jpg” alt=“Photo description” />
5.
6.
7.
8.
9.
10.
11.
12.
13.
14. Typography Property Description Values font-family A prioritized list of font families family-name, generic-family font-size Sets the size of the font 8px, 10px, 12px, 14px, etc. font-style Sets the style of the font normal, italic, oblique font-weight Sets the weight of the font normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 font-variant Displays text in a small-caps font or a normal font normal, small-caps text-transform Displays text in all caps, no caps, or first letter capitalized none, capitalize, uppercase, lowercase text-align Aligns left, right, or center left, right, center color Sets the color of the font red, blue, black, etc. or Hex code