Skip to main content

What is CSS?

Welcome to the world of CSS! CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the look and formatting of a document written in HTML or XML. It's like the 'paint' of your webpage, where HTML is the 'structure'.

Why is CSS important?​

CSS is essential for building web pages and web applications. It has a very crucial role in web design and development:

  1. Presentation: CSS helps you to set the layout, colors, and fonts. These are the primary aspects of a webpage, and CSS helps to control and apply these styles.

  2. Adaptability: CSS enables the presentation of HTML elements to be altered depending on screen size, device, or even the orientation.

  3. Efficiency: CSS allows for the re-use of code in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want.

CSS Syntax​

A CSS rule-set consists of a selector and a declaration block:

selector {
    property: value;
}

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

For instance, to change the color and the font-size of all the <h1> elements, you could write:

h1 {
    color: blue;
    font-size: 12px;
}

How to Add CSS​

There are three ways to insert CSS:

  1. External CSS: With an external style sheet, you can change the look of an entire website by changing just one file. Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

  2. Internal CSS: An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section.

  3. Inline CSS: An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element.

Conclusion​

Learning CSS is a must for anyone interested in web design and development. It's not just about making things look flashy, but about creating a user-friendly website that feels intuitive and is easy to navigate. This is just the introduction, as you delve deeper, you will come across various CSS properties, selectors, and much more!