In [1]:

    

from nbfiddle import Fiddle


    

In [4]:

    

# 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>
"""
    

)


    

    
Out[4]:





    
My First CSS Example
This is a paragraph.

In [5]:

    

# 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>
    
    """,

)


    

    
Out[5]:





    
The Old Way - using float

Floating box
Floating box
Floating box
Floating box
Floating box
Floating box
Floating box
Floating box

Another box, after the floating boxes...
    
    

In [13]:

    

# 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,)
    
)


    

    
Out[13]:





    
    
    

In [34]:

    

%%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>


    

    










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.



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.

In [52]:

    

# 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;
    }
    """
)


    

    
Out[52]:





    
    
HELLO
    
HELLO
    

In [67]:

    

# 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;
}
    """
)


    

    
Out[67]:





    
p.inline
p.inline
span.block
span.block
none
    

In [ ]: