Introduction to CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a crucial part of web development used to control the presentation and styling of web pages.
In this guide, we will cover the various types of style sheets.
How to create and apply styles, use CSS properties, and select elements for styling.

Types of Style Sheets

Internal Style Sheet

An internal style sheet is defined within the HTML document using the <style> tag in the document's <head> section.
It is typically used for individual web pages.

1<!DOCTYPE html>
2<html>
3<head>
4  <style>
5    h1 {
6      color: blue;
7    }
8  </style>
9</head>
10<body>
11  <h1>This is a blue heading</h1>
12</body>
13</html>
14

Inline Style

Use this behavior to apply inline styles directly to individual HTML elements.
They override any other styles applied to the element.

1 <p style="color: green;">This is a green paragraph.</p>

External Style Sheet

An external style sheet is a separate CSS file linked to an HTML document using the <link> tag.
It allows you to maintain consistent styles across multiple web pages.

1/* style.css */
2h1 {
3  color: red;
4}
5

1<!DOCTYPE html>
2<html>
3<head>
4  <link rel="stylesheet" type="text/css" href="style.css">
5</head>
6<body>
7  <h1>This is a red heading</h1>
8</body>
9</html>
10

Creating Styles

Styles are created by specifying CSS properties and values.
Properties define how an element should be styled, and values determine the specific style.

1/* style.css */
2p {
3  font-size: 16px;
4  margin: 10px;
5}
6

In this example, we set the font size and margin for all <p> elements.

Linking to External Style Sheets

To apply an external style sheet, you need to use the <link> tag in the HTML document's <head> section.
The href attribute specifies the path to the CSS file.

1<head>
2  <link rel="stylesheet" type="text/css" href="style.css">
3</head>
4

CSS Properties

CSS properties define the styling rules.

Here are a few commonly used properties:

color

The color property sets the text color.

1h2 {
2  color: #FF5733;
3}
4

font-size

The font-size property adjusts the text size.

1h3 {
2  font-size: 20px;
3}
4

CSS Styling

CSS styling applies the defined properties to HTML elements, giving them the desired appearance.

1/* style.css */
2h2 {
3  color: #FF5733;
4}
5
6h3 {
7  font-size: 20px;
8}
9

Style Selectors

Selectors determine which elements are affected by a CSS rule.

ID Selector

An ID selector is used to select a specific element with a unique ID.

1<h4 id="special">Special Heading</h4>

1
2/* style.css */
3#special {
4  font-weight: bold;
5}
6

Class Selector

A class selector is used to select multiple elements with the same class.

1
2<h4 class="highlight">Highlighted Text</h4>
3<p class="highlight">This is also highlighted.</p>
4

1/* style.css */
2.highlight {
3  background-color: yellow;
4}

Pseudo-Class Selector

Pseudo-classes target specific states of elements, such as :hover for mouseover effects.

1/* style.css */
2a:hover {
3  color: purple;
4}
5

With this you've learned about the types of style sheets, creating styles, using CSS properties, and selecting elements for styling. CSS is a powerful tool for web developers to control the visual appearance of their web pages. Experiment and practice to become proficient in using CSS to style your web content.

Table of contents