CSS

Attributes used to style your web page| CSS Tutorial -Part 3

As we have seen the attribute “color” in Part -2 , today we will go through some other basic parameters which are needed to set to give desired layout.

Font- Family : Font-family attribute describes which font type should be used for particular tag/html page/website level. If not mentioned , default font type of the web browser is assigned to the pages. E.g of font-family attribute value:

font-family: “Courier New”, Verdana, sans-serif;

This line means that first preference should be given to font type “Courier New”. If this font is not available on person’s computer than Verdana should be used else sans-serif should be used. Most of the browsers use serif family as default font type. We can download add on font types from Google fonts.

Font-Size: Font-size is the attribute which can be used to set the font size of each tag differently in page and change the default font size. Font size can be described in 3 different ways i.e. static size which is described in pixels written as px, relative to window size which is described is viewport width written as vw and 3rd way is EM which is relative to base size set on page. Below is the example of all three:

font-size: 16px;
font-size: .9vw; /*This is if window is 100 bit size each character occupy 0.9 of 100 bit*/
font-size: 2em; /* If base size is 16px , then 2em means 16*2=32px*/

Font-Weight: Font weight can be normal, bold or bolder(only supported by some browsers). Font weight can be described in numbers also. Below is the example:

font-weight: normal;
font-weight: 400;

Text-Transform: Text transform is used to show the text in particular fashion i.e. if you want to transform the text to uppercase/lowercase or capitalize form. Example of this is given below:

text-transform: uppercase;
text-decoration: underline;

Text-align: This is used to change the alignment of the text. E.g:

text-align:center;

These are just the basic attributes and there are many more attributes which can be checked at :https://www.w3schools.com/cssref/

For background color and more attributes >>

Advertisements

One thought on “Attributes used to style your web page| CSS Tutorial -Part 3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s