CSS Beginners Guide part 6 - Working with Fonts | Lessoncup Programming Blog

Wednesday, 30 October 2013

CSS Beginners Guide part 6 - Working with Fonts

CSS providing fonts related properties to style the text and we also apply custom fonts including predefined fonts we can apply fonts using font-family property, font-size property for text size and font-style to be italic the text, and font-weight for make the text bold. we can set all font related properties into one property that is font: property.

Apply Font

We use font-family property to apply the font to text, the font-family have several font names and you can assign multiple fonts dividing by comma, some times the browsers doesn't support the first font, and it tries to next font. and if your font name is more than one word put it into double quotations marks " ".
ex:
<style>

p{font-family:"Times new roman",arial,verdana};

</style>

Font Size

We use font-size property to set the size to text, it is very important to web designers to maintain the text size as par the requirement and use proper tags those are already assign to text, h1 to h6 for headings and p tag for paragraphs.
ex:
<style>
p{

font-size:16px; // set the text size to 14px

//

font-size:3em; // set the text size to 48 pixels by default 16px=1em

}
</style>

Font Style and weight

We use font-style and font-weight properties to make the text style to blog and italic.
ex:
<style>
a{

font-style:italic; // set the text to italic.

font-weight:bold; // set the text to bold letters.


}

</style>

Apply Custom Fonts

We use @font-face rule property to apply the custom fonts to text
ex:
<style>

@font-face
{
font-family: lessoncup; // set the font name, it is up to you..
src: url(your-location/lessoncup.woff); // call the font from you server, give the proper path..
}

//here we are applying the above font to bellow div

div
{
font-family:lessoncup;
}

</style>

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons