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

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