Overview of CSS (Cascading Style Sheets)

What is CSS?

CSS, or Cascading Style Sheets, is a language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall visual styling of a webpage, allowing developers to separate content from design. It enables responsive and visually appealing web experiences.

Key Concepts of CSS

Selectors

Selectors are patterns used to select elements on a webpage to apply styles. Common selectors include:

  • Element Selector: Targets all instances of an element. For example, p { color: blue; } makes all paragraphs blue.
  • Class Selector: Targets elements with a specific class. For example, .highlight { background-color: yellow; } applies yellow to elements with the highlight class.
  • ID Selector: Targets an element with a specific ID. For example, #header { font-size: 24px; } applies styles to the element with ID "header".

Properties and Values

CSS uses properties and values to define specific styling. Some commonly used properties are:

  • color: Sets the color of text. color: red;
  • background-color: Sets the background color of an element. background-color: lightgray;
  • font-size: Sets the size of text. font-size: 16px;
  • margin: Sets the space outside an element. margin: 10px;
  • padding: Sets the space inside an element. padding: 10px;

CSS Example

Here’s an example of basic CSS that styles a simple HTML structure:

In this example:

  • body sets a default font family, removes margins and padding, and applies a background color.
  • .container centers content and limits the width.
  • h1 applies color and centers the heading text.
  • p defines the color and line spacing for paragraphs.
  • .highlight adds a red color to elements with the "highlight" class.

Conclusion

CSS is essential for designing and styling web pages. By understanding selectors, properties, and values, you can create engaging, responsive, and visually appealing designs. This overview has introduced some fundamental CSS concepts and examples to help you get started with styling your own HTML documents.




Advertisement