Styling with CSS - Part 2 - Selectors Video Lecture - IT & Software

welcome to the w3schools CSS selector
tutorial CSS selectors allow you to
select and style HTML elements selectors
are used to find elements based on their
ID classes types attributes values of
attributes and much more let's go
through the most common selectors the
element selector selects elements based
on the element name this is the CSS
selector it is set to P a means it will
select all P elements on the page like
this so it Styles all P elements to be
center-aligned and have a red color well
if we add another element that is not a
P element it will not be affected by the
style see this div element was not
affected by the style the ID selector
uses the ID attribute of an HTML element
to find the specific element an ID
should be unique within a page so you
should use the ID selector when you want
to find a single unique element define
an element with a specific ID use a hash
character followed by the ID of the
element so this style rule will be
applied to the HTML element with ID
equals power 1 if we add an ID to the
second element
and change the selector to match new ID
the other element will be affected by
the style like this the class selector
finds element with a specific class set
by the HTML class attribute to select
elements with a specific class use a
period character followed by the name of
the class so this style will be applied
to HTML elements with class equals
Center or you can specify the only
specific HTML elements should be
affected by a class by including the
element name so we set P parent Center
only P elements with class equals Center
will be affected like this you can also
add multiple classes to an element so if
we create a separate style row for color
see now we have a style rule for Center
and a style group for color and remove
the element selector and add a second
class to the h1 element see both
elements are affected by the Center
style rule but only the h1 is affected
by the color style rule since it has
class equal center and color
in stylesheets there are often elements
using the same style for example here we
have the same style for the h1 h2 and P
element to minimize the code you can
group selectors to group selectors
separate each selector with a comma here
we have grouped selectors for h1 h2 and
P elements so the style is applied to h1
h2 and P elements this works with all
kinds of selectors so if we removed the
h2 and P element selectors and add an ID
to the P element so we can group
selectors for h1 and elements with IP
para 1
so this works with any kind of selector
element selectors ID selectors class
selector or any other selector this
concludes our tutorial for CSS selectors
thank you for watching