What is CSS? And How It Works!

Published: 30 April 2020
on channel: Create a Pro Website
119,929
4.6k

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


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

How to Make a Website | STEP-BY-STEP 2020:
   • How to Make a WordPress Website | 202...  

What is Web Hosting?
   • What is Web Hosting and How Does It W...  

What is WordPress?
   • What is WordPress? And How Does It Wo...  

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

My Website :
https://createaprowebsite.com

Create a Pro Website Instagram:
  / createaprowebsite  

Create a Pro Website Facebook:
  / createaprowebsite  

Dale McManus Instagram:
  / dalemcmanus  

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


Watch video What is CSS? And How It Works! online without registration, duration hours minute second in high quality. This video was added by user Create a Pro Website 30 April 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 119,92 once and liked it 4.6 thousand people.