CSS/C4/Web-Layout-in-CSS/English
Title of the script: Web Layout in CSS
Author: Neha Solanki
Domain Reviewer: Ankita Maske, Om Prakash Soni
Novice Reviewer: Madhuri Ganapathi
Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Web Layouts, CSS Header, CSS Menu Bar, CSS Content, CSS Footer
Visual Cue | Narration |
Slide: Title | Welcome to the spoken tutorial on “Web Layout in CSS”. |
Slide: Learning Objectives | In this tutorial we will learn to:
|
Slide:
System Requirements |
This tutorial is recorded using,
However you may use any other editor or browser of your choice. |
Slide: Prerequisite | To practise this tutorial, you should know to use HTML and CSS.
If not, please go through the HTML and CSS tutorials on this website. |
Slide: Code Files | The files used in this tutorial are available in the Code Files link on this tutorial page.
Please download and extract them. Make a copy and then use them while practising. |
Slide: Web Layout |
|
Slide: Web Layout | A web page is divided into various parts:
|
Slide: Web Layout
[Image = 3image.png] |
There are many different ways to structure our web page.
This is the most common structure. |
Open my-css folder | Go to the practice folder my-css. |
Point to Myweb.html in my-css folder | For this demonstration, I’m using the file Myweb.html.
The same is available in the Code files link for practice. |
Open Myweb.html in gedit | Open the file Myweb.html in a text editor. |
[gedit - Myweb.html]
Highlight: All code |
In this HTML file, I have already created some elements.
Like, a title for the page followed by three links. Then some paragraphs with headings. I have linked this HTML file to webstyle.css stylesheet. |
Open Myweb.html in firefox | Switch to the my-css folder.
Now open the file Myweb.html in a web browser. |
[browser] | Observe the page.
This page is not structured properly. Using CSS properties, I will make a proper layout for this web page. Let's start with the header. |
Slide: Header |
Let us understand this through example. |
Switch to my-css folder | Switch to the my-css folder. |
Open webstyle.css in gedit | Now open the file webstyle.css, in any text editor.
I have opened it in the gedit Text Editor. |
[gedit - webstyle.css]
Type: .header { background-color: #4d4d4d; color: #ffffff; padding: 22px; text-align: center;} |
Type the code as shown.
I have created a class named “header”. You can give any name of your choice. I have set some properties for this class. These are background-color, color, padding and text-align properties. |
Press Ctrl + S | Save the file. |
Only narration | Now I will assign this header class to the h1 heading in the web page. |
Switch to Myweb.html | Switch to the Myweb.html file. |
[gedit - Myweb.html]
Update: <div class ="header"> <h1> Welcome to Spoken Tutorial </h1> </div> |
Using the div tag, I will assign the class header to the h1 heading.
Inside the body, update the heading as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[browser]
Highlight the heading |
Observe the modified heading.
Next we will see how to structure the menu bar. |
Slide: Menu Bar |
Let us try this. |
Switch to webstyle.css | Switch to the webstyle.css file. |
[gedit - webstyle.css]
Type:
background-color: #d1e0e0; padding: 4px 16px;}
color: #000000; text-align: center; padding: 4px 16px; text-decoration: none;}
background-color: #ffffff; color: #ee7811;} |
Next to header class, type the code as shown.
I have created a class “menubar” and set background-color and padding property for this class. Then I have set some properties for links. I have also set some properties when the user moves the mouse over the links. |
Press Ctrl + S | Save the file. |
Only narration | Now I will assign this menu class to the links of the web page. |
Switch to Myweb.html | Switch to the Myweb.html file. |
[gedit - Myweb.html]
Update: <div class="menubar"> <a href="#">Tutorial</a> <a href="#">Assignment</a> <a href="#">Test</a> </div> |
Inside the body, next to the heading, update the links as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[browser]
Highlight the output |
Observe the output.
Our new Menu bar is added to the web page. |
Slide: Content |
|
Slide: Content
[Image = 3image.png] |
1-column layout is mostly used for mobile devices. |
Slide: Content
[Image = 2image.png] |
2-column layout is mostly used for tablets and laptops. |
Slide: Content
[Image = 1image.png] |
3-column layout is mostly used for desktops. |
Switch to webstyle.css | Switch to the webstyle.css file. |
[gedit - webstyle.css]
Type: .col {float: left; width: 30%; padding: 7px; text-align: justify;}
.col{ width: 100%; } } |
Now I will create a 3-column layout for our content.
Next to the a:hover tag, type the code as shown. |
[gedit - webstyle.css]
Highlight: .col {float: left; width: 30%; padding: 7px; text-align: justify;}
.col{ width: 100%; } } |
I have created a class “col” and set the float to left and width to 30%.
This will split my content into a 3-column layout. I have also set padding and text-align properties. Here I have used the media rule. When the browser window is 600px or smaller, then the width of the column becomes 100%. This will display the content in 1-column layout. |
Press Ctrl + S | Save the file. |
Only narration | Now I will assign this col class to the first three paragraphs on the web page. |
Switch to Myweb.html | Switch to the Myweb.html file. |
[gedit - Myweb.html]
Type: <div class = "col"> ... </div> |
Inside the body, add the div tag with the class col before the heading of all the paragraphs.
Then close the div tag at the end of each paragraph as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[browser]
Highlight the output |
Observe the output.
Our content is displayed in 3-column layout. Now resize the browser to 600px or smaller. On doing so, the content layout has changed to 1-column layout. And the columns get stacked on the top of other columns instead of next to each other. |
Slide: Footer |
Let us understand this through example. |
Switch to webstyle.css | Switch to the webstyle.css file. |
[gedit - webstyle.css]
Type: .footer { clear:both; background-color: #4d4d4d; padding: 2px; text-align: center; color: #ffffff;} |
Next to the media rule, type the code as shown.
I have created a class “footer” and set some properties for this class. |
Press Ctrl + S | Save the file. |
Only narration | Now I will assign this footer class to the last paragraph of the web page. |
Switch to Myweb.html | Switch to the Myweb.html file. |
[gedit - Myweb.html]
Update: <div class="footer"> <p>Copyright-2020</p> </div> |
Inside the body, update the code as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[browser]
Highlight the output |
Observe the modified footer now. |
Only narration | With this we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have learnt to:
|
Slide: Assignment | As an assignment
|
Slide: Assignment |
|
Slide: Assignment |
|
Slide:
About Spoken Tutorial project |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
Slide: About Workshop | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
Slide: Forum questions | Please post your timed queries on this forum. |
Slide: Acknowledgement | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India. |
Slide: Thanks | This is Neha Solanki from IIT Bombay.
Thank you for watching. |