Fonts in CSS

Choosing an appropriate font is very important to increase the readability of text on your web page.

Font Families:

In CSS there are five generic font families:

1. Serif: Times New Roman, Garamond, Baskerville, Georgia, and Courier New.

2. Sans-serif: Arial, Helvetica, Proxima Nova, Futura, and Calibri.

3. Monospace: Courier, Roboto Mono, Inconsolata, Source Code Pro, IBM Plex Mono.

4. Cursive: Brush Script MT, Lucida Handwriting.

5. Fantasy: Papyrus, Herculanum, Party LET, Curlz MT, Harrington.

CSS Property for font style

font-family: In CSS, we use the font-family property to specify the font of a text. We can assign multiple font name.

Example: font-family: Arial, Helvetica, sans-serif;

If the first font is not compitable with the browser then prefrence will goes to the second font and so on.

Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".

1. font-style: This property is use to specify the italic text. This property have three values normal, italic, oblique.

Example: font-style: italic;

2. font-weight: This property is use to specify the weight of a font. ‘normal’ and ‘bold’ are the two values,can be assign .

Example: font-weight: bold;

3. font-size: This property is use to specify the font size of text.We can set the font size in pixels.

Example: font-size: 40px;

Colors in CSS

Color is used to change the look and feel of our web page, and it improve the readability of text.

There are three ways, to set the color in CSS:

1. Color Name: In CSS, a color can be specified by using a predefined color name.

Example: red,blue,green,orange etc.

2. RGB Values: In CSS, a color can be specified as a RGB value, using this formula rgb(red,green,blue).

Each parameter (red, green, blue) defines the intensity of the color between 0 and 255.

Example:

rgb(255,0,0)-> red
rgb(0,255,0)-> green
rgb(0,0,255)-> blue
rgb(0,0,0)-> black
rgb(255,255,255)-> white
                

3. Hexadecimal code: Hexadecimal numbers are represented by only 16 symbols.

These symbols or values are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

In CSS, a color can be specified using a hexadecimal value in the form: #RRGGBB.

Note: 00 is the lowest and FF is the highest value.

Example:

#ff0000 ->red
#00ff00 -> green
#0000ff -> blue
                

Some CSS properties to set color:

1. background-color: This css properties is used to set the background color of HTML element.

Example: background-color: gray;

2. color: This css properties is used to set the text color.

Example: color:green;

3. border-color: This css properties is used to set the border color of HTML Element.

Example: border-color: red;