Introduction to CSS

CSS stands for Cascading Style Sheets. It is a stylesheet language used for describing the presentation of a document written in a markup language.

It is used to control the layout and formatting of HTML and XML documents, including the colors, fonts, and spacing of elements.

CSS allows developers to separate the presentation of a website from its structure and content, making it easier to maintain and update.

Why Use CSS?

There are several reasons why CSS is used in web development:

Separation of Concerns:

By using CSS, the presentation and layout of a website can be separated from the structure and content. This makes it easier to maintain and update, as changes to the layout or design do not require changes to the underlying HTML.

Consistency and Reusability:

CSS allows developers to create consistent layouts and designs across multiple pages and even multiple websites. Styles can be reused and applied to multiple elements, reducing the amount of code that needs to be written.

Accessibility:

CSS can be used to improve the accessibility of a website for users with disabilities by providing alternative styles for different devices or users.

Responsiveness:

CSS can be used to create responsive designs that automatically adjust to different screen sizes, making websites more usable on a wide range of devices.

Performance:

CSS can be used to optimize the performance of a website by reducing the amount of code that needs to be downloaded, and by controlling the way elements are rendered.

CSS Syntax

CSS syntax is the structure of a CSS rule-set. A rule-set consists of a selector and a declaration block.

The selector is used to select the HTML element(s) that you want to style.

For example, the following selector selects all <p> elements:

p { 
    /* declarations go here */
}

The declaration block is made up of one or more declarations, each consisting of a property and a value. Each declaration is separated by a semicolon, and the entire block is enclosed in curly braces.

For example, the following CSS sets the color of all <p> elements to blue:

p { 
    color: blue;
}

Multiple selectors can be grouped together to apply the same styles to multiple elements, like:

h1, h2, h3 { 
    color: blue;
}

You can also use CSS preprocessors such as SASS and LESS, they have their own syntax but they get converted to regular CSS by the browser.

CSS selector

A CSS selector is a pattern used to select the element(s) in an HTML or XML document that you want to style. The selector can be an HTML tag, a class, an id, or a combination of these.

For example, the following CSS rule-set selects all <p> elements and sets their color to blue:

p { 
    color: blue;
}

You can also select elements by class and id, classes are defined by a dot . before the class name and ids are defined by a # before the id name:

.my-class { 
    color: blue;
}
#my-id { 
    color: blue;
}

You can also use multiple selectors to apply the same styles to multiple elements. For example, the following CSS selects all <p> and <h1> elements and sets their color to blue:

p, h1 { 
    color: blue;
}

You can also use descendant selectors to select elements that are nested inside other elements, like:

#my-id p {
    color: blue;
}

CSS also allows you to use attribute selectors, pseudo-classes and pseudo-elements, which can be used to select elements based on their attributes, state, or position within the document.

The capabilities of CSS selectors are broad, and the more complex selectors you use the more specific your styling will be.

Comments

In CSS, comments can be used to add notes or documentation to the code. Comments are ignored by the browser and do not affect the rendering of the page.

To add a comment in CSS, you start the comment with /* and end it with */. Anything between these characters will be ignored by the browser.

For example:

/* This is a comment */
p { 
    color: blue;
}

You can also place comments on multiple lines:

/* This is a 
multi-line 
comment */
p { 
    color: blue;
}

You can also use comments to disable certain CSS rules temporarily, this can be helpful when you are testing different styles or troubleshooting issues.

/*p { 
    color: blue;
}*/

It's a good practice to use comments to describe what a section of CSS code does, what it's purpose is and who created it. This will help others who are working on the project understand the code better, also it will make it easier for you to find the code you need when you come back to it later.

CSS Basics