Colors
CSS allows you to define different color elements, such as the text color (color), background color (background-color), border color (border-color) and so on. It is only necessary to assign a value to these styles. The most commonly used are next three ways to specify colors:
- hexadecimal value preceded by the # sign
- RGB (Red Green Blue) value
- standard color name (red, blue, green)
Example:
<h1>This is title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque tortor et convallis consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus</p>
<h2>This is title 2</h2>
<img src="images/three.gif" style="border:5px solid yellow" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque tortor et convallis consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus</p>
<h2>This is title 2</h2>
<img src="images/three.gif" style="border:5px solid yellow" />
Result:
Fonts and text decoration
Fonts are grouped by generic font families:
- Serif - fonts which ends are decorated with small extensions (Times, Times New Roman, Georgia or Garamond)
- Sans-serif - fonts without decorative extensions (Arial, Helvetica, Verdana, Trebuchet)
- Monospace - the same width fonts (Courier, Courier New, Lucida Console)
Example 2: the definition of a family of fonts.
HTML code
<p class="flatfont">Lorem ipsum dolor sit amet.</p>
<p class="classicfont">Interdum et malesuada fames.</p>
CSS code
.flatfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: black;
}
.classicfont {
font-family: Times, "Times New Roman", serif;
font-size: 20px;
color: black;
}
Result:
Explanation: to define the text font you can use font-family style. There is a probability that on the computer does not exist the requested font, so it is good practice to specify the style list of fonts separated by commas, which gives to the Web browsers an option, because if browser can not display the first font in the list, it will try to display next, and so on. The names of fonts that are longer than a one-word must be placed in quotation marks, for example, "Times New Roman".
Example 3: using Google web fonts.
HTML code
<head>
<link rel="stylesheet" type="text/css"
href="https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Montserrat:700">
<head/>
<body>
<p class="googlefont">Praesent viverra mi vel dignissim mollis. Curabitur in urna interdum, iaculis diam quis, porttitor purus. </p>
</body>
CSS code
.googlefont {
font-family: 'Montserrat', serif;
font-size: 24px;
}
Result:
Explanation: alternative to local fonts are web fonts that are loaded from some web page, for example, Google Web fonts. Instead of relying that the determination of the family of fonts is installed on the users computer, the client can obtain them from a certain location and to apply on the page. In this example, it is downloaded Montserrat family.
You can define the style of the text itself. If you want to indent the beginning of each paragraph, use the text-indent rule. For underlined, overlined or strike through text, you can use text-decoration.
Example 4: styling text
HTML code
<p class="indent">Praesent vitae consectetur quam, non iaculis lacus. Phasellus lobortis turpis vitae nibh pretium facilisis. Pellentesque venenatis malesuada blandit.</p>
<p class="overline">Vestibulum finibus lorem convallis</p>
<p class="linethrough">Vestibulum finibus lorem convallis</p>
<p class="underline">Vestibulum finibus lorem convallis</p>
<p class="uppercase">Vestibulum finibus lorem convallis</p>
<p class="lowercase">Vestibulum finibus lorem convallis</p>
<p class="capitalize">Vestibulum finibus lorem convallis</p>
<p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis sit amet neque non fringilla. Mauris nec libero sed nulla suscipit rhoncus. Ut hendrerit nunc nec massa interdum porta. Proin quam massa, consectetur et gravida a, lobortis sed nulla. Duis eu cursus magna, a finibus est. Maecenas nec massa congue, imperdiet orci non, auctor odio. Sed pharetra purus ut mauris suscipit dignissim. </p>
CSS code
.indent {
text-indent: 45px;
font-size: 24px;
}
.overline {
text-decoration: overline;
font-size: 24px;
}
.linethrough {
text-decoration: line-through;
font-size: 24px;
}
.underline {
text-decoration: underline;
font-size: 24px;
}
.uppercase {
text-transform: uppercase;
font-size: 20px;
}
.lowercase {
text-transform: lowercase;
font-size: 24px;
}
.capitalize {
text-transform: capitalize;
font-size: 26px;
}
.justify {
text-align: justify;
font-size: 22px;
}
Result:
For the horizontal alignment of the text you can use text-align. You may assign a value center (for centering), left or right (left or right alignment). For vertical alignment, but not the text itself, but the elements that it contains, it is possible, by selecting appropriate values for vertical-align. Some of the possible values are: top, middle, bottom, text-top, text-bottom, and the like, and you can set it in pixels, for example, -10px will move text 10px below the rest of the text; or in percentage.
Example 5: alignment of the text.
HTML code
<p><img src="images/letterm.jpg" class="movedup" />Donec dui turpis</p>
<p><img src="images/letterm.jpg" class="moveddown" />Donec dui turpis</p><br />
<p><img src="images/letterm1.jpg" class="top" />Integer eleifend leo at libero</p>
<p><img src="images/letterm1.jpg" class="middle" />Integer eleifend leo at libero</p>
<p><img src="images/letterm1.jpg" class="bottom" />Integer eleifend leo at libero</p><br />
<p><img src="images/letterm.jpg" class="texttop" />Integer eleifend leo at libero</p>
<p><img src="images/letterm.jpg" class="textbottom" />Integer eleifend leo at libero</p>
CSS code
.moveddown {
vertical-align: 15px;
}
.movedup {
vertical-align: -45px;
}
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
.texttop {
vertical-align: text-top;
font-size: 22px;
}
.textbottom {
vertical-align: text-bottom;
font-size: 22px;
}
Result:
Note: this vertical alignment related to the HTML elements but not the text itself.
Complete code used in examples.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.