Web Development Phase 3: CSS(Cascading Style Sheets)

So now as we are well versed with giving structure to your webpage/websites it’s now the perfect time where we will learn how to add styles to your webpages. 

Adding styles to your web pages is generally done using CSS (cascading styles sheets)

Now the question arises 

What is CSS?

CSS is a style sheet language. CSS is used for styling HTML elements, which makes our web page a little more interesting & attractive. 

Let’s see how …

Add this little part of code in the section of the html page and add a <h1> </h1> to the page. 

The resultant would look like this

Now let’s have a deeper look to the code we wrote above which resulted in this change.

Code Breakdown

This is how a css generally looks.

Here selector is used to select the element on which we want to apply styles and property is the style/feature we wish to change followed by value which are separated by : 

Now let’s discuss how we can add this css code to work with our HTML file 

Different Types of CSS

There are basically 3 ways in which we can add css to our HTML file :

1. Inline CSS
2. Internal CSS
3. External CSS

Inline Css: It the pretty basic way of adding css to our page. It is done by adding styles particularly inside each tag and it is generally not the preferred way.

Let’s see an eg:

Here css is written inside the style attribute

Internal Css: It the way of adding css to html within html file. All the Css is written <style> </style> block . For eg:

External Css: It is the most widely and preferred way of adding css to the HTML. In this css is written completely in a separate file with a .css extension and then that file is linked with HTML using <link> tag. For eg:

Now that we know about anatomy of css rule and ways of adding it let’s now look on types of selectors

Selectors in CSS

1. Id selector
2. Class selector
3. Tag selector
4. Grouping selectors

ID selector

Id Selector: Id selectors are used when we have to select one particular element in the HTML and add styles to that only. Ids are unique tokens given to any HTML element and these ids are used while giving style to that element.

Lets’ see how:

The above are the html and css files respectively.

Here in the HTML , we have given an id to h1 element and styles are added to that element by triggering it with #id-name

# is used to trigger id

Class Selector

Class Selector: class selectors are used when we have to give styles to a group of elements at a time. Class name is given to html element and then styles are added to them by triggering the class name.

Here class name is given to each paragraph and then styles are applied to them by triggering classes using .classname .

. is used for classes

Tag Selectors

Tag Selectors: Tag selectors are simply used when we have to any styles to all occurrence of that tag throughout the page . 

We have used tag selector in the very first eg where we have explained the anatomy of the css .

Grouping Selectors

Grouping Selectors: Grouping selectors are used when we have to add a particular style to a group of elements.

It is used  differently from class selectors as it is used where we have a style which needs to be common on various elements and the rest styles remain different . Let’s see how

Here line-height property is applied to both class and id by separating them with a ‘ , ’ 

Selectors can be grouped/chained  in many ways to target the desired element in HTML 

Here is a fun resource through which you can learn about chaining of selectors in a interactive way :

https://flukeout.github.io/

Well, that’s all for this article, we will take a deeper dive into css with our next article! Till then Stay Safe and Healthy and Happy Coding 😉

If you’re a beginner and have landed directly on this page, then we would recommend you to first go through our 1st article on web development, to start from the basics: https://www.meusec.com/dev/web-development-1/

Sometimes we include links to online retail stores and/or online campaigns. If you click on one and make a purchase we may receive a small commission.