by 
This post is the second part of CSS hints and tutorial and I hope that it could be useful for those who are learning CSS and web designing. In order to access to the first part click here.
For changing the font of your content you can use the following CSS element
If Verdana font is not installed on the system, the browser automatically can find the replacement font to display the content, however, it is better to set the fonts to check if the first font failed to load like below,
In the above example the browser tries to show content with Verdana font, if it failed then tries Helvetica, again if it fails it will try Arial and so on.
You also are able to change different headings font like below,
As you can see Trebuchet MS is appeared in quotation marks in the example, the reason for putting quotation is because the font name has two parts. For fonts which have more than one word such as “Courier New” or “Times New Roman.” , you should put the font name in the quotation marks.
Here some more CSS elements that you can apply in the body of the page.
For background color you also can use the color name instead of the hexadecimal value, but the hex value is much more accurate than the color name.
The “line-height” feature increases the space between lines of the text and the padding property is used to provide space between the outside edge of the element in question and the content that sits inside it.
For changing the font size see the following example,
The range of font size could be from xx-small to xx-large but it probably will not display the same in all browsers. In other word, each browser displays the font size differently.
Fixed font sizes are not always a great idea, as they cannot easily be scaled up or down to suit the reader’s needs. Relative font sizes are definitely the preferred option.
- font-weight
bold or normal
- font-style
normal or italic
- text-decoration
none , underline , overline , or line-through
It is possible to change some attributes of the HTML elements by CSS. For instance, text between em tags, shows in italic by default, as mentioned before, however, you can change the attribute to show the text between em in uppercase which is called overriding. See below example,
In above example, if you remove the font-style line, text between em tags shows in italic and uppercase.
Imagine that we have a paragraph in our HTML file like this,
Now, we can apply some specific CSS elements just for this paragraph, therefore, the separate CSS file should be like below,
The # notation in the CSS refers to an element with a specific id attribute—in this case, tagline.
If you want to apply the same style on some elements, you can easily put them in one group. For instance, the below part shows some elements before grouping,
Now after grouping it is look like this,
