CSS/C4/Multi-column-Layout-in-CSS/English

From Script | Spoken-Tutorial
Revision as of 00:37, 9 January 2021 by Nancyvarkey (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Title of the script: Multi-column 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, Multi-column Layout, CSS Column, column-count, column-width, column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule, column-span


Visual Cue Narration
Slide: Title Welcome to the spoken tutorial on “Multi-column Layout in CSS”
Slide: Learning Objectives In this tutorial we will learn:
  • How to create a Multi-column Layout in 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: Multi-column Layout Multi-column layout
  • It is used mostly for creating layouts for newspapers, magazines, etc.
  • It is created and styled using the CSS column properties.
Slide: Column Property
column-width column-count
column-gap column-rule-style
column-rule-width column-rule-color
column-rule column-span
These are some CSS column properties.

Let us understand these using some examples.

Open my-css folder Go to the practice folder my-css.
Point to Mycolumn.html in my-css folder For this demonstration, I’m using the file Mycolumn.html.

The same is provided in the Code files link for practice.

Open Mycolumn.html in gedit Open the file Mycolumn.html in the text editor.

I have opened it in the gedit Text Editor.

[gedit - Mycolumn.html]

Highlight all

In this HTML file, I have written some text and linked it to Colstyle.css stylesheet.
Switch to my-css folder Switch to the my-css folder.
Open Colstyle.css in gedit Now open the file Colstyle.css, in any text editor.

I have opened it in the gedit Text Editor.

[gedit - Colstyle.css]

Highlight: body property

I have set the background color for this page to light cyan.
Open Mycolumn.html in firefox Switch to the my-css folder.

Now open the file Mycolumn.html in a web browser.

I have opened it in the Firefox web browser.

[Firefox]

Highlight the text

Observe the page.

We see a paragraph displayed without any formatting.

Now I will apply all the column properties to this page.

Slide: column-width
  • column-width property is used to set the width of every column.
  • It also controls the number of columns

Let us try this.

Switch to Mycolumn.html Switch to the Mycolumn.html file.
[gedit - Mycolumn.html]

Type: <div class="col">

Type: </div>

I will add the div tag with class “col” for the text.

Next to the body tag, add the div tag with the class col.

Then before the body closing tag, close the div tag.

Press Ctrl + S Save the file.
Switch to colstyle.css Switch to the Colstyle.css file.
[gedit - Colstyle.css]

Type:

.col {column-width: 400px;}

I will create a class “col”.

Next to the body tag, type the code as shown.

Here I have set the width to 400 pixels

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

In my case, the content is divided into two columns.

It may vary in your case, as it depends on the size of the browser.

Press Ctrl and minus keys together to increase the no. of columns.

If we press Ctrl & + keys together the number of columns will decrease accordingly.

Slide: column-count
  • column-count property is used to divide the element into a number of columns.

Let us try this.

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

Update:

.col {column-count: 2;}

Update the property for col class as shown.
[gedit - Colstyle.css]

Highlight: column-count: 2;

Here I have set the column-count to 2.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Now the content is divided into two columns.

Press Ctrl and minus keys or Ctrl and plus keys together.

The number of columns will remain as it is.

[gedit - Colstyle.css]

Highlight: column-count: 2;

We can divide our content into any number of columns by changing column-count value.
Slide: column-gap
  • column-gap property is used to set the gap between columns.

Let us try this.

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

Type:

column-gap: 50px;

Inside the class col, next to the column-count property, type the code as shown.

I have set a gap of 50 pixels between the columns.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

50 pixel gap is set between the columns.

Slide: column-rule-style
  • column-rule-style property is used to display a ruler between the columns.
  • Rulers can be styled as solid, dotted, dashed, etc.

Let us try this.

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

Type:

column-rule-style: solid;

Inside the class “col”, next to the column-gap property, type the code as shown.

I have set a solid ruler between the columns.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

A solid ruler is inserted between the columns.

Slide: column-rule-width
  • column-rule-width property is used to set the width of ruler between columns.
  • This property works after specifying column-rule-style property.

Let us try this.

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

Type:

column-rule-width: 5px;

Inside the class “col”, next to the column-rule-style property, type the code as shown.

I have set the width of the line to 5 pixels.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Observe the output.

The width of the line is increased

Slide: column-rule-color
  • column-rule-color property is used to set the color of ruler between columns.
  • This property works after specifying column-rule-style property.

Let us try this.

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

Type:

column-rule-color: blue;

I will set the color of the ruler to blue.

Inside the class “col”, next to the column-rule-width property, type the code as shown.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Observe the output.

Blue color is set for the ruler.

Slide: column-rule
  • column-rule is shorthand property for setting style, width and color of ruler.

Let us try this.

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

Update:

.col { column-count: 2; column-gap: 50px; column-rule: solid 3px red; }

Update the property for col class as shown.
[gedit - Colstyle.css]

Highlight:

column-rule: solid 3px red;

Here I have set the ruler style as solid, width 3 pixels and color red.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Ruler is set between the columns having style solid, width 3 pixels and color red.

Slide: column-span
  • column-span property is used to stretch an element across columns.
  • Its values are: none, all, initial and inherit.
  • Its default value is none.

Let us try this.

Only narration To understand this property, first let us add a heading to the page.
Switch to Mycolumn.html Switch to the Mycolumn.html file.
[gedit - Mycolumn.html]

Type:

<h1> Spoken Tutorial </h1>

After the div start tag, type the code as shown.
Press Ctrl + S Save the file.
Switch to Colstyle.css Switch to the Colstyle.css file.
[gedit - Colstyle.css]

Type:

h1 {text-align: center;}

Next to the class “col”, type the code as shown.

I have set the h1 heading to centre align.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Heading is added to the first column not to the whole page.

[gedit - Mycolumn.html]

Highlight:

<div class="col">

<h1>Spoken Tutorial</h1>

This is because the heading is included inside the class col.

Here the default column-span value is none.

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

Type:

column-span: all;

Inside the h1 tag, next to the text-align property , type the code as shown.

I have set the column-span to all.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Now the heading spans across all the columns.

Likewise we can customise our web page content using CSS column properties, as required.

Only narration With this we have come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Multi-column Layout in CSS
Slide: Assignment As an assignment
  • Open the file webpage.html which you have created earlier.
  • Add some content more than 10 lines.
  • Open the file styles.css which you have created earlier.
  • Divide the content into 4 columns.
  • Using shorthand add a dotted red 4px ruler.
Slide: Assignment
  • Link the styles.css file to webpage.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

Nancyvarkey, Nehasolanki

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