CSS

Constructing a Photo Album

Posted on

In this example we use the W3.CSS Responsive Grid system to create a photo album that looks good on all devices. You will learn more about this later. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”> <body> <div class=”w3-container w3-teal”> <h1>Summer 2015</h1> </div> <div class=”w3-row-padding w3-margin-top”> <div class=”w3-third”> <div class=”w3-card”> <img src=”img_5terre.jpg” […]

CSS

Quotes

Posted on

  Using HTML Symbols You can use standard HTML symbols instead of ampersands: Symbol Code ≪ #8810 ✂ #9986 ❝ #10077 ❞ #10078 ❠ #10080 ✔ #10004   <div class=”w3-panel w3-light-grey”> <span style=”font-size:100px;line-height:0.6em”>✂&#9986 &#8810</span> <p class=”w3-xlarge”><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper.</i></p> </div>   Quotes with Font […]

CSS

Notes

Posted on

<div class=”w3-container”> <h2>Displaying Notes</h2> <p>The w3-panel class can be used to display all sorts of notes:</p> <div class=”w3-panel w3-yellow”> <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p> </div> <div class=”w3-panel w3-border”> <p>London is the most populous city in the United Kingdom, with a metropolitan […]

CSS

buttons

Posted on

<button class=”w3-button w3-black”>+</button> <button class=”w3-button w3-teal”>+</button> <button class=”w3-button w3-circle w3-black”>+</button> <button class=”w3-button w3-circle w3-teal”>+</button> <div class=”w3-container”> <h2>Left and Right Buttons</h2> <div class=”w3-bar w3-black”> <button class=”w3-button w3-left”>Left</button> <button class=”w3-button w3-right”>Right</button> </div> <p>Used to create “previous/next” buttons:</p> <div class=”w3-bar”> <button class=”w3-button w3-left w3-light-grey”>&laquo; Previous</button> <button class=”w3-button w3-right w3-green”>Next &raquo;</button> </div> </div>   <div class=”w3-container”> <h2>Buttons with Ripple Effect</h2> <p>Click on the […]

CSS

display

Posted on

Floating Classes he w3-left class floats an element to the left, the w3-right class floats an element to the right: <div class=”w3-bar w3-light-grey”> <div class=”w3-left w3-red w3-padding”>w3-left</div> <div class=”w3-right w3-blue w3-padding”>w3-right</div> </div> drawing flag. <div class=”w3-display-container w3-margin w3-card-4″ style=”height:200px;width:350px”> <div class=”w3-red w3-display-topleft” style=”width:25%;height:40%”></div> <div class=”w3-red w3-display-topright” style=”width:60%;height:40%”></div> <div class=”w3-red w3-display-bottomleft” style=”width:25%;height:40%”></div> <div class=”w3-red w3-display-bottomright” style=”width:60%;height:40%”></div> </div>   Toggle show/hide […]

CSS

Padding / Margin / display

Posted on

The w3-padding-number classes add top and bottom padding to any HTML element: Class Defines w3-padding-16 Adds 16px top and bottom padding to an element w3-padding-24 Adds 24px top and bottom padding to an element w3-padding-32 Adds 32px top and bottom padding to an element w3-padding-48 Adds 48px top and bottom padding to an element w3-padding-64 Adds 64px […]

CSS

w3-container / panel

Posted on

The w3-container provides equality for all HTML container elements: Common margins Common paddings Common alignments Common fonts Common colors <div class=”w3-container”> The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element <div class=”w3-panel w3-red”>   <div class=”w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif”> <p><i>”Make it as simple as possible, but not simpler.”</i></p> </div> […]

CSS

AngularJS and W3.CSS

Posted on

AngularJS Directive Description <body ng-app Defines an application for the <body> element <body ng-controller Defines a controller for the <body> element <tr ng-repeat Repeats the <tr> element for each user in users <button ng-click Invoke the function editUser() when the <button> element is clicked <h3 ng-show Show the <h3>s element if edit = true <h3 […]