CSS(Cascading Style Sheet)

CSS is a language that describes the style of an HTML document.

CSS describes how HTML elements should be displayed.

CSS Example

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}

CSS Introduction

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started
a nightmare for web developers. Development of large websites, where fonts and color
information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just
one file!

CSS Syntax and Selectors

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
In the following example all <p> elements will be center-aligned, with a red text color:

Example

p{
color: red;
text-align: center;
}

CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):

Example

p{
text-align: center;
color: red;
}

The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one
unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

The style rule below will be applied to the HTML element with id="para1":
Example

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the
class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

Example

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

In the example below, only <p> elements with class="center" will be center-aligned:

Example

[Link] {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.

In the example below, the <p> element will be styled according to class="center" and to
class="large":
Example

<p class="center large">This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!

Grouping Selectors
If you have elements with the same style definitions, like this:

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example

h1, h2, p {
text-align: center;
color: red;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later
date.

Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example

p{
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

CSS How To...

When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External style sheet

 Internal style sheet
 Inline style
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one
file!

Each page must include a reference to the external style sheet file inside the <link> element. The
<link> element goes inside the <head> section:

Example

<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension.

Here is how the "[Link]" looks:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value and the unit (such as margin-left: 20
px;). The correct way is: margin-left: 20px;
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:

Example

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Inline Styles
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

Example

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly.
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets, the
value from the last read style sheet will be used.

Example

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

then, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
color: orange;
}

If the internal style is defined after the link to the external style sheet, the <h1> elements will be
"orange":

Example

<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<style>
h1 {
color: orange;
}
</style>
</head>

However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":
Example

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

Cascading Order
What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style (inside a specific HTML element) has the highest priority, which means that it
will override a style defined inside the <head> tag, or in an external style sheet, or a browser
default value.

CSS Colors

Colors in CSS are most often specified by:

 a valid color name - like "red"

 an RGB value - like "rgb(255, 0, 0)"
 a HEX value - like "#ff0000"

Color Names
Colors set by using color names:

Example
 Color Name

Red

Green

Blue

Orange

Yellow

Cyan

Black

Note: Color names are not case-sensitive: "Red" is the same as "red" or "RED".

HTML and CSS supports 140 standard color names.

RGB (Red, Green, Blue)

RGB color values can be specified using this formula: rgb(red, green, blue).

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

For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0. Experiment by mixing the RGB values below:

Red Green Blue

255 0 0

rgb(255, 0, 0)

Example
 Color RGB

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,165,0)

rgb(255,255,0)

rgb(0,255,255)

Shades of grey are often defined using equal values for all the 3 light sources:

Example

Color RGB

rgb(0,0,0)

rgb(128,128,128)

rgb(255,255,255)

Hexadecimal Colors
RGB values can also be specified using hexadecimal color values in the form: #RRGGBB,
where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as
decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the
others are set to the lowest value (00). Note: HEX values are case-insensitive: "#ff0000" is the
same as "FF0000".

Example
 Color HEX

#FF0000

#00FF00

#0000FF

#FFA500

#FFFF00

#00FFFF

Shades of grey are often defined using equal values for all the 3 light sources:

Example

Color HEX

#000000

#808080

#FFFFFF

CSS Backgrounds

The CSS background properties are used to define the background effects
for elements.

CSS background properties:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

Background Color
The background-color property specifies the background color of an element.
The background color of a page is set like this:

Example

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

 a valid color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

In the example below, the <h1>, <p>, and <div> elements have different background colors:

Example

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p{
background-color: yellow;
}

Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

body {
background-image: url("[Link]");
}

Below is an example of a bad combination of text and background image. The text is hardly
readable:

Example

body {
background-image: url("[Link]");
}

Note: When using a background image, use an image that does not disturb the text.

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like
this:

Example

body {
background-image: url("gradient_bg.png");
}

If the image above is repeated only horizontally (background-repeat: repeat-x;), the

background will look better:

Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Tip: To repeat an image vertically, set background-repeat: repeat-y;

Background Image - Set position and no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

In the example above, the background image is shown in the same place as the text. We want to
change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property:

Example

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page),
use the background-attachment property:

Example
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property.

The shorthand property for background is background:

Example

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 It does not matter if one of the property values is missing, as long as the other ones are in
this order.


All CSS Background Properties

 Property Description

background Sets all the background properties in one declaration

Sets whether a background image is fixed or scrolls with the rest of the
background-attachment
page

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

CSS Borders

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's
border.

I have borders on all sides.

I have a red bottom border

I have rounded borders.

I have a blue left border.

Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).

Example

[Link] {border-style: dotted;}

[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties described below will have ANY effect unless
the border-style property is set!

Border Width
The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border).

5px border-width

Example

[Link] {
border-style: solid;
border-width: 5px;
}

[Link] {
border-style: solid;
border-width: medium;
}

[Link] {
border-style: solid;
 border-width: 2px 10px 4px 20px;
}

Border Color
The border-color property is used to set the color of the four borders.

The color can be set by:

 name - specify a color name, like "red"

 Hex - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 transparent

The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Red border

Example

[Link] {
border-style: solid;
border-color: red;
}

[Link] {
border-style: solid;
border-color: green;
}

[Link] {
border-style: solid;
border-color: red green blue yellow;
}

Border - Individual Sides

From the examples above you have seen that it is possible to specify a different border for each
side.

