from nbfiddle import Fiddle

# http://www.w3schools.com/css/tryit.asp?filename=trycss_default

Fiddle(

div_css = """

background-color: #d0e4fe;

h1 {
    color: orange;
    text-align: center;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}

""",
    
html = """
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
"""
    

)

# http://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_old

Fiddle(

    div_css = """
.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

.after-box {
    clear: left;
    border: 3px solid red;      
}    
    
    """,

    html = """
<h2>The Old Way - using float</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>
    
    """,

)

"""
Explanation: Let me work through CSS Tutorial, while consulting Cascading Style Sheets - Wikipedia, the free encyclopedia.
CSS as a collection of:

selectors, attributes, values

Some important CSS attributes:

color
background-color
End of explanation
"""


# using normalize.css
normalize_css_url = "http://yui.yahooapis.com/3.18.0/build/cssnormalize-context/cssnormalize-context-min.css"

Fiddle(
    
    html = """
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/W3C_and_Internet_Explorer_box_models.svg/600px-W3C_and_Internet_Explorer_box_models.svg.png"/ style="width:300px">
    """,
    
    csslibs = (normalize_css_url,)
    
)

"""
Explanation: Box model
CSS box model - Wikipedia, the free encyclopedia
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/W3C_and_Internet_Explorer_box_models.svg/600px-W3C_and_Internet_Explorer_box_models.svg.png"/ style="width:300px">
End of explanation
"""


%%html

<style>
</style>

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Johann_Sebastian_Bach.jpg" style="width: 200px; padding:5px; float:left;">

<p>Johann Sebastian Bach (31 March [O.S. 21 March] 1685 – 28 July 1750) was a German composer and musician 
of the Baroque period. He enriched established German styles through his skill in counterpoint, 
harmonic and motivic organisation, and the adaptation of rhythms, forms, and textures from abroad, 
particularly from Italy and France. Bach's compositions include the Brandenburg Concertos, the Goldberg 
Variations, the Mass in B minor, two Passions, and over three hundred cantatas of which around two hundred survive. 
His music is revered for its technical command, artistic beauty, and intellectual depth.<p>


<p style="clear: right;">Bach's abilities as an organist were highly respected during his lifetime, 
although he was not widely recognised as a great composer until a revival of interest and performances 
of his music in the first half of the 19th century. He is now generally regarded as one of the greatest 
composers of all time.</p>



"""
Explanation: Basic exercise: flowing text around images
End of explanation
"""


# box-sizing

Fiddle(
    html = """
    <div class="box-sizing-content-box">HELLO</div>
    <div class="box-sizing-border-box">HELLO</div>
    """,
    div_css = """
    .box-sizing-content-box {
      box-sizing: content-box;
      width: 200px;
      padding: 30px;
      border: 5px solid red;
    }
    .box-sizing-border-box {
      box-sizing: border-box;
      width: 200px;
      padding: 30px;
      border: 5px solid blue;
    }
    """
)

# display:  block, inline, none

Fiddle(
    html = """
<p class="inline">p.inline</p>
<p class="inline">p.inline</p>
<span class="block">span.block</span>
<span class="block">span.block</span>
<div class="none">none</div>
    """,
    
    div_css = """
p.inline {
    display: inline;
}
span.block {
    display: block;
}
div.none {
    display: none;
}
    """
)

"""
Explanation: box-sizing
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

content-box:    Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included
border-box: The width and height properties (and min/max properties) includes content, padding and border, but not the margin
End of explanation
"""


