What is CSS
as we all know CSS is a cascading style sheets it is a language that can make your webpages look tremendous and eye-catching it gives flexibility to the HTML elements to change their look.
we can write our CSS code in <head>tags with the help of <style> elements but it's not the right way to do it.
we can use separate files eg: style.css to write code and we can link this style sheet with your HTML doc using the link:CSS emmet extension.
through this link <link rel="stylesheet" href="style.css">
Selector
the selectors in CSS are used to target HTML elements on web pages that we want to style.
types of selectors
Universal selector
individual selector
class and ID selector
AND selector (chained)
Combined selector
inside an element
Direct child
Sibling ~ or +
Universal selector
A universal selector targets the whole web page at once. we use " * " to target
I selected the whole page and set the background color to #93cab9 and the color to #131131. "#" represents hexadecimal format to pic colors
Individual selector
An individual selector target's specific element that we want to style
I selected a specific element <p> and assigned a color
Eg:
as you see in the example I selected the <P> then it selected all p tags available on the web page. again I selected <li> and set a color we can only select one element at once to target.
Class and ID selectors
Class:
class indicates with Dot "." in style element and then we add an attribute called "class" in which element you want to target. in a class attribute, we assign a name to it whenever the class name wrote in a style sheet with Dot then the element will be selected. we can use a class with multiple elements with the same assigned name.
Eg
ID selector:
ID indicates with "#", in the style we use # to target specific elements in HTML with the help of the "ID" attribute. in ID we assign a unique name for each element we want to target it will work for similar ID names also but that's not the right way to do. for several use cases, the ID should be unique.
Eg:
AND selector:
the figure shown above says that there are two classes in each element tag. in the style tag I target the class with the name "spiderman ironman" and changed the background color, but in the <li> tag there is a class called "ironman" only, it won't be targeted. this is an OR case that's why the class which is "spiderman ironman" has been selected.
the figure shown above says that there are two classes in each element tag. in the style tag I target the class with the name " ironman" and changed the background color. in this case, both the element tags are targeted because the class name is similar as long as u not mentioned the "spiderman ironman" name the case will be "AND"
Combined selector:
we use COMMA "," to combine the targeted elements which have identical declarations.
Inside an element :
the title shows that the elements we wanted to target are inside an element, we just use space to target these elements. but there is only one element that will be selected inside an element. if multiple elements exist in one element this selector wouldn't apply.
Direct child:
In this selector we use ">" to make a selection of elements that are directly in the targeted element. if the targeted element has a direct element but there are more elements inside that direct element, in that case, those elements are not applied to the target. only the one element you targeted is selected.
Sibling:
we use either "~" or "+" to make a selection. if you select an element with a class the syntax will be (.class+element) which means this selector targets the element right next to the class element. only applies when these elements are inside one element.
Pseudo-classes::before::after
A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.we use colon ":" to select attribute.
Above the image, we can see the Before and after pseudo-class. I created a circle with color. I selected a class and used ":: before" to appear in the circle I created before the text I selected. without content or text, it won't appear . it's vice-versa for the ":: after" attribute. we can also use: hover. when you hover over the text the circle appears the cursor moves away it disappears.
I know a lot of mistakes in my overall article I'm trying to improve my skills thank you for your patience. if any correction is needed feel free to comment.