CSS Introduction - Lession-1

Introduction

CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation and styling of HTML documents. CSS allows you to control the layout, colors, fonts, and other visual aspects of a web page. The latest version of CSS is CSS3.

There are three ways to apply CSS styles to an HTML document:

Inline Styles
Internal Styles
External Styles

1. Inline Styles

Inline CSS involves placing CSS code directly within HTML elements using the style attribute. Each HTML element can have its own style attribute, containing CSS properties specific to that element.

1
2
3
<p style="color: blue; font-size: 16px;">
  This is a paragraph with inline CSS.
</p>

Advantages of Inline CSS:

Quick and easy for small styling changes.
Useful for testing or overriding other CSS rules.
Does not require a separate CSS file.

Disadvantages of Inline CSS:

Can be difficult to debug if the style is not applied correctly.
Makes maintenance harder as styles are spread throughout the HTML document.
Not ideal for reusing styles across multiple elements.

2. Internal Styles

Internal styles are defined within the head section of an HTML document using the style element. Internal styles are applied to the entire document.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<head>
  <style>
    p {
      color: green;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>This paragraph will be green with a font size of 14px.</p>
</body>

Advantages of Internal Styles:

Keeps HTML and CSS in a single file, which can be simpler for smaller projects or single-page websites.
No additional HTTP requests are needed to load an external CSS file.

Disadvantages of Internal Styles:

Not suitable for styling multiple pages with the same design.
Can make the HTML document lengthy and harder to read.
Less efficient for website performance compared to external CSS.

3. External Styles

External CSS involves creating a separate file with a .css extension where all the CSS rules are written. This external stylesheet is then linked to an HTML document using the <link> element in the head section. This approach is widely used for larger projects where multiple HTML pages share the same styling.

Creating a CSS File:

Create a new file and save it with a .css extension, e.g., styles.css. Write your CSS rules in this file. For example:

1
2
3
4
5
6
body {
  background-color: lightblue;
}
h1 {
  color: navy;
}

Linking the CSS File to an HTML Document: To use the styles defined in the external stylesheet, you need to link it in the HTML document using the <link> tag. This tag is placed inside the <head> section of the HTML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <!-- Linking the external CSS file -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a sample paragraph to demonstrate external CSS.</p>
  </body>
</html>

In this example, the HTML file index.html links to the styles.css file using the <link> tag. The styles defined in styles.css will apply to all elements on the page. For instance, the body will have a light blue background, and the h1 heading will be in navy color.

Advantages of External Styles:

Centralizes the styling for multiple pages, making maintenance and updates easier.
Improves website performance as the browser can cache the external CSS file, reducing load times on subsequent page visits.
Keeps HTML files clean and focused on content structure.

Disadvantages of External Styles:

Requires an extra HTTP request to load the CSS file, which may affect the initial loading time of the webpage.
The separation of HTML and CSS files can be initially less intuitive for beginners.

Conclusion

In summary, CSS (Cascading Style Sheets) is a vital tool for web design, providing flexibility in styling HTML documents. Whether applied through Inline, Internal, or External styles, each method offers unique benefits and is chosen based on the specific needs of a project. With CSS3 as the current standard, CSS continues to empower developers to create visually appealing, responsive, and user-friendly websites. Understanding these methods is key to effective web design, enabling both aesthetic appeal and practical functionality.