Introduction to CSS: Understanding Its Purpose and How It Works with HTML

  • Blog /
  • Introduction to CSS: Understanding Its Purpose and How It Works with HTML
Blog Featured Image

What is CSS?

CSS, or Cascading Style Sheets, is a language used to describe the presentation or style of a document written in HTML (HyperText Markup Language). While HTML defines the structure and content of a webpage, CSS determines how HTML elements should be displayed on that page. This includes aspects such as layout, colours, fonts, and spacing.

Why Use CSS?

The primary goal of CSS is to separate the structure of a webpage (HTML) from its style or presentation. This separation provides several key advantages:

  1. Consistency: By defining styles centrally in CSS, you can ensure a consistent look and feel across all website pages. This consistency enhances user experience and reinforces brand identity.
  2. Flexibility: CSS allows developers and designers to easily change a webpage's appearance without altering its structure. This flexibility simplifies maintenance and updates.
  3. Accessibility: CSS plays a crucial role in making websites accessible. By defining semantic HTML and applying appropriate styles through CSS, you can improve readability and usability for all users, including those with disabilities.

How Does CSS Work with HTML?

CSS works by associating styling rules with HTML elements. These rules are typically defined in a separate CSS file or embedded directly within the HTML document. Here’s how CSS is applied to HTML:

  1. External CSS:

The most common method is to link an external CSS file to your HTML document using the `<link>` tag in the `<head>` section:

Copied



<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Welcome to CSS</h1>
<p>This is a paragraph styled with CSS.</p>

</body>
</html>


 

In this example, `styles.css` contains all the CSS rules that define how HTML elements should be styled:

Styles.css

Copied



h1 {
color: #333333;
font-family: Arial, sans-serif;
}

p {
font-size: 16px;
line-height: 1.6;
color: #666666;
}


 

 

  1. Internal CSS

Alternatively, you can embed CSS directly within the `<style>` tags in the `<head>` section of your HTML document:

Copied



<!DOCTYPE html>
<html lang="en">
<head>

<style>

h1 {
color: #333333;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
line-height: 1.6;
color: #666666;
}
</style>

</head>
<body>

<h1>Welcome to CSS</h1>
<p>This is a paragraph styled with CSS.</p>

</body>
</html>


 

 

  1. Inline CSS

For specific styles applied to individual elements, you can use inline CSS by adding a `style` attribute directly within an HTML tag:

Copied



<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS Example</title>
</head>

<body>

<h1 style="color: #333333; font-family: Arial, sans-serif;">Welcome to CSS</h1>
<p style="font-size: 16px; line-height: 1.6; color: #666666;">This is a paragraph styled with CSS.</p>

</body>
</html>


 

Advantages and Best Practices

Separation of Concerns: Keep HTML focused on content and structure while CSS handles presentation.

Modularity: Use external CSS files for scalability and easy maintenance.

Performance: External CSS files can be cached by browsers, improving load times for subsequent visits.

Conclusion

Understanding the basics of CSS sets the foundation for creating visually appealing and well-structured websites