HTML CSS

Posted in HTML Tutorial

Updated on Sep 13, 2024

By Mari Selvan

👁️ 37 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

Introduction

CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the look and feel of elements written in HTML by specifying properties like colors, fonts, spacing, and positioning. HTML and CSS work together to build visually appealing and responsive websites.

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language that describes how HTML elements should be displayed on a webpage. With CSS, you can control the layout, design, and presentation of your web content.

How CSS Works with HTML

HTML defines the structure of a webpage, while CSS determines the visual appearance. By linking a CSS file or writing CSS directly in your HTML, you can modify styles like fonts, colors, margins, and more, without altering the HTML structure.

Types of CSS

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

Inline CSS: CSS styles applied directly within HTML elements using the style attribute.
Internal CSS: CSS written within the <style> tag in the <head> section of the HTML document.
External CSS: A separate CSS file linked to the HTML document using the <link> tag.

CSS Syntax

CSS rules consist of selectors and declarations. The selector targets the HTML element, and the declaration defines the style. A declaration contains a property and a value.

Example

Common CSS Properties

Color: Sets the text color of an element.
Font-size: Controls the size of the text.
Margin: Defines space around elements.
Padding: Adds space inside an element, between the content and the border.
Background-color: Sets the background color of an element.
Width and Height: Control the dimensions of an element.

How to Apply CSS

Inline CSS:

HTML

Copied

<h1 style="color: red;">Hello World</h1>

Internal CSS:

HTML

Copied

<style>
  h1 {
    color: green;
  }
</style>

External CSS:

HTML

Copied

<link rel="stylesheet" href="styles.css">

CSS Selectors

Selectors define which HTML elements the CSS rules apply to. Some common selectors are:

Element Selector:

Targets elements by their tag name.
CSS
Copied
```
p { color: black; }
```
Class Selector:

Targets elements with a specific class attribute.
CSS
Copied
```
.intro { font-weight: bold; }
```
ID Selector:

Targets a unique element with an ID.
CSS
Copied
```
#header { background-color: yellow; }
```

Best Practices

Keep CSS separate: Use external CSS files to keep your HTML clean.
Use classes over IDs: Classes are more reusable than IDs, which should be unique.
Mobile responsiveness: Use media queries to ensure your website looks good on all devices.

Example

Here’s a basic example of how CSS works with HTML:

HTML

Copied

<!DOCTYPE html>
<html>
<head>
  <title>HTML CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="intro">Welcome to My Website</h1>
  <p>This is a simple example of using CSS with HTML.</p>
</body>
</html>

CSS

Copied

/* styles.css */
body {
  background-color: #f0f0f0;
}

h1 {
  color: navy;
}

p {
  font-size: 16px;
  color: #333;
}

Conclusion

CSS is a fundamental tool for web design that works hand-in-hand with HTML to create visually appealing, user-friendly websites. By understanding how to apply CSS, style HTML elements, and use selectors effectively, you can greatly enhance the aesthetics and usability of your web projects.