Basics of CSS

css html basics of css web developement
Basics of CSS

In this blog we will be going through the basics of CSS, and by the end of this blog you will be able to stylize and create awesome webpages.

What you'll learn

  • What is CSS?
  • Why to use CSS?
  • Applying CSS to HTML
  • Anatomy of CSS code
  • Fonts and Text in CSS
  • Everything about boxes in CSS
  • Positioning and Styling the webpage

Prerequisites

  • Basic word processing using any text editor. (VS code recommended)
  • Basic knowledge in HTML

Anatomy of CSS Code

Let's dissect the CSS code for blue paragraph text to understand how everything works:

Anatomy of CSS Code

The whole structure is called a ruleset. Note the names of the individual parts:

Selector

This is the HTML element name at the start of the ruleset. It defines the elements to be styled (in this example, <p> element). To style a different element, change the selector.

Declaration

This is a single rule like color: blue; It specifies which of the element's properties you want to style.

Properties

These are ways in which you can style an HTML element. (In this example, color is a property of the <p> element.) In CSS, you choose which properties you want to affect in the rule.

Property value

To the right of the property, after the colon, there is the property value. This chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to blue.)

Note the other important parts of the syntax:

  • Apart from the selector, each ruleset must be wrapped in curly braces. ({})
  • Within each declaration, you must use a colon (:) to separate the property from its value or values.
  • Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one

To modify multiple property values in one ruleset, write them separated by semicolons, refer the example below:

p {
  color: blue;
  width: 200px;
  border: 1px solid black;
}
Discussion