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
-----------------------------------------
createaprowebsite.com/website...
OTHER HELPFUL VIDEOS
-----------------------------------------
How to Make a Website | STEP-BY-STEP 2020:
• How to Make a WordPres...
What is Web Hosting?
• What is Web Hosting an...
What is WordPress?
• What is WordPress? And...
FOLLOW & CONNECT WITH US
--------------------------------------------------
My Website :
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:
ru-vid.com?...
12 июл 2024