In CSS, there is also properties for specifying each of the borders (top, right, bottom, and left):

Different Border Styles

Example

p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

The example above gives the same result as this:

Example

p{
border-style: dotted solid;
}

So, here is how it works:

If the border-style property has four values:

 border-style: dotted solid double dashed;

o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

If the border-style property has three values:

 border-style: dotted solid double;

o top border is dotted
o right and left borders are solid
o bottom border is double

If the border-style property has two values:

 border-style: dotted solid;

o top and bottom borders are dotted
o right and left borders are solid
If the border-style property has one value:

 border-style: dotted;
o all four borders are dotted

The border-style property is used in the example above. However, it also works with border-
width and border-color.

Border - Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing
with borders.

To shorten the code, it is also possible to specify all the individual border properties in one
property.

The border property is a shorthand property for the following individual border properties:

 border-width
 border-style (required)
 border-color

Example

p{
border: 5px solid red;
}

Result:

Some text

You can also specify all the individual border properties for just one side:

Left Border
p{
border-left: 6px solid red;
background-color: lightgrey;
}

Result:

Some text

Bottom Border

p{
border-bottom: 6px solid red;
background-color: lightgrey;
}

Result:

Some text

Rounded Borders
The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example

p{
border: 2px solid red;
border-radius: 5px;
}

Note: The border-radius property is not supported in IE8 and earlier versions.
More Examples
All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top
border in one declaration.

Set the style of the bottom border

This example demonstrates how to set the style of the bottom border.

Set the width of the left border

This example demonstrates how to set the width of the left border.

Set the color of the four borders

This example demonstrates how to set the color of the four borders. It can have from one to four
colors.

Set the color of the right border

This example demonstrates how to set the color of the right border.

All CSS Border Properties

Property Description

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-radius Sets all the four border-*-radius properties for rounded corners

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

CSS Margins

This element has a margin of 70px.

CSS Margins
The CSS margin properties are used to generate space around elements.

The margin properties set the size of the white space outside the border.

With CSS, you have full control over the margins. There are CSS properties for setting the
margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
  margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin

 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

The following example sets different margins for all four sides of a <p> element:

Example

p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

 margin-top
 margin-right
 margin-bottom
 margin-left

Example

p{
margin: 100px 150px 100px 80px;
}
So, here is how it works:

If the margin property has four values:

 margin: 25px 50px 75px 100px;

o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

If the margin property has three values:

 margin: 25px 50px 75px;

o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

If the margin property has two values:

 margin: 25px 50px;

o top and bottom margins are 25px
o right and left margins are 50px

If the margin property has one value:

 margin: 25px;
o all four margins are 25px

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally
between the left and right margins:

Example

div {
width: 300px;
margin: auto;
 border: 1px solid red;
}

The inherit Value

This example lets the left margin be inherited from the parent element:

Example

[Link] {
border: 1px solid red;
margin-left: 100px;
}

[Link] {
margin-left: inherit;
}

Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal
to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

Example

h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}
In the example above, the <h1> element has a bottom margin of 50px. The <h2> element has a
top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2>
would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up
being 50px.

All CSS Margin Properties

Property Description

margin A shorthand property for setting the margin properties in one declaration

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

****CSS Box Model

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
  Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between
elements.

Example

div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know
how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set
the width and height of the content area. To calculate the full size of an element, you must also
add padding, borders and margins.

Assume we want to style a <div> element to have a total width of 350px:

Example

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Here is the math:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left
margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border +
top margin + bottom margin

Note for old IE: Internet Explorer 8 and earlier versions, include padding and border in the
width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

CSS Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.

Difference Between Serif and Sans-serif Fonts

CSS Font Families

In CSS, there are two types of font family names:

 generic family - a group of font families with a similar look (like "Serif" or "Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")
 Generic family Font family Description

Serif
Times New Roman Serif fonts have small lines at the ends on some
characters
Georgia

Sans-serif
Arial "Sans" means without - these fonts do not have the
Verdana lines at the ends of characters

Courier New
Monospace All monospace characters have the same width
Lucida Console

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Font Family
The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser
does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar font
in the generic family, if no other fonts are available.

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

More than one font family is specified in a comma-separated list:

Example

p{
font-family: "Times New Roman", Times, serif;
}

For commonly used font combinations, look at our Web Safe Font Combinations.
Font Style
The font-style property is mostly used to specify italic text.

This property has three values:

 normal - The text is shown normally

 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

[Link] {
font-style: normal;
}

[Link] {
font-style: italic;
}

[Link] {
font-style: oblique;
}

Font Size
The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use font
size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

 Sets the text to a specified size

 Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
  Absolute size is useful when the physical size of the output is known

Relative size:

 Sets the size relative to surrounding elements

 Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p{
font-size: 14px;
}

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of
pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default
size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p{
font-size: 0.875em; /* 14px/16=0.875em */
}

In the example above, the text size in em is the same as the previous example in pixels.
However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it
should when made larger, and smaller than it should when made smaller.

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the <body>
element:
Example

body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p{
font-size: 0.875em;
}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to
zoom or resize the text!

Font Weight
The font-weight property specifies the weight of a font:

Example

[Link] {
font-weight: normal;
}

[Link] {
font-weight: bold;
}

Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps
font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the
converted uppercase letters appears in a smaller font size than the original uppercase letters in
the text.

Example

[Link] {
font-variant: normal;
}

[Link] {
font-variant: small-caps;
}