Lists HTML

 Ol order list 

Ul unorder list 

Structure HTML 

Inheritance 

Means selected container rules apply to descendants 

Cascading Style sheets 

Multiple rules can be applied to the same element

The order matters

Specificity 

Means More selector's rule wins over less specific selector 

The CSS Box Model 

different parts of elements each element its around different parts 

The CSS box model 

content 

the padding is in the space. the content gets between the content itself. the borders of our box 

border 

content padding

HTML 

Using the CSS Box Model 

Adding Structure to a Webpage 

body 

h1   header 

ol 

li    main element, information on a website 

p   footer 

body 

Additional selectors 

Theory & selectors

Selectors       css                                                          Combinators 

Type               elementname                               Descendant   li p              all with li as the ancestor 

ID                  ·#id  unique 1                          Child     h2 > p        Only p which are direct children of h2 

Group            elementname,                         

                      elementname

Class            .class multiplies 

Understanding classes 

Block vs inline elements 

<P> This is a block element  ocupe the entire space 

<p> this<a>link is an inline element </a> nested into a block element </p>

New line  

                                     Block 

Full width   

 Common inline elements 

<a> Link to other website/page of current website 

<button> clickable button to submit forms

<img> Embled image into HTML page 

<span> Non semantic inline container to mark-up text