CSS Basics

In the realm of web development, Cascading Style Sheets (CSS) are your magic wand for transforming plain HTML into visually stunning web pages. In this comprehensive tutorial, we’ll explore the fundamentals of CSS, including its syntax, selectors, properties, and values, with plenty of code examples to illustrate each concept.

CSS Syntax

CSS uses a straightforward syntax to define styles for HTML elements. Each style rule consists of a selector, followed by a set of properties and their values enclosed in curly braces {}. Here’s a breakdown:

  • Selector: This defines the HTML element(s) to which the style rule should be applied. Selectors can target elements by their tag name, class, ID, or other attributes.
  • Property: Properties specify what aspect of the element you want to style, such as its color, size, or position.
  • Value: Values determine the appearance or behavior of the selected properties. They can be numerical values, text values, or keywords.

Let’s delve into each of these components with code examples:


  1. Element Selector: Targets all instances of a specific HTML element. For example, to style all <p> elements:
  1. Class Selector: Targets elements with a specific class attribute. Apply the same class to multiple elements to style them similarly. For example:
  1. ID Selector: Selects a single element with a unique ID attribute. IDs should be unique within a document. For example:

Properties and Values

  1. Color Property: You can set text or background color using the color and background-color properties, respectively. Colors can be defined using various formats, including names, hexadecimal codes, and RGB values. For example:
  1. Font Property: Modify font attributes like family, size, and style with the font property. For instance:
  1. Padding and Margin Properties: Adjust spacing around elements using padding and margin. You can specify values in pixels, percentages, or other units. Example:


Understanding CSS syntax, selectors, properties, and values is fundamental to web development. Armed with this knowledge, you can start styling your web pages with precision. In the next tutorial, we’ll explore CSS box model concepts, positioning, and more advanced styling techniques. Remember, practice and experimentation are key to becoming a CSS master, so don’t hesitate to create your own styles and explore the vast world of web design possibilities.