<!-- !
Inline CSS -->
It is the way of writing the css in same line.
for this we need style attribute .
<!--! Internal CSS : -->
it is the way of writing the css in same html file by
using <style> tag.
<!--? notes -->
when we will apply inline and internal css on same element.
inline css will be applyed.
<!--? syntax of selector -->
selectorName {
propertyName : value ;
propertyName : value;
.
.
.
propertyName:value
}
example :
p {
color:blue;
font-sixe: 20px;
}
<!-- ! external css -->
here we are writing our css code in separate css file.
for creating css file we need .css ext
then we have to link our css file with our html file.
for that we need <link> tag.
in <link> tag we have two attributes. (rel, href)
<link rel="stylesheet" href="./style.css">
<!--! Notes -->
if we apply inline, internal and external css on the
same element. the inline css will be applyed.
internal and external css has same priority. which one
will be at the end , that will be applyed.
<!-- ! Selectors -->
<!--? types : -->
1. Simple Selector
2. Combinator Selector
3. Pseudo Class Selector
4. Pseudo Element Selector
5. Attribute Selector
<!--! 1. Simple Selectors -->
TagName
Grouping (,)
Universal (*)
Id Name (#)
Class Name (.)
<!-- ? TagName: -->
○ To target the element based on tagname itself we
have to use
tagName selector.
○ The symbol was the tagname itself.
<!--? Grouping: -->
○ To target multiple elements at a time we have to use
a grouping
selector.
○ Whenever we need to pass similar properties for
multiple elements
we can use a grouping selector.
○ The symbol used to combine all elements is comma
(,)
<!--? Universal: -->
○ It will target all the elements in the document
including body tag too.
○ The symbol used is asterisk (*).
<!-- ? Id Name: -->
○ To target the elements uniquely we have to use an
id name.
○ In CSS id name can be duplicated also there is no
problem,
<!--! But once we moved to advanced languages,
Repetition of id name will not work. So it is highly
recommended not to use it from now on. -->
○ The Symbol used is hash (#).
<!-- ? Class Name: -->
○ To target the specific elements on the basis of
class name we have to
use class name.
○ Class attribute allows multiple identifier names in
the same attribute.
○ Class names can be repetitive also.
○ The symbol used is dot (.)
<!--! 2. Combinator Selector -->
It is a combination of 2 simple selectors.
Based on the relation b/w 2 elements the css will target
the elements.
They are:
1. Descendent Selector ( )
2. Direct Child Selector (>)
3. Adjacent Sibling Selector (+)
4. General Sibling Selector (~)
<!-- ? Descendent Selector: -->
○ It will target all the children, grandchildren , great
grandchildren and so on.
○ The symbol used is space ( ).
<!-- ? Direct Child Selector: -->
○ It will target only the children but not grandchildren
, great grandchildren and so on.
○ The symbol used is greater than ( > ).
<!--? Adjacent Sibling Selector: -->
○ It will target only the first sibling of the element.
○ The symbol used is plus ( + ).
<!-- ? General Sibling Selector: -->
○ It will target all the siblings of the element.
○ The symbol used is plus ( ~ ).
