Cascading Style Sheets

17 Aug 2022

Here I'm back with the next topic in my Web Development Intro series, where I introduce to you the fundamentals of web development; and clarify some of the core concepts that ain't easy enough for beginners to grasp.

So in this article, we're going to learn about CSS, which stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. Basically, it describes the styling properties of elements inside a document.

Think of a web page like a room in your house. If you never painted the walls, windows and doors of that room, you would find it to be too boring to sit in. However, if you paint and decorate the room, the same room will attract you much more than before. This is true for web pages too. A web page without CSS is too boring (or even hard) to be able to convey information to the reader. And it's not just about colors; it also defines the layouts, positions, transitions, animations, and much more.

Link to this headingThe Way CSS Works

The name Cascading Style Sheets alone describes itself really well. The styles here are applied from top to bottom in the order they are defined, just like a cascading waterfall. Any repeated style would override its previous corresponding values, as in the following example.

button {
  color: white;
}
/* The style below will override the value 'white' for property 'color' */
button {
  color: black;
}

These styles come from different origins, also known as stylesheets. There're mainly two types of stylesheets that are applied to a web page- User Agent Stylesheets and Author Stylesheets. Let's discuss them individually:

User Agent Stylesheets - These stylesheets are applied by the browsers to give default styles to a document. The styles often differ slightly across different browsers. For example, the button below has no custom styles, and uses the default styles from user agent stylesheets used by your current browser.

Try opening this page in a different browser, and you would see this button with slightly different styles.

Author Stylesheets - These are the stylesheets that are used by web developers to apply custom styles to a document. The author stylesheets have higher preference over user agent stylesheets. For example, the following button uses the custom styles that I provided, which overrode the styles from user agent stylesheet.

Link to this headingHow Do We Actually Use CSS In A Web Page?

We have 3 ways to use CSS in a web page. Let's take a look at each of them:

Internal CSS - We can declare the styles using the <style> tag anywhere inside the HTML document but the thing to note is that these styles are not applied to elements that come before the <style> tag because those elements will get parsed before this tag while rendering the web page. For this reason, this tag is often declared before any other element inside the body.
```
<body>
  <style>
    button {
      color: black;
    }
  </style>
</body>
```
Inline CSS - We can also declare style for an element by providing the style attribute to it. Inline styles have the highest preference over any other styles. We'll actually discuss about something known as specificity in the next article. Here's an example of inline style:
```
<body style="background-color: aliceblue;">
  Hi! I'm a button
</body>
```
External CSS - The last and most efficient way to declare CSS in large projects is using external .css files. We declare the styles in different .css files, and link them in the HTML document using link tag. Below is an example:
```
/* index.css */
body {
  background-color: aliceblue;
}
```
```

<head>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
```

Link to this headingElements of Style Declaration

So, now that we can link our stylesheets to HTML document, it's time to know how to actually write these stylesheets. Any style declaration consists of 2 parts- selector(s) and property-value pairs. Each pair of property and value must be separated by a semicolon at the end of the line. You've already seen property-value pairs; hence, I want you to focus on just the selectors for now.

Link to this headingSelectors

In order to apply any styles to an HTML element, we need to use a selector that would select the target element. A selector is kind of an identifier that tells the browser what HTML element are the styles for. The simplest type of selector is the type selector, i.e., the name of the element itself. We can, in fact, use a list of selectors if we want to declare the same styles for multiple elements. An example could be-

/* The font-size will be 16px for each of button, a, input and small elements  */
button, a, input, small {
  font-size: 16px;
}

Link to this headingClasses And IDs

Then we have class and id selectors. If you're unfamiliar with class and id attributes in HTML- the values given to class and id attributes provide us a way to identify an HTML element when making a JavaScript query, or specifying CSS styles for that element.

In most cases, using class selectors is preferred than using id selectors for a reason that we would discuss in the next article. A class selector must begin with a . character; for example-

/* This style would be applied to any elements that have the `txt` class assigned to them. */
.txt {
  color: red;
  text-align: center;
}

An id selector must begin with a # character; for example-

/* This style would be applied the element that has the `btn` id assigned to it. */
#btn {
	color: red;
	text-align: center;
}

Link to this headingAttribute Selectors And Combinators

Now come the attribute selectors, which basically select the elements that have the specified attributes in their HTML. HTML attributes can be in the form key="value" or just key depending on the type of attribute. For example:

/* this style will apply to anchors pointing to "https://developer.mozilla.org" */
a[href="https://developer.mozilla.org"] {
	text-decoration: underline;
}

/* this style will apply to only those buttons that have the `btn` class and have the `disabled` attribute. */
.btn[disabled] {
	background-color: grey;
}

Next, we have combinators, which are used to target specific elements based on their relationship to the surrounding elements. Take a look at the following snippet:

/* 1. Descendant Combinator */
body p {}

/* 2. Child Combinator */
body > p {}

/* 3. Adjacent Sibling Combinator */
h1 + p {}

/* 4. General Sibling Combinator */
h1 ~ p {}

These are the only four combinators available in CSS. Here's what each of the selectors are supposed to do in the snippet above:

Descendant Combinator - selects the any p element found inside the body element.
Child Combinator - selects only those p elements that are direct children of body. It doesn't select any other descendant p elements in the heirarchy.
Adjacent Sibling Combinator - selects a p element that is a sibling of h1 element, and comes right next to it, i.e., is an adjacent sibling.
General Sibling Combinator - selects any p element that is a sibling of an h1; it doesn't matter if it's adjacent to h1, or not.

Link to this headingWrapping Up

Alright, so we now know how CSS works, how we can use stylesheets in HTML, and the type of selectors that we have in CSS. In the next article, we will learn some of the advanced concepts that newcomers struggle with a lot. If you enjoyed reading this article, be sure to join my mailing list so you never miss any of my future posts! Also, please mind pressing the Like button to let me know that this article was helpful to you!

See you in the next one! 😉