CSS and How it works

Have you ever wondered what makes the websites, and social media platforms you visit presentable and easy to navigate or understand? Today I will be discussing a topic titled CSS (cascading style sheets). A fundamental constituent of web development. A modern-day website is made of three (3) elemental files.

1. HTML files

2. CSS files

3. JavaScript files

This article provides an overview of CSS (Cascading Style Sheets) and how it works. CSS is a language used to define the presentation of HTML and XML documents, and it allows developers to control the layout, typography, color, and other visual aspects of a website. The article explains the basic syntax of a CSS declaration, the use of selectors and declarations to target specific HTML elements, the advanced styling techniques supported by CSS, and the frameworks and pre-processors available to make CSS coding easier. Overall, the article emphasizes the importance of CSS in web design and its role in creating a visually appealing and user-friendly website.

How Does CSS Govern Styles?

CSS code consists of rules that specify how HTML elements should be displayed. A CSS rule is made up of a selector and a declaration block. The selector targets the HTML element(s) the rule applies to, while the declaration block specifies the properties and values that should be applied to those elements.

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

In this example, the selector h1 targets all the h1 elements in the HTML document. The declaration block contains two declarations: color and font size. The value color is,blue and the value of font-size is 24px. This rule will set the color of all h1 elements to blue and their font size to 24 pixels.

Selectors

Selectors are used to target specific HTML elements for styling. CSS has a wide range of selectors, including tag selectors, class selectors, ID selectors, attribute selectors, and more. Here are some examples:

/* Tag Selector */
p {
    font-size: 16px;
}

/* Class Selector */
.my-class {
    color: red;
}

/* ID Selector */
#my-id {
    background-color: yellow;
}

/* Attribute Selector */
a[href="https://www.example.com"] {
    text-decoration: none;
}

In these examples, we’re using different types of selectors to target HTML elements. The tag selector targets all p elements, the class selector targets elements with the class name my-class, the ID selector targets the element with the ID my-id, and the attribute selector targets an element with a href attribute that equals https://www.example.com.

Properties And Values

Once we have targeted an HTML element with a selector, we can use properties and values to define its style. CSS has a wide range of properties and values, including typography properties, color properties, layout properties, and more. Here are some examples:

/* Typography Properties */
h1 {
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

/* Color Properties */
.my-class {
    color: red;
    background-color: #eee;
}

/* Layout Properties */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

In these examples, we’re using properties and values to set the font family, weight, and case of h1 elements; the color and background color of elements with the class name my-class; and the layout of elements with the class name container.

Inheritance And Cascading

One of the key features of CSS is inheritance. When a property is set on a parent element, it can be inherited by its child elements. For example:

/* Parent Element */
div {
    font-size: 20px;
}

/* Child Element */
div p {
    color: blue;
}

In this example, the font-size property is set on the parent div element. This property is then inherited by the child p element, which is styled with a blue color.

Specificity Hierarchy

Another important concept in CSS is cascading. When multiple CSS rules apply to the same HTML element, the rules are combined in a specific order to determine the final style. The order of precedence is:

1. Inline styles:

Inline styles are styles that are applied directly to an HTML element using the style attribute. Inline styles override any styles that are defined in an external CSS file or a style block.

2. ID selectors:

ID selectors are used to target HTML elements that have a specific id attribute. ID selectors are preceded by a hash (#) symbol, followed by the id name. IDs must be unique within a web page

3. Class selectors, attribute selectors, and pseudo-classes:

Class selectors are used to target HTML elements that have a specific class name. Class selectors are preceded by a period (.), followed by the class name. Multiple elements can share the same class name.

Attribute selectors are used to target HTML elements that have a specific attribute. Attribute selectors are enclosed in square brackets, followed by the attribute name and optionally a value.

input[type="text"] {
    border: 1px solid black;
}

Pseudo-class selectors are used to target HTML elements in a specific state or condition. They are preceded by a colon (:).

a:hover {
    color: red;
}

4. Tag selectors:

Tag selectors are used to target HTML elements based on their tag names. Tag selectors are simply tag names without any prefixes or suffixes.

/* Rule 1 */
<h1 style="color: red;">This is a heading</h1>

/* Rule 2*/
h1 {
    color: blue;
}

/* Rule 3*/
#my-header {
    color: green;
}

/* Rule 4*/
.my-class {
    color: yellow;
}

In this example, we have four CSS rules that target the same h1 element.

The first rule uses an inline style and sets the color to red. The second rule uses a tag selector and sets the color to blue. The third rule uses an ID selector and sets the color to green. The fourth rule uses a class selector and sets the color to yellow.

When these rules are applied to an HTML document that contains an h1 element with an inline style, the ID my-header and the class my-class, the final color of the h1 the element will be red. This is because the first rule (Inline style) has a higher specificity than the other three rules (ID selector, tag selector, and class selector) and will override their styles although inline is not the best practice and should be avoided.

CSS Frameworks And Pre-processors

There are several popular frameworks and pre-processors available to make CSS coding easier and more efficient. Some of the most widely used ones include:

1. Bootstrap: Developed by Twitter. It is a responsive front-end framework that includes a set of pre-designed HTML, CSS, and JavaScript components. It is widely used for creating responsive, mobile-first websites and web applications. Bootstrap uses class names and HTML markup to define its styles.

2. Foundation: Another popular front-end framework, Foundation provides a responsive grid system, pre-designed UI components, and customizable styles. It is commonly used for building responsive websites and web applications.

3. Sass: Sass (Syntactically Awesome Style Sheets) is a pre-processor that allows developers to write CSS in a more efficient and organized way. It includes features such as variables, mixins, and nested rules, which can save time and make CSS code more readable and maintainable.

4. Less: Like Sass, Less is a pre-processor that extends the functionality of CSS with features such as variables, mixins, and nested rules. It is designed to be compatible with existing CSS code and can be easily integrated into existing projects.

Conclusion

CSS is a powerful language that allows web developers to create visually appealing and engaging websites. By using selectors, properties, values, and the concepts of inheritance and cascading, developers can create complex and dynamic styles that are efficient and easy to maintain. With the help of frameworks and pre-processors, CSS coding has become even easier and more efficient, allowing developers to focus on creating the best possible user experience.

I hope this article has thrown more light on your understanding of CSS and how it works and you have gained tremendous value.

Happy coding 😃!