Skip to main content

CSS Tutorial

Cascading Style Sheets (CSS) is a stylesheet language that defines the look and feel of a website. It is used to control the presentation of HTML elements, such as fonts, colors, and layouts. This tutorial will introduce you to the basics of CSS, including syntax, basic rules, and different types of CSS.

What is CSS?​

CSS stands for Cascading Style Sheets. It is a language used to describe the appearance of HTML elements on a webpage. By separating the presentation from the content, CSS makes web development more efficient and easier to maintain.

Why use CSS?​

CSS offers several benefits, such as:

  • Improved website appearance
  • Easier maintenance and updates
  • Faster loading times
  • Consistent styling across multiple pages
  • Better accessibility for users

CSS versions and browser support​

CSS has evolved through various versions, with the latest being CSS3. Most modern browsers support CSS3 features, but some older browsers may have limited support. It is essential to check browser compatibility when using advanced CSS features.

Inline, internal, and external CSS​

CSS can be implemented in three ways:

  • Inline CSS: Applies styles directly to an HTML element using the style attribute. This method is not recommended due to poor maintainability.

Example:

HTML
<p style="color: red;">This text is red.</p>
  • Internal CSS: Places styles within a <style> tag in the <head> section of an HTML document. This method is useful for small projects or single-page websites.

Example:

HTML
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
  • External CSS: Creates a separate .css file and links it to the HTML document using the <link> tag. This method is recommended for most projects, as it promotes maintainability and separation of concerns.

Example:

HTML
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
styles.css
p {
  color: green;
}

CSS Syntax and basic rules​

CSS consists of rulesets, each containing a selector and a declaration block. The selector targets specific HTML elements, while the declaration block contains properties and their corresponding values, enclosed in curly braces.

Example:

CSS
selector {
  property: value;
}

A simple example targeting a paragraph element:

CSS
p {
  font-size: 16px;
  color: purple;
}

Comments in CSS​

Comments are essential for explaining code and making it more readable. In CSS, comments are enclosed in /* and */.

Example:

CSS
/* This is a CSS comment */
p {
  color: orange;
}

In this lesson, you learned about the basics of CSS, including syntax, basic rules, and different types of CSS. Now you are ready to start exploring more advanced topics and begin styling your webpages.