live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
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