css_basics.txt

the basic css syntax is 
    selector {
        property: value;
    }
can have many of this property-value pair defined which define many styles for a certain element
the selector is targeting

* is the universal selector which applies the styles specified by the property-value pair to 
all the html elements

to apply styles to all the elements of a certain type say p, we use the tag selector
    p {
        ...
    }

to apply styles to elements with a specific class name we use the . notation followed by the name
of the class, say if the class name was c1, then 
    .c1 {
        ...
    }

note: we can have more than one name for a certain element by using space so 
    <div class="c1 c2"></div>
here this ele has class names of c1 and c2 and any one can be refernced to call it 

ids work similar to classes but an element can have only 1 unique id name 

to apply styles to multiple elements, we mention them with comma in the selector
    .c1, .c2 {
        ...
    }
this is known as selector grouping 

if a ele has 2 class names say, and we want to specifically refer to it while other ele
have the same first class name, we say
    .c1.c2 {
        ...
    }
this is known as selector chaining, it cant be done when the selector is selecting just tags
so if an ele has both class and id say
    <div class="c1" id="i1"></div>
then to select this specific ele we use
    .c1#i1 {
        ...
    }

combinators allow us to combine multiple selectors differently than grouping or chaining them,
specifically the descendant combinator can be applied by just having a space in between 
so, 
    .c1 .c2 {}
means that select the ele with class c2 who is also a descendant of class c1
it doesnt matter how deep c2 is, it will be selected. Hence even if there are multiple class names
with c2 with varying levels of depth within c1, all of them will be selected 

if we have external css written, to link it to a html file we use the link tag
    <link rel="stylesheet" href="name.css">  
    the rel attribute specifies the relation between the html file and the linked file

for internal css, we mention the style tag within the head tag 

for inline css, we done mention the selector since that style is anyways applied to 
that element, so we just mention the style attribute

inline css always overrides the other css mentions

there are some units to values, say when we say 200px, px is the unit which indicates that 
it literally takes up 200 pixels 

vw is another such unit which indicates viewport, so 10vw means that that particular element 
takes up 10 percent of the window size

em is yet another unit where its relative to the font size of its element

css declarations which have the most specificity ie the incline ones will have more priority

similarly, specificity wise, for selectors, we get
    ID selectors
    Class selectors
    type selectors

if there are two declarations targeting the same ele's behaviour, and both of them have same 
specificity, then one with more number of selectors wins

    <div class="main">
    <div class="list" id="subsection">Red text on yellow background</div>
    </div>


    /* rule 1 */
    #subsection {
    background-color: yellow;
    color: blue;
    }

    /* rule 2 */
    .main #subsection {
    color: red;
    }

both have same specificity due to id being used for both, but since rule 2 have more number
of selectors being used, its selected, but just the color part gets overriden by rule 2, as only
that is common to both the declaration rules

    /* rule 1 */
    .class.second-class {
    font-size: 12px;
    }

    /* rule 2 */
    .class .second-class {
    font-size: 24px;
    }

here both have same specificity, just that one uses chaining, other descendant combinator, but
since rule 2 appears later, it overrides rule 1

also for non block elements in html we cant apply text formatting, these are the elements which
only take up one line of space. So to apply these styles to such ele we need to place it in a 
div block which is a block element

while looking at specificity, remember 
    id-class-type

so for .name {} it has a value of 0-1-0
and for p, div, h1 {} has a value of 0-0-3

hence .name has more specificity, since a higher order number is filled before even though
in the second case the lower order number is more in magnitude(which doesnt matter)

specificity is the artifcact if cascade of css where it is essentially how the browser displays
the css styles 

we looked at specificity between normal elements, but for types of **rules** which is the first
tier of cascade we have the order
    transitions

    !important, which is mentioned at the end of a declatation to make it go to the top of the
    cascade, egs 
        p {
            color: red !important;
        }
    this ensures that color property of this ele is at the top of the cascade

    animation

    normal

the second rule of specificity is
    website
    user
    browser

but for !important, the browser comes first and then website

then the third tier of cascade is already written beforehand, which is the specificiy of rules, 
but writing it again
    inline
    layers
    id
    class, attribute, pesudoclass
    type, pesudoelement

layers is something new where we define many layers of styles for an element, and a layer
wins if its applied later on 

    @layers one, two

    @layer one {
        body {color: red;}
    }

    @layer two {
        body {color: green;}
    }

in this case green color will be applied, instead of red since the second 

so for
    .paragraph:first-of-type {
    color: sandybrown;
    }

    and

    p.paragraph {
        color: orchid;
    }

rule 1 wins as it has (0-0-0-2-0) and rule 2 has (0-0-0-1-1)

rules defined later will win

now looking at chrome devtools

command+option+c gets us to elements page to inspect where we can see DOM, css 
command+option+j gets us to js console

looking at the box model now, every single thing on the webpage is a rectangular box which 
sits of diff locations on the website 

now things that go wihtin the box in the box model is 
    content(innermost)
    padding
    border
    margin(outermost)

margin is just used to introduce a separation between different box elements

margin between two close box elements are shared such that the gap between those two ele 
are the largest margin gap, whichever box element has it. Another way to see it is that 
margin collapses between two close box elements\