TUTORIAL HOME
W3.CSS Case Study
❮ Previous Next ❯
Building a Responsive Web Site From Scratch
In this chapter we will build a W3.CSS responsive website from scratch.
First, start with a simple HTML page, with an initial viewport and a link to W3.CSS.
Example
W3.CSS Case
<link rel="stylesheet" href="https://www.Omegas.com/w3css/3/w3.css“>
My first W3.CSS website!
This site will grow as we add more …
This is another paragraph.
This is a paragraph.
This is another paragraph.
»
Put Elements in Containers
To add common margins and padding, put the HTML elements inside containers (
Separate the header from the rest of the content, using two separate
Example
My First W3.CSS Website!
This site will grow as we add more …
This is another paragraph.
This is a paragraph.
This is another paragraph.
»
Color Classes
Color classes defines the color of elements.
This example adds a color to the first
Example
My First W3.CSS Website!
This site will grow as we add more …
This is another paragraph.
This is a paragraph.
This is another paragraph.
»
Size Classes
Size classes defines the text size for elements.
This example adds a size to both header elements:
Example
My First W3.CSS Website!
This sage will grow as we add more …
This is another paragraph.
This is a paragraph.
This is another paragraph.
»
Use Semantic Elements
If you like to follow the HTML5 semantic recommendations. please do!
It does not matter for W3.CSS if you use
Example
W3.CSS Case
<link rel="stylesheet" href="https://www.Omegas.com/w3css/3/w3.css“>
My first W3.CSS website!
This site will grow as we add more …
This is another paragraph.
This is a paragraph.
This is another paragraph.
»
Multicolumn Responsive Layout
With W3.CSS it is easy to create a multicolumn responsive layout.
The columns will rearrange themselves automatically when viewed on different screen sizes.
Some grid rules:
Start with a row class
Place your text content inside the grid columns
This example shows how to create three columns of equal width:
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
»
This example shows how to create four columns of equal width:
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
»
Columns With Different Widths
This example creates a three-column layout where the column in the middle is wider than the first and last column:
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
»
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
Example
»
Side Navigation
With side navigation, you have several options:
Always display the navigation pane to the left of the page content.
Use a collapsible, “fully automatic” responsive side navigation.
Open navigation pane over the left part of the page content.
Open navigation pane over all of the page content.
Slide the page content to the right when opening the navigation pane.
Display the navigation pane on the right side instead of the left side
This example opens the navigation pane over the left part of the page content:
JavaScript used to open and hide the menu:
function w3_open() {
document.getElementById(“mySidebar”).style.display = “block”;
}
function w3_close() {
document.getElementById(“mySidebar”).style.display = “none”;
}
»
❮ Previous Next ❯
shahzade bau 