HTML, CSS

A separation of concerns : HTML and CSS are
2 languages

HTML
    - Structure
    - Meaning (semantics)

    Audience for your web page
    - You
    - Your team
    - Public
    - Google (search)
    - Screen reader
    - Software tools (e.g. HTML5 Outliner)

    HTML 4.0.1

    BLOCK LEVEL elements

        - Create 1 column layout
        - Each element is on new line
        - 100% width of browser
        - Or 100% width of containing element

    <p>Hello</p>
    <div>
    <h1><h6>

    INLINE
        - Appear on the same line, i.e. no newline

    <p>Fred Bloggs won the <span>Nobel Prize</span> for Physics</p>

    Nested

    <section class="oscars">
        <section class="2014">
            <section class="best-director">
                <section class="Scorcese"></section>
                <section class="Spielberg"></section>
            </section>
        </section>
    </section>



CSS

    RULE-based stylesheet language

    Generalised description of what a CSS rule looks like:

    selector{
        property:value;
        property:value;
    }

    ==================================
    Select all paragraphs

    p{
        color:green;
    }
    ==================================

    Selects everything with a CLASS of oxford

    .oxford{}

    <div class="oxford">
    <p class="oxford">
    <h4 class="oxford">
    <section class="oxford">
    ==================================

    ID is for unique things

    #cambridge{}

    <p id="cambridge">
    ==================================

    Style something which is a special offer, and its also furniture

    <div class="offer furniture">
    <div class="furniture">

    <div class="offer food">
    <div class="food">
    ==================================

    CONTEXTUAL selectors
    Select something based on its relative position on the page (the DOM)

    <div class="offer">
        <section></section>
    </div>

    Something with a class of offer that CONTAINS a section
    .offer section{}

     ==================================

    ATTRIBUTE selectors

    Good way to add METADATA to your HTML

    Style with CSS
    Programmer can search for things with JS

    <p data-next="w-2015-au-offer-lipsy">Green skirt</p>

    BEGINS
    [data-next ^= "w-2015"] {}

    CONTAINS
    [data-next *= "au"] {}

    ENDS
    [data-next $= "lipsy"] {}

    EQUALS
    [data-next = "w-2015-au-offer-lipsy"] {}