The Easiest Introduction To CSS
Tags: webdev, beginners, css, tutorial
Published: 2022-08-17 10:07:00

Here I'm back with the next topic in my [Web Development Intro](https://dev.to/sapinder_dev/web-development-the-static-fundamentals-6do) 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 <b>_Cascading Style Sheets_</b>. Cascading Style Sheets (CSS) is a [stylesheet](https://www.w3.org/TR/html401/present/styles.html) language used to describe the presentation of a document 
written in HTML or [XML](https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction). 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_.

## The Way CSS Works
The name _Cascading Style Sheets_ alone describes itself really well. The styles here are applied from top to bottom <b>_in the order they are defined_</b>, just like a cascading waterfall. **Any repeated style would override its previous corresponding values**, as in the following example.
```css
button {
  color: white;
}
/* The 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) and [Author Stylesheets](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#author_stylesheets). Let's discuss them individually:

1. **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.

{% codepen https://codepen.io/sapinder_dev/pen/RwMqzJZ %}

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

2. **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.

{% codepen https://codepen.io/sapinder_dev/pen/dyWXLoL %}

## How 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.
```html
<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](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) in the next article. Here's an example of inline style:
```html
<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:
```css
/* index.css */
body {
  background-color: aliceblue;
}
```
```html
<!-- index.html -->
<head>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
```

> The text between <code>/*</code> and <code>*/</code> is called a <b>_comment_</b> in css. The same goes for <code>&#x3C;!--</code> and <code>--&#x3E;</code> in html. A comment is made just for the reader to understand the code better, and it is ignored by the compiler. Here're some of the [best practices](https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/) that you should adopt while writing comments in any language.


## Elements 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.

### Selectors
In order to apply any styles to an HTML element, we need to use a <b>_selector_</b> that would select the target element. A [selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) is kind of an identifier that tells the browser what HTML element are the styles for. The simplest type of selector is the <b>_type selector_</b>, 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-
```css
/* The font-size will 16px for each of button, a, input and small elements  */
button, a, input, small {
  font-size: 16px;
}
```

#### Classes And IDs
Then we have <b>_class_</b> and <b>_id_</b> selectors. If you're unfamiliar with [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) and [id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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.

> The only major difference between <code>class</code> and <code>id</code> attributes is that an id is <b>_unique_</b> to an element, whereas multiple classes can be assigned to multiple elements; you can think of it as a many-to-many relationship. &#x1F605; For more details, you can read this [article](https://css-tricks.com/the-difference-between-id-and-class/) by [css-tricks](https://css-tricks.com).


**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-
```css
/* 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-
```css
/* This style would be applied the element that has the `btn` id assigned to it. */
#btn {
	color: red;
	text-align: center;
}
```

#### Attribute 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:
```css
/* 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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators), which are used to target specific elements based on their relationship to the surrounding elements. Take a look at the following snippet:
```css
/* 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:
1. **Descendant Combinator** - selects the any `p` element found inside the `body` element.
2. **Child Combinator** - selects only those `p` elements that are <b>_direct_</b> children of `body`. It doesn't select any
other descendant `p` elements in the heirarchy.
3. **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.
4. **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.


## Wrapping 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 **_follow me_** so you never miss any of my future posts! And you can also check me out on [Twitter](https://twitter.com/sapinder_dev), [Github](https://github.com/sapinder-pal) and [LinkedIn](https://www.linkedin.com/in/sapinder-singh/).

See you in the next one! 😉