Technology/Software Development/Web development/CSS

CSS (Cascading Style Sheets) is a styling language used to control the presentation and appearance of web pages. It works in conjunction with HTML to define how elements are displayed on a website. This article provides a beginner's introduction to CSS, covering its basic syntax, selectors, and commonly used properties.

CSS Syntax

CSS consists of a set of rules that define the styles for HTML elements. Each rule consists of a selector and a declaration block. The selector targets specific elements on the web page, while the declaration block contains the properties and their values.

A CSS rule is structured as follows:

selector {
   property: value;
   property: value;
   /* more properties */
}

For example, to change the color of all paragraphs to blue, you can use the following CSS rule:

p {
   color: blue;
}

CSS Selectors

CSS selectors determine which elements on the web page will be affected by the styles defined in the CSS rules. There are several types of selectors:

• Element Selector: Targets elements based on their tag name. For example, to style all paragraphs, use p as the selector.

• Class Selector: Targets elements with a specific class attribute. The class selector is denoted by a dot (.) followed by the class name. For example, to style all elements with the class "highlight", use .highlight as the selector.

• ID Selector: Targets a specific element with a unique ID attribute. The ID selector is denoted by a hash (#) followed by the ID name. For example, to style an element with the ID "header", use #header as the selector.

• Descendant Selector: Targets elements that are descendants of another element. It is denoted by a space between selectors. For example, to style all list items inside an unordered list, use ul li as the selector.

• Pseudo-class Selector: Targets elements based on a specific state or condition. Pseudo-classes are denoted by a colon (:) followed by the pseudo-class name. For example, to style a link when it is hovered over by the cursor, use a:hover as the selector.

CSS Properties and Values

CSS properties define the specific aspect of an element's appearance that you want to style. Each property is followed by a colon (:) and its corresponding value.

Here are a few commonly used CSS properties and their values:

• color: Specifies the color of the text. Values can be color names, hexadecimal codes, or RGB values.
• font-size: Specifies the size of the text. Values can be in pixels (px), points (pt), or percentages (%).
• background-color: Specifies the background color of an element.
• margin: Sets the margin around an element, controlling its spacing from other elements.
• padding: Sets the padding within an element, controlling the space between the element's content and its border.

CSS Comments

CSS comments are used to add explanatory notes or to temporarily disable a section of code. Comments are not rendered on the web page and are only visible in the CSS source code.

Comments in CSS are written inside the /* and */ symbols. Anything between these symbols is considered a comment.

For example:

/* This is a comment. */

Conclusion

CSS is a powerful tool that allows web developers to control the appearance of HTML elements. By understanding the basic syntax, selectors, properties, and values, beginners can start customizing the look and feel of their web pages. With practice and experimentation, CSS opens up a wide range of possibilities to create visually appealing and engaging websites.

For a deeper dive on CSS we recommend the MDN docs here - https://developer.mozilla.org/en-US/docs/Learn/CSS

---

Next article - JavaScript