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 :
- Inline CSS
- Internal CSS
- 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
- Id selector
- Class selector
- Tag selector
- 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 :
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.
Comments:
3 replies on “Web Development Phase 3: CSS(Cascading Style Sheets)”
I am now not certain where you are getting your information, however great topic. I needs to spend some time finding out much more or working out more. Thanks for wonderful info I was in search of this information for my mission.
Thanks mate, happy to help.
I was suggested this blog by my
cousin. I am not sure whether this post is written by
him as no one else know such detailed about my difficulty.
You are amazing! Thanks!