View Categories

HTML – Style Sheets

Table of Contents

CSS (Cascading Style Sheets) is a powerful tool used to control the appearance and layout of web pages. Since its introduction, CSS has become an essential part of modern web development, allowing developers to separate content from design and making websites more flexible and easier to maintain.

What is CSS? #

CSS stands for Cascading Style Sheets. It is a language used to describe the presentation of HTML documents. With CSS, you can control the color, font, size, spacing, and many other aspects of HTML elements. This separation of content (HTML) from design (CSS) makes it easier to manage and update websites.

Why Use CSS? #

  • Consistency: Apply consistent styles across multiple pages.
  • Efficiency: Update styles in one place without changing individual HTML elements.
  • Flexibility: Customize the layout for different devices and screen sizes.
  • Accessibility: Improve the accessibility of your website for users with disabilities.

Basic Syntax #

CSS consists of selectors and declarations:

selector {
    property: value;
    property: value;
}

Selector: Targets the HTML element you want to style.Property: The style attribute you want to change (e.g., color, font-size).Value: The value of the property (e.g., blue, 16px).

Ways to Include CSS in HTML #

There are three main methods to incorporate CSS into your HTML documents:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS #

Inline CSS involves adding styles directly to HTML elements using the style attribute. This method is useful for quick changes but is not recommended for large projects due to maintenance challenges.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>
<body>
    <p style="color: blue; font-size: 18px;">This paragraph has inline styles.</p>
</body>
</html>

2. Internal CSS #

Internal CSS is defined within the <style> tag inside the <head> section of an HTML document. This method is suitable for styling a single page.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
        }
        p {
            font-size: 16px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Welcome to Coaching Wallah</h1>
    <p>This page uses internal CSS for styling.</p>
</body>
</html>

3. External CSS #

External CSS involves linking a separate .css file to your HTML document using the <link> tag. This method is the most efficient for larger websites, allowing you to style multiple pages with a single CSS file.

Example CSS File (styles.css):

body {
    background-color: white;
    font-family: Arial, sans-serif;
}

h1 {
    color: navy;
}

p {
    color: #555;
    line-height: 1.6;
}

HTML Document:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>External CSS with Coaching Wallah</h1>
    <p>This page is styled using an external CSS file.</p>
</body>
</html>

Understanding the Cascade #

The term cascading in CSS means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to influence the styling of a document. The priority of styles is determined by their location and specificity:

  1. Inline Styles (style attribute inside HTML elements) have the highest priority.
  2. Internal Styles (<style> tag in the <head>) come next.
  3. External Styles (styles in an external .css file) are applied after internal styles.
  4. Browser Defaults are the styles applied by the browser if no other styles are specified.

Advantages of Using CSS #

  • Separation of Concerns: Keeps HTML clean and focuses on structure while CSS handles design.
  • Reusability: Use the same styles across multiple pages.
  • Bandwidth Reduction: External CSS files are cached by browsers, reducing page load times.
  • Device Adaptability: Create responsive designs that adapt to different screen sizes and devices.

Practical Examples #

Changing Text Color and Size #

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Text Styling Example</title>
    <style>
        .highlight {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="highlight">This text is red and larger.</p>
    <p>This text is default size and color.</p>
</body>
</html>

Applying Multiple Classes #

You can apply multiple classes to an element by separating class names with a space.

CSS:

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.blue {
    color: blue;
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Classes Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p class="bold italic blue">This text is bold, italic, and blue.</p>
</body>
</html>

Styling Nested Elements #

Styles applied to parent elements can affect their child elements unless overridden.

CSS:

.container {
    color: green;
}

.container p {
    font-size: 18px;
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Nested Elements Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>This heading is green.</h2>
        <p>This paragraph is green and has a larger font size.</p>
    </div>
</body>
</html>

Conclusion #

Using CSS in your HTML documents enhances the visual appeal and user experience of your website. By choosing the appropriate method to include CSS—inline, internal, or external—you can make your web development process more efficient and maintainable.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment