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".

By sheets I mean "Stylesheets" Which is basically like writing a bunch of custom CSS settings for text, backgrounds, image properties, etc. and saving it as one file, aka a "sheet" (custom.css) that you can apply to multiple web pages all with different content and layouts to achieve a cohesive style throughout your entire website.

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

https://createaprowebsite.com/website-color-schemes
OTHER HELPFUL VIDEOS
-----------------------------------------

How to Make a Website | STEP-BY-STEP 2020:
https://www.youtube.com/watch?v=hfglk7JsalM&t=15s

What is Web Hosting?
https://www.youtube.com/watch?v=H8oAvyqQwew&t=44s

What is WordPress?
https://www.youtube.com/watch?v=71EZb94AS1k

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

My Website :
https://createaprowebsite.com

Create a Pro Website Instagram:
https://www.instagram.com/createaprowebsite/

Create a Pro Website Facebook:
https://www.facebook.com/createaprowebsite/

Dale McManus Instagram:
https://instagram.com/dalemcmanus/

And don't forget to SUBSCRIBE to Create a Pro Website for more awesome website tutorials:
http://youtube.com/createaprowebsite?sub_confirmation=1

Видео What is CSS? And How It Works! канала Create a Pro Website