View source for 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



{| border="1"
|-
|  | '''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

{| style="width: 22em;"
|-
| '''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: <nowiki><div class="col"></nowiki>

Type: <nowiki></div></nowiki>
|  | 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:

<nowiki><h1> Spoken Tutorial </h1></nowiki>
|  | 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:

<nowiki><div class="col"></nowiki>

<nowiki><h1>Spoken Tutorial</h1></nowiki>
|  | 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
|-
|}