CSS for Beginners
Tags: css, selectors, beginners, cssselectors
Published: 2019-04-06 05:02:34

---
title: CSS for Beginners
published: true
description: Are you new to CSS? I got you covered. Read this post and watch the video given to get up to speed.
cover_image: https://cdn-images-1.medium.com/max/1600/0*rHLXPMyJ_11mDGhp
tags: css, selectors, beginners, css selectors
---
This post is going to give you a head start to know about CSS. How to approach it and how can you go into more details at your own.

The objectives are:
- What is CSS?
- What are the ways to use CSS?
- Syntax for writing the CSS
- Cascading order
- Frequently used selector cheat sheet.

### Cascading Style Sheet

So, what cascading means? “Cascading” in this context means choosing the css rules by cascading down the more general rules to the more specific rule required.

## What are the ways to use CSS?

In general, there are three ways of using CSS which is given below:

### 1. **External:** `<link>` tag inside `<head>` tag to use external CSS files.
```HTML
<link rel="stylesheet" href="styles.css">
```
### 2. **Internal:** `<style>` tag (mostly used in the `<head>` tag)
```HTML
<head>
    <style>
        /* styles goes here */
    </style>
</head>
```
> You might be wondering that why are we using `/* */` inside html. Because, in CSS, the comment works this way only. Whether you write CSS in external file with `.css` extension or inside the `<style>` tag.

### 3. **Inline:** using style attribute on HTML elements
```HTML
<div style="background-color: red;"></div>
```
Please note the `style="background-colour: red;"` text above. More properties can be added after semicolon.

## Syntax for writing CSS

There is only one syntax so you do not need to remember much of the things here. Below is the example given:
```CSS
Selector {
    property: value;
}
```
#### An explanation:
- `Selector` is the value which will determine which element the style need to be applied.
- `property` is the name of the style property to be used
- `value` here denotes the style value that a property should have which will be visible on the element with particular selector
- `;` denotes the end of that particular property/value pair and we can add another property/value pair after that
- Curly brackets denotes one block of style properties for the `Selector`

## Cascading Order
As I have explained earlier about cascading, here is the priority order when Cascading happens for selecting the rules:

- _Priority 1_: Inline styles
- _Priority 2_: External and Internal stylesheets
- _Priority 3_: Browser defaults

Important thing to note here is that if a style is defined with same priority, the last one has the highest priority. (Cascading rules)

## Frequently used selector cheat sheet
So, as we are coming to conclusion, here are the list of frequently used selectors. Please practice at your own pace and time.

> ## _No one is perfect in this world and No one knows everything. Take your time to learn but do not stop learning._

Here are the list:
- `*`
- `.class`
- `#id`
- `element`
- `element, element`
- `element > element`
- `element + element`
- `element element`
- `:hover`
- `:first-child`
- `:last-child`
- `!important` (avoid using it)

There is an accompanying video which explains the usage of these selectors. Here is the link and it is worth watching it to understand how these selectors is written and how it works.

{% youtube zynMOm1Mz5g %}

# Summary
That’s all.

I hope you have enjoyed this article and learned something out of it. If you like this post, I'll appreciate share and likes.

PS. Title photo by [_Sai Kiran Anagani_](https://unsplash.com/@_imkiran?utm_source=medium&utm_medium=referral) on [_Unsplash_](https://unsplash.com/)