What is CSS | CSS Explained For Beginners | Web Development Tutorial

 

What is CSS?

 

We will be talking about a very important constituent of web development and that is cascading style sheets or CSS in short so if any of your viewers are actually costume do web development coding you will know that web development is made up of three elemental files that is the HTML file the CSS file and the JavaScript file. 

 

Responsibility

 

Now while the HTML file and the JavaScript file are responsible for the templating and the dynamic elements respectively CSS is responsible for one thing and that is style so how does CSS actually govern the style well it does that by making sure how elements look like on a certain web page example their colors the font that is in there it also helps in the positioning of elements and it also does a little bit of animation.

 

Now why is CSS called cascading style sheets well it is mostly because CSS has three manners in which it Cascades the first is through elements so suppose we had written some CSS and we had attached it to a class called boxes and we had attached the styling of color equals blue so this will turn every element on the HTML file with the class boxes into blue.

 

Cascading

                  

 

Now this is how CSS is cascading it is applying the same style to multiple elements through the use of the dot boxes selector above that CSS cascades through another manner and that is multiple style and one element to explain this imagine our boxes had some font written in them and I want to turn the font of the first box yellow so for that I can choose the first box I can write some CSS that will make its font color yellow and then I can go ahead and apply it now it is important to understand what is happening here first of all the dot box is trialing is already being added to our first box out here.

 

Style

 

and the second style is being added to the first child of the box so in this way we have applied two different styles on one CSS adament with one sheet so that is the second way how CSS cascades.

 

 

Sheets

                      

 

now the third way how CSS cascade has something to do with the third word of the technology itself and that is sheets in our CSS stored in the form of a sheet in your local machine when you save it now this sheet might have some styling written in it and you can apply this sheet on multiple websites to achieve unique and different designs so as you guys can see if you attach the styling to a certain web page with the help of the link tag it produces a certain design element and this design element will actually differ from each and every website according to how things are style so that is how sheets are made to cascade through different websites now before this people would have to do inline styling so having a separate entity which handles your style kind of solves the problems that came with HTML in the beginning

 

 

Selectors

 

 

now let's talk about an important aspect of CSS and that is selectors so selectors is CSS is way of selecting different elements on an HTML page now the two ways you can actually select elements is through classes and ID's now if you remember my HTML tutorial you will know that there are certain special attributes that you can attach to any HTML element for example we are talking about classes and ID's so how are classes and ID's exactly used well as the name goes an ID is used to identify by a very unique element on an HTML page IDs cannot be shared and IDs have to be unique on the other hand a class can be added to multiple elements this I s for collective styling so as you guys can see we can add the same class to three different elements and it will apply the style that is there in the class to those three different elements in fact you can add multiple classes to the same element too to achieve a very unique styling now the classes are selected with the dot functionality while IDs are selected with the hash functionality so to select a class called button you would write dot button and then write your CSS and select an ID called submit you would write hash tag submit and then write your CSS in the curly braces.

 

Property and Value

 

 

 

now let's talk about property and value so this has something to do with how CSS is written in itself so imagine we have a web page and we want to turn the font color yellow so our CSS is written in a property and value fashioned out here the property being font color and the value being yellow now it's around this property and value with curly braces you add your selector and you have a style in fact you can add multiple types of properties and values into the same styling box to achieve a very unique look and feel so this sums up CSS.