Back to Blog

CSS for Beginners

April 06, 2019
#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.

<link rel="stylesheet" href="styles.css">

2. Internal: <style> tag (mostly used in the <head> tag)

<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

<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:

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 on Unsplash

Anand Kumar
Manager at PublicisSapient
Back to Blog