CSS Introduction

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is what you use to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Basics of CSS

What is CSS?

CSS stands for Cascading Style Sheets. It describes how HTML elements should be displayed on screen, paper, or in other media. CSS saves a lot of work by controlling the layout of multiple web pages all at once.

How CSS Works

CSS is used to apply styles to HTML elements. It can be written in three ways:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS

Inline CSS is used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element.

html

2. Internal CSS

Internal CSS is used to define styles in the head section of an HTML document.

html

Copy code

3. External CSS

External CSS is used to define styles in an external .css file. This method is the most recommended as it keeps your HTML code clean and the styles reusable across multiple pages.

  1. Create a CSS file (e.g., styles.css):

css

Copy code

/* styles.css */ h1 { color: blue; } p { color: red; }

  1. Link the CSS file to your HTML document:

html

Copy code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>External CSS Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a Blue Heading</h1> <p>This is a Red Paragraph.</p> </body> </html>

Basic CSS Syntax

CSS is made up of rulesets. Each ruleset consists of a selector and a declaration block.

  • Selector: Specifies which HTML element the style will be applied to.
  • Declaration Block: Contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Example:

css

Copy code

/* This is a CSS ruleset */ selector { property: value; property: value; }

Applying the Ruleset:

css

Copy code

h1 { color: blue; font-size: 20px; }

In this example:

  • h1 is the selector.
  • color: blue; and font-size: 20px; are declarations.

Common CSS Properties

Here are some common CSS properties you will use often:

  • Color and Backgrounds:cssCopy codecolor: red; /* Text color */ background-color: yellow; /* Background color */
  • Text Formatting:cssCopy codefont-family: Arial, sans-serif; /* Font family */ font-size: 16px; /* Font size */ font-weight: bold; /* Font weight */ text-align: center; /* Text alignment */
  • Box Model (Margins, Padding, Borders):cssCopy codemargin: 10px; /* Margin */ padding: 15px; /* Padding */ border: 1px solid black; /* Border */
  • Layout:cssCopy codedisplay: block; /* Display type */ width: 100%; /* Width */ height: 50px; /* Height */

Conclusion

CSS is a powerful tool that allows you to create visually appealing web pages. By understanding the basics of CSS, you can start styling your HTML documents to improve their appearance and user experience. As you become more familiar with CSS, you can explore more advanced features such as flexbox, grid, animations, and responsive design.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *