Web Development

Create News Paper Columns

Create News Paper Columns is the section 11 of Basics of CSS3.

In news papers there are lot of paragraphs. Those paragraphs are organized in a nice way to convey the message easily to a reader as well as taking care of the space it has. For this organization, we called them as paragraph columns. Using columns we can fit our wordings or paragraphs nicely on the space remained. But actually for web pages, this concept is really not necessary to use because in the internet there is no screen space limitations. But if you want to have a layout same as the traditional looking paragraphs, CSS3 offers this feature specifically for you.

With CSS3, you can create multiple columns for laying out text – like in newspapers! Look at the features it offers.

Property Description CSS
column-count Specifies the number of columns an element should be divided into 3
column-fill Specifies how to fill columns 3
column-gap Specifies the gap between the columns 3
column-rule A shorthand property for setting all the column-rule-* properties 3
column-rule-color Specifies the color of the rule between columns 3
column-rule-style Specifies the style of the rule between columns 3
column-rule-width Specifies the width of the rule between columns 3
column-span Specifies how many columns an element should span across 3
column-width Specifies the width of the columns 3
columns A shorthand property for setting column-width and column-count 3

We are now going through some of these properties which are very much important.

Multiple Columns

Artificial intelligence (AI) is the intelligence exhibited by machines or software. It is an academic field of study which generally studies the goal of emulating human-like intelligence, though other variations of AI such as strong-AI and weak-AI are also studied. Major AI researchers and textbooks define this field as “the study and design of intelligent agents”, where an intelligent agent is a system that perceives its environment and takes actions that maximize its chances of success. John McCarthy, who coined the term in 1955, defines it as “the science and engineering of making intelligent machines”.

AI research is highly technical and specialised, and is deeply divided into subfields that often fail to communicate with each other. Some of the division is due to social and cultural factors: subfields have grown up around particular institutions and the work of individual researchers. AI research is also divided by several technical issues. Some subfields focus on the solution of specific problems. Others focus on one of several possible approaches or on the use of a particular tool or towards the accomplishment of particular applications.

Here we have paragraphs inside a division tag where the division had the following style on it.

[code language=”css”] div{
column-count: 3;
}
[/code]

With this code segment, the text inside the division automatically fitted into 3 column paragraph set.

 

If you feel the default gap between the columns are not enough you can increase or decrease accordingly with the following code snippet.

[code language=”css”] div{
column-count: 3;
column-gap: 40px;
}
[/code]

Artificial intelligence (AI) is the intelligence exhibited by machines or software. It is an academic field of study which generally studies the goal of emulating human-like intelligence, though other variations of AI such as strong-AI and weak-AI are also studied. Major AI researchers and textbooks define this field as “the study and design of intelligent agents”, where an intelligent agent is a system that perceives its environment and takes actions that maximize its chances of success. John McCarthy, who coined the term in 1955, defines it as “the science and engineering of making intelligent machines”.

AI research is highly technical and specialised, and is deeply divided into subfields that often fail to communicate with each other. Some of the division is due to social and cultural factors: subfields have grown up around particular institutions and the work of individual researchers. AI research is also divided by several technical issues. Some subfields focus on the solution of specific problems. Others focus on one of several possible approaches or on the use of a particular tool or towards the accomplishment of particular applications.

If you want to have a separator to highlight the columns, the column-rule property sets the width, style, and color of the rule between columns. Look at the following example.

Artificial intelligence (AI) is the intelligence exhibited by machines or software. It is an academic field of study which generally studies the goal of emulating human-like intelligence, though other variations of AI such as strong-AI and weak-AI are also studied. Major AI researchers and textbooks define this field as “the study and design of intelligent agents”, where an intelligent agent is a system that perceives its environment and takes actions that maximize its chances of success. John McCarthy, who coined the term in 1955, defines it as “the science and engineering of making intelligent machines”.

AI research is highly technical and specialised, and is deeply divided into subfields that often fail to communicate with each other. Some of the division is due to social and cultural factors: subfields have grown up around particular institutions and the work of individual researchers. AI research is also divided by several technical issues. Some subfields focus on the solution of specific problems. Others focus on one of several possible approaches or on the use of a particular tool or towards the accomplishment of particular applications.

[code language=”css”] div{
column-count: 3;
column-gap: 40px;
column-rule: 4px outset blue;
}
[/code]

Column rule is the shorthand property. It is the combination of

  • column-rule-width
  • column-rule-style
  • column-rule-color

In this section we see into what kind of features that CSS3 offers to make a web page like traditional news paper looking. So the main important concept we discussed here was columns. In the next section we are going to end up our CSS3 tutorial. So don’t forget to have a look at it. We are going to discuss a very important technique there.

WHAT’S NEXT?

Let’s look at what CSS3 Offers For Interfacing.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW