CSS How To

Welcome to this CSS tutorial where we will learn how to apply styles to HTML elements using Cascading Style Sheets (CSS). CSS allows you to control the design and layout of your website, making it visually appealing to visitors.

Basic CSS Syntax

To apply styles to your HTML elements, you will use CSS rules. A CSS rule consists of a selector and a declaration block. The selector identifies the HTML element you want to style, and the declaration block contains the styles you want to apply.

Here is an example of a CSS rule:

 
p {
  color: blue;
  font-size: 16px;
}

In this example, the selector p targets all <p> elements, and the declaration block sets the text color to blue and the font size to 16 pixels.

Internal CSS

You can apply CSS styles directly to an HTML document using internal CSS. To do this, you will use the <style> tag within the <head> section of your HTML document.

 
<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

External CSS

For larger projects, it's best to use external CSS files to keep your styles separate from your HTML content. To link an external CSS file to your HTML document, you will use the <link> tag within the <head> section.

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

Inline CSS

If you need to apply styles to a specific HTML element, you can use inline CSS. To do this, you will use the style attribute within the HTML tag.

 
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

CSS Selectors

CSS selectors allow you to target specific HTML elements to apply styles. Here are some common CSS selectors:

Selector	Description
Element Selector	Selects all instances of a specific HTML element
ID Selector	Selects a specific element by its ID attribute
Class Selector	Selects elements with a specific class attribute

Conclusion

CSS is a powerful tool for styling your website and making it visually appealing to visitors. By understanding the basic syntax of CSS, as well as the different ways to apply styles to HTML elements, you can create beautifully designed websites. Experiment with different CSS properties and selectors to see the effects they have on your web pages.