Muhammad Sufiyan's Blog

Week 5: Introduction to CSS

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

4 min read

This week, we introduced students to Cascading Style Sheets (CSS), discussing its importance, how it works, and various methods of implementation. Below is a detailed documentation of the key concepts and techniques we covered.

Topics Covered:

  1. What is CSS?

  2. Why Use CSS?

  3. How to Use CSS

    • External CSS

    • Internal CSS

    • Inline CSS

  4. Color in CSS

    • Color Names

    • Hex Codes

    • RGB and RGBA

    • HSL and HSLA

  5. Text Styling with CSS

    • Font Size

    • Text Decoration

    • Font Family

    • Text Align

    • Font Weight

    • Line Height

    • Letter Spacing

    • Text Transform

1. What is CSS?

CSS stands for Cascading Style Sheets. It is a language used to describe the presentation of a document written in HTML or XML. CSS controls the layout of multiple web pages all at once and is used to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.

2. Why Use CSS?

CSS is used to separate content from design, which allows for greater flexibility and control in the specification of presentation characteristics. Some key benefits include:

  • Consistency: Styles can be applied consistently across multiple pages.

  • Maintenance: It is easier to update the style of a website by modifying a single CSS file.

  • Accessibility: CSS allows for the creation of print-friendly web pages and can help improve the accessibility of content.

3. How to Use CSS

There are three ways to apply CSS to HTML documents:

External CSS

External CSS involves linking an external .css file to the HTML document. This method is preferred for applying styles across multiple pages.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

styles.css:

h1 {
  color: blue;
  text-align: center;
}

Internal CSS

Internal CSS involves embedding CSS directly within the <style> tag in the <head> section of an HTML document. This method is suitable for single-page websites or specific styles that are not reused.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Inline CSS

Inline CSS involves applying styles directly to HTML elements using the style attribute. This method is not recommended for large projects as it mixes content with presentation.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <h1 style="color: blue; text-align: center;">Hello, World!</h1>
</body>
</html>

4. Color in CSS

CSS allows for a variety of ways to specify colors:

Color Names

CSS supports 140 standard color names.

Example:

p {
  color: red;
}

Hex Codes

Hexadecimal color codes are a six-digit combination of numbers and letters defined by its mix of red, green, and blue (RGB).

Example:

p {
  color: #ff0000;
}

RGB and RGBA

RGB stands for Red, Green, Blue. RGBA is RGB with an alpha channel for opacity.

Example:

p {
  color: rgb(255, 0, 0); /* Red */
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}

HSL and HSLA

HSL stands for Hue, Saturation, Lightness. HSLA is HSL with an alpha channel for opacity.

Example:

p {
  color: hsl(0, 100%, 50%); /* Red */
  background-color: hsla(240, 100%, 50%, 0.5); /* Semi-transparent blue */
}

5. Text Styling with CSS

CSS provides numerous properties to style text effectively:

Font Size

Controls the size of the text.

Example:

p {
  font-size: 16px;
}

Text Decoration

Adds decoration to text, such as underline, overline, or line-through.

Example:

p {
  text-decoration: underline;
}

Font Family

Specifies the font to be used for an element.

Example:

p {
  font-family: Arial, sans-serif;
}

Text Align

Specifies the horizontal alignment of text.

Example:

p {
  text-align: center;
}

Font Weight

Specifies the thickness of the font.

Example:

p {
  font-weight: bold;
}

Line Height

Specifies the height of a line of text.

Example:

p {
  line-height: 1.5;
}

Letter Spacing

Controls the space between characters in text.

Example:

p {
  letter-spacing: 2px;
}

Text Transform

Controls the capitalization of text.

Example:

p {
  text-transform: uppercase;
}

Practical Examples and Exercises

To solidify these concepts, students completed practical exercises such as creating styled HTML pages using different types of CSS, experimenting with color properties, and styling text.

Exercise: Styling a Simple Webpage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Styled Webpage</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
      line-height: 1.6;
    }
    h1 {
      text-align: center;
      color: #0066cc;
    }
    p {
      font-size: 14px;
      text-align: justify;
    }
    .highlight {
      color: #ff0000;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Styled Page</h1>
  <p>This is a paragraph with some <span class="highlight">highlighted text</span> to demonstrate inline CSS.</p>
</body>
</html>
CSSHTML5saylanismit