Before starting with examples, here is a collection of all the text and font properties in CSS and their possible values. Some of them are or will be deprecated with CSS 3, but currently, they all function properly.
Let’s see some examples of this. By checking each element from the table above, consider the following code:
Let’s see some examples of this. By checking each element from the table above, consider the following code:
<html><head><title>Title Here</title><style type=”text/css”>h2 {font-family:Verdana;font-size:90px;
font-weight:bold;
color:red
}
.my_style{
font-family:Arial;
font-size:26px;
font-weight:bold;
font-style:italic;
}
p.normalText {font-family:Verdana; font-size:13px;}
</style>
</head>
<body>
<h2>Cascading Style Sheets</h2>
<p class=”normalText”>
<span class=”my_style”>Cascading Style Sheets (CSS)</span> is very useful to style your webpage! <span class=”my_style”>HTML</span> on the other hand, has a lot less options.
</p>
</body>
</html>
Here’s how this page looks like:
Now, let’s take a look to a more sophisticated example. (Note that you should study the code line by line and understand it’s effect on the resulting webpage. Just look at a line of code and see the screenshot to understand what that’s about.)
<html><head><title>Title Here</title><style type=”text/css”>h2 {font-family:Verdana;font-size:34px;
font-weight:bold;
color:red;
text-align:right;
}
.my_style {
font-family:Arial;
font-size:14px;
font-weight:bold;
}
p.normalText {
font-family:Verdana;
font-size:13px;
text-transform:uppercase;
line-height:60px;
}
</style>
</head>
<body>
<h2>Cascading Style Sheets</h2>
<p class=”normalText”>
<span class=”my_style”>Cascading Style Sheets (CSS)</span> is very useful to style your webpage! <span class=”my_style”>HTML</span> on the other hand, has a lot less options.
</p>
</body>
</html>
Here’s what you should see:
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
One comment
Leave a reply