CSS/C4/Web-Layout-in-CSS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

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:
  • Structure the layout of a web page using CSS
Slide:

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS v 18.04
  • CSS3
  • HTML5
  • gedit Text Editor and
  • Firefox web browser

However you may use any other editor or browser of your choice.

Slide: Prerequisite

https://spoken-tutorial.org

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
  • For clarity and easy accessibility the content has to be organised on a web page.
  • Using CSS we can structure the web layouts as per our requirements.
Slide: Web Layout A web page is divided into various parts:
  • Header
  • Menu Bar
  • Content
  • Footer
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
  • Header is placed at the top of the web page.
  • It contains the title, logo, search bar etc.

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
  • Menu bar consists of links, which are used to navigate through the website.

Let us try this.

Switch to webstyle.css Switch to the webstyle.css file.
[gedit - webstyle.css]

Type:


.menubar {

background-color: #d1e0e0;

padding: 4px 16px;}


a {

color: #000000;

text-align: center;

padding: 4px 16px;

text-decoration: none;}


a:hover {

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
  • Content is the main section of the web page.
  • It can be divided into many columns for better readability.
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;}


@media screen and (max-width:600px) {

.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;}


@media screen and (max-width:600px) {

.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
  • Footer is placed at the bottom of the web page.
  • It contains details like copyrights, address, etc.

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.


Let us summarize.

Slide: Summary In this tutorial, we have learnt to:
  • Structure the layout of a web page using CSS
Slide: Assignment As an assignment
  • Create a file layoutpage.html.
  • Create the following parts:
    • Header
    • Menu bar
    • Content : 2-columns
    • Footer
Slide: Assignment
  • Create a file layoutstyle.css.
  • Style all the parts.
Slide: Assignment
  • Link the layoutstyle.css file to layoutpage.html file
  • Observe the output
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.

Contributors and Content Editors

Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C4/Web-Layout-in-CSS/English&oldid=54640"