What is CSS and How it Works Mini Crash Course in Whiteboard Explainer Video For Beginners
Jan 9, 2025
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
hello guys welcome to this video so in
0:02
this video we'll be talking about what
0:03
is CSS in this Whiteboard video how it
0:05
works so first of all CSS full form is
0:07
Cas guiding stylesheets it stands for
0:10
Cas guiding stylesheet
0:14
the web pages that you SC on your screen
0:17
using HTML and who invented CSS so norb
0:21
scientists in 1994 hack only invented
0:26
CSS and now we will see the syntax of
0:29
CSS how to include them inside the web
0:31
pages so the question comes how to
0:33
include this so there are two ways
0:34
either we can include this using this
0:36
link tag we can directly reference
0:38
style. CSS or we can use the style tag
0:41
inside that we can declare our CSS so
0:43
here we can declare all your Styles so
0:47
the syntax of CSS is basically the
0:49
property here you write the property you
0:51
target the actual tag and then color is
0:54
actually the property and blue is the
0:56
actual value so here H1 refers to the
0:59
selector
1:00
color is the property and blue is the
1:02
actual value so in this way you the
1:05
syntax of CSS selectors basically way to
1:09
Target the HTML which is there in the so
1:13
we target the
1:15
elements types of is ID class selector
1:20
and third is the universal selector ID
1:23
is denoted by hash classes by Dot and
1:26
Universal by this symbol and now we be
1:30
looking at an example of each of these
1:31
selectors so we actually have this
1:33
markup where we given the ID class so
1:37
these are just names it can be anything
1:40
you can give any names of your choice
1:42
and then you will look at a slight
1:44
difference between ID and class class as
1:46
you all know guys it can be given
1:48
multiple classes can be given to
1:50
multiple elements but IDs are unique you
1:52
can't give duplicate ID so these are the
1:55
two slight differences between classes
1:57
and IDs so key points to remember about
2:00
selectors same class names can be to M
2:03
element multiple classes can be attached
2:05
to HTML element but IDs must be unique
2:09
so one ID can only be given to one
2:11
element only so you can't give duplicate
2:14
IDs these are the contrast differences
2:17
between the selectors of ID and classes
2:19
and now we'll be looking at a four
2:21
example of a selector so we have class
2:24
we have an ID here side by side we
2:27
have we written these CSS rules right
2:30
here so we have the hash symbol and the
2:32
dot symbol for class and ID you can just
2:35
see the difference right here in this
2:37
animation so we have class and ID
2:39
selector and we can even give inline
2:42
Styles as well we can have a style
2:44
attribute attached to a HTML element and
2:46
inside the style attribute we can
2:48
actually have Define our CSS properties
2:51
one by one using just separated by
2:54
semicolon so we have given two
2:55
properties here color and margin so you
2:58
can attach inline CSS as well and then
3:01
we also have an element selector you can
3:03
directly Target HTML Elements by you can
3:05
individually Target multiple Elements by
3:07
putting a comma right here so we are
3:09
targeting paragraph and heading at the
3:11
same time so this is validate syntax you
3:13
can Target this using element selector
3:16
which is used very much and then we also
3:19
have comments you can even declare
3:21
comments inside your CSS code you this
3:23
is actually the syntax here you can have
3:25
the CSS comments as well and then we
3:29
have the universe selector let's suppose
3:30
you want to apply some properties to all
3:32
the elements in the page then you can
3:34
use this Universal selector so it
3:36
actually targets all the elements at
3:38
once you don't need to write this for
3:41
every element it targets all the
3:43
elements as once and then we have some
3:45
Advance selectors which is the child
3:47
selector it actually targets all the
3:49
paragraphs which are present inside this
3:51
div so it is actually called as child
3:53
selector so you can see all the
3:55
paragraphs which will be present inside
3:57
this div will be targeted now we come to
3:59
to the import operator import operator
4:02
can be used to actually include other
4:05
stylesheet in other CSS files so this
4:07
import statement can be used to import
4:09
other CSS files and we have the media
4:13
queries as well for responsive web
4:14
design so we can Target multiple screen
4:17
devices such as mobile and laptop at the
4:19
same time using this uh media operator
4:22
in CSS so you can do this to Target
4:26
responsive design to Target multiple
4:28
devices
4:30
and then we can even declare variables
4:31
as well as opposed to many programming
4:34
languages so in CSS also you can use the
4:36
V keyword so we can actually declare the
4:39
variables these names can be anything so
4:42
we have declared the color names now we
4:44
can reference these variables at
4:46
multiple locations whenever we are
4:48
declaring the CSS using this V keyword
4:51
you can see that so we are just
4:53
declaring these variables at multiple
4:55
locations we are referencing it so this
4:57
will save you a lot of time
5:00
so now we come to the top CSS Frameworks
5:03
you have known bootstrap Tailwind CSS
5:06
Bulma CSS and semantic UI so these are
5:09
the top CSS Frameworks that are there in
5:11
the
5:12
market and uh these are the top C so
5:16
thank you very much guys for watching
5:17
this video and I will
#Programming
#Internet & Telecom
#Web Design & Development
#Skins, Themes & Wallpapers
