Introduction to CSS (Cascading Style Sheets)

Nikesh · Sunday at 8:49 AM

CSS (Cascading Style Sheets) is used to style and design HTML elements. While HTML structures your content, CSS makes it look good by adding colors, spacing, fonts, borders, and more.

1. What is CSS?
CSS is a stylesheet language that describes how HTML elements should appear on screen. You can use CSS to:

- Change font colors and sizes
- Add background colors or images
- Control spacing between elements
- Style lists, links, and tables

2. Creating a CSS File
CSS is usually written in a separate file with the extension .css. Here's how to create a CSS file and link it to an HTML page.

Create a file named style.css and write the following:

CSS:

/* This styles the body background and font */
body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

/* Styling headings */
h1 {
  color: #0055aa;
}

h2 {
  color: #0077cc;
}

/* Paragraphs */
p {
  line-height: 1.5;
  font-size: 16px;
  color: #333333;
}

/* Unordered list */
ul {
  list-style-type: square;
}

/* Ordered list */
ol {
  list-style-type: upper-roman;
}

/* Example of ID selector */
#special-note {
  background-color: #fffae6;
  padding: 10px;
  border-left: 4px solid #ffaa00;
}

3. Linking the CSS File to Your HTML
You link a CSS file inside the <head> section of your HTML page using the <link> tag.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Basics</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

4. Example HTML Page
We will use an example from our html guide forum as posted here. Below is a complete HTML example that includes a heading, paragraphs, lists, and a paragraph styled using an ID.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Basics</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

    <p>
       This paragraph
       contains a lot of lines
       but they are ignored.
    </p>

    <p>
       This paragraph<br>
       contains a lot of lines<br>
       and they are displayed.
    </p>

    <p>
       No matter how much the dog barks: <strong>don't feed him chocolate</strong>.
    </p>

    <p>
       The primary colors are <b>red</b>, <b>yellow</b> and <b>blue</b>.
    </p>

    <p>
       Wake up <em>now</em>!
    </p>

    <p>
       The term <i>HTML</i> stands for HyperText Markup Language.
    </p>

    <p>
       I <em>really</em> want ice cream.
    </p>

    <p>
       My favourite book is <i>Dracula</i>.
    </p>

    <ul>
       <li>Tea</li>
       <li>Sugar</li>
       <li>Milk</li>
    </ul>

    <ol>
       <li>Rocky</li>
       <li>Rocky II</li>
       <li>Rocky III</li>
    </ol>

    <p id="special-note">
      This is an important message highlighted using an ID-based CSS rule.
    </p>
  </body>
</html>

5. What is an ID in CSS?
An id is a unique identifier for an element. In CSS, you can style it by prefixing it with a # symbol.

Example:

#special-note { color: red; }

Use id when you want to style a specific, one-of-a-kind element.
Without CSS

With CSS

Conclusion
- CSS is used to style HTML pages
- Create a .css file and link it with <link>
- Style elements using tags, classes, or IDs
- Use #id for unique styles

This basic guide should get you started with CSS. Let us know if you'd like a tutorial on advanced selectors, hover effects, or layout using Flexbox and Grid!

Search

Search

Introduction to CSS (Cascading Style Sheets)

Nikesh

Administrator