Introduction to CSS (Cascading Style Sheets)

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

Conclusion

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.