In HTML, text appearance is very limited. You may want more line spacing between text or maybe you may want more or less letter spacing [kern]. With CSS you can control text layout. Follow the steps provided in this tutorial to control text layout properties.
Steps to use text layout properties
1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:
<html>
<head>
<title>CSS tutorial – 16</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<h1>This is largest heading</h1>
<h2>This is smaller than first one</h2>
<h3>This is smaller than second one</h3>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
And then save the file as .html (eg: tut16.html).
Here,
<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.
There are three different headings where we will apply CSS.
We are inserting a paragraph of text inside <p> tag.
2. Next, open the HTML file to see how the default text layout is shown without using any CSS.
3. Next, in the same directory (folder), create another folder named css and create new css file named as style.css. To do that, open notepad and save it as style.css
4. Next, open the file style.css and type following code:
h1{
letter-spacing:5px;
}
h2{
word-spacing:10px;
}
h3{
direction:rtl;
}
p{
line-height:35px;
text-indent:10px;
text-align:justify;
}
Here,
letter-spacing:5px; will add 5px spacing in between letters of h1 heading.
word-spacing:10px; will add 10px spacing in between words of h2 heading.
direction:rtl;
This specifies the base direction for text. There are two possible values i.e. rtl and ltr. In western writing text flows from left to right whereas in Arabic it flows from right to left.
rtl means that text should flow from right to left
ltr means that text should flow from left to right
line-height:35px; will set the distance between adjacent lines of the paragraph.
text-indent:10px; will indent the first line of every paragraph.
text-align:justify; will allow you to control how the contents should be aligned.
There are four possible values and they are:
left
right
center
justify
This completes our tutorial on how to use text layout properties in CSS. If you’ve found this CSS tutorial helpful, please comment below!
The post How to Use Text Layout Properties in CSS appeared first on Web Design Blog | Magazine for Designers.
via http://ift.tt/1BcreTP
No comments:
Post a Comment