What is CSS? And How It Works!

If you've ever made a website before, you've likely come across the word CSS. But what the heck is it? Well in this video I answer the question of What Is CSS? And explain how it works!

A modern day website is made up of 3 different files, or codes, which are:
1. HTML = Structure
2. Javascript = Behavior
3. CSS = Appearance & Style

CSS is short for "Cascading Style Sheet".

It helps determine things like colors, fonts, the positioning of certain elements, and even a little bit of animation.

Now the first word is Cascading, what does this mean?

Well let's keep it simple and say you have a website that is made up of 3 sections, each containing some heading text. Now let's say you assign all these texts to have a class of "Heading 2" aka "h2" and you want them to be Open Sans font.

Well you can write a bit of code that will change all of them at once throughout you entire website. This is why it's called Cascading. And you can also assign multiple values to these elements such a font size, color, weight, and more.

Example:
h2 {
font-family: "Open Sans";
font-size: 32px;
color: blue;
font-weight: bold;
}

And it's not just for text. Any visual element on your site such as backgrounds, boxes, headers, footers, images, and so on can all be altered with simple CSS.

So the next word is "style" which makes perfect sense already since CSS alters the style of your website.

So let's move on to the third word which is "Sheets".

Now one more important part about CSS is called "selectors."

And selectors are what you use to identify certain elements on your website. And you have "class" and you have "id".

So what's the difference?

Well to put it simply, a class is used to identify multiple elements on your website so you change the style of all of those elements at once. And this is indicated with a dot function
Example:
.body

While an id is given to one specific element on your website and is unique to that element and cannot be used elsewhere. This is indicated by a # function and is used in order for you to change that one element specifically without affecting anything else.

Example: #header

RELATED BLOG POST
-----------------------------------------

OTHER HELPFUL VIDEOS
-----------------------------------------

How to Make a Website | STEP-BY-STEP 2020:

What is Web Hosting?

What is WordPress?

FOLLOW & CONNECT WITH US
--------------------------------------------------

My Website :

Create a Pro Website Instagram:

Create a Pro Website Facebook:

Dale McManus Instagram:

And don't forget to SUBSCRIBE to Create a Pro Website for more awesome website tutorials:

[AlejoYT]

This was actually education made simple and enjoyable. Thank you Sir.

[skysummer]

You're amazing! Best explainer hands down! Thank you so much for putting the time in for us! Love you for it!!!

[victortruong]

I luv those animation in the video ! Many channels just talk and talk with the css code screen !!

This video is dope, keep it going man !!

[iaamsimi]

Thank you very much for all the information very summarized and so easy to understand, it is very difficult to find such information as simple as you explain it in other places.
Thank you very much!

[falahahmed]

Waiting for a complete 60 minute lecture on css ;)

[yuriyse]

This is a best understandable explanation. I spent a lot of time to understand why need css. Your explanation in 3 minutes. Thank you

[SamarPhotos]

I really enjoyed this video. Now I'm Clear About CSS. Great Job Buddy

[debbiedavila]

Wow! You really are fantastic at explaining and simply simplifying this. I so appreciate you! THANK YOU!

[cristiano]

Thank you very much, this is the best explanation on the topic, which I found on the internet. Great job!

[alltuffgoods]

i found you through the suggested videos. First your videos are very informative. Ijust made a youtube channel so i'm definitely doing my research. thanks for all your help. please keep it up! just subbed

[Rog]

Great video, simple to the point explanation... and lots of value...

[AlainGuillot]

Thank you. If want to start learning about CSS, what's a good place to start?
Also, can you explain HTML in another video?
And Javascript?

[maxicupcake]

I would like to thank you for answering a question/s about such topics. I would not find a clear answer on google or somewhere else. Thank you!

[omagachinyere]

Great videos Dani, I love that well done!!!

[vijayas]

Very good simple, short and crisp...Not a developer but good for me..thanks

[HikingFeral]

Thank you, I am trying to prepare for me Dip-HE in Software Development and just love all coding in general so this was a nice little video for me

[ThatCapeCodGuy]

Wow! I can understand you. Checking out your channel now and seeing if the rest are good.

[mikkimash]

OMG, a little off topic but YOUR EYES ARE SO BLUE!!!

[ljudy]

Great! Now we could jump in to make some style changes to an existing WP page. I am curious how to select and customize that. Cheers!

[abdullahayub]

Can you please made a one video on how to make a site with CSS, please