CSS tutorial

CSS is a styling language used to design and format HTML documents.

CSS controls the layout, colors, fonts, and overall visual appearance of a webpage, making it essential for web design.

This tutorial will take you through CSS, starting from the basics to advanced techniques, to help you style webpages effectively.

1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to define the look and feel of a web page. It allows you to change the appearance of HTML elements, such as colors, fonts, spacing, and layout.

CSS Syntax

CSS is written in a set of rules. Each rule is made up of:

  • Selector: The HTML element you want to style.
  • Declaration: The property and its value.

Here’s an example of CSS syntax:

Example:

This code changes the color of all elements to blue and sets their font size to 36px.

How to Add CSS to HTML

There are three ways to add CSS to your HTML document:

  1. Inline CSS: Directly in the HTML element using the style attribute.

2. Internal CSS: Inside a

3.External CSS: By linking to an external .css file.

4.Basic CSS Properties

Here are some of the most common CSS properties:

  • Color:
  • Background Color:
  • Font Size:
  • Font Family:
  • Text Alignment:
  • Margin:

  • Padding:

5. CSS Selectors

Selectors allow you to target specific HTML elements. Here are the most common types of selectors:

  1. Universal Selector (*):
  • Affects all elements on the page.

2. Element Selector (h1, p, etc.):

  • Target element with a specific class.

3.Class Selector (.):

  • Targets elements with a specific class.

HTML:

4. ID Selector (#):

Target and element with a specific ID

HTML:

6. Box Model in CSS

The box model describes the rectangular boxes generated for elements. It includes:

  • Content: The actual content of the element (text, images, etc.).
  • Padding: Space between the content and the border.
  • Border: A border surrounding the element.
  • Margin: Space outside the border.

Example of box model:

7. CSS Layout Techniques

Here are a few layout techniques in CSS:

  • Flexbox: A layout model that allows items to be aligned and distributed efficiently.
  • Grid: A powerful layout system that divides the page into columns and rows.

8. CSS Transitions and Animations

CSS transitions allow you to create smooth changes between styles, while animations offer more complex movements.

  • Transition Example:
  • Animation Example:

9. Responsive Web Design

Make your website look great on all screen sizes by using media queries.

Example:

This will change the font size to 14px when the screen width is 600px or less.

10. Conclusion

CSS is an essential tool for styling HTML elements, and with this tutorial, you’ve learned the basics such as the CSS syntax, common properties, selectors, and layout techniques. As you become more comfortable with CSS, you can dive deeper into more advanced concepts like animations, responsive design, and preprocessors like Sass.

Next Steps:

  1. Practice by creating your own styles for your HTML page.
  2. Learn Advanced Layout Techniques: Dive deeper into Flexbox and CSS Grid.
  3. Experiment with CSS Animations: Make your page interactive and dynamic.