Scribd
Upload
88 views2 pages

Times New Roman Georgia Arial Verdana Courier New Lucida Console

There are two types of font families in CSS: generic families that group fonts with similar appearances like Serif and Monospace, and font families that specify a single font like Times New Roman. CSS borders can have styles like solid, dotted, dashed, double, groove, ridge, inset, or outset. The CSS box model conceptualizes HTML elements as boxes consisting of margins, borders, padding, and content, allowing control over spacing and borders.

Uploaded by

Sasi S INDIA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
88 views2 pages

Times New Roman Georgia Arial Verdana Courier New Lucida Console

There are two types of font families in CSS: generic families that group fonts with similar appearances like Serif and Monospace, and font families that specify a single font like Times New Roman. CSS borders can have styles like solid, dotted, dashed, double, groove, ridge, inset, or outset. The CSS box model conceptualizes HTML elements as boxes consisting of margins, borders, padding, and content, allowing control over spacing and borders.

Uploaded by

Sasi S INDIA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

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


Times New
Serif fonts have small lines at the ends on some
Serif Roman characters
Georgia
Sans-serif
Arial "Sans" means without - these fonts do not have
Verdana the lines at the ends of characters

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

border-style values:
none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as the border-width
value

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

Try it yourself: Set the style of the border


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 HTML elements, and it consists of:
margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to
other elements.

The image below illustrates the box model:

Explanation of the different parts:

 Margin - Clears an area around the border. The margin does not have a background
color, it is completely transparent
 Border - A border that goes around the padding and content. The border is inherited from
the color property of the box
 Padding - Clears an area around the content. The padding is affected by the background
color of the box
 Content - The content of the box, where text and images appear

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

You might also like