CSS

cascading style sheets

Include CSS in the HEAD Tag

Including CSS inside the HEAD tag will make it apply to the entire HTML document. The STYLE tag can be used as

<STYLE TYPE="text/css">css_definition</STYLE>

Example code:

<html><head>
<title>CSS Included in HEAD Tag</title>
<style type="text/css">
  BODY {background-color: black}
  P {color: yellow}
</style>
</head><body>
<p>Welcome to W3Mentor 
You should see this text in yellow on black background.</p>
</body></html>

Inline CSS in a HTML Tag

Inline CSS can be included in a HTML tag by using the STYLE attribute as

<TAG STYLE="css_definition" ...><TAG>

The CSS definition will only apply to this instance of this tag.

Example code:

<p>Test background CSS</p>
<pre style="background-color: #000000">

The background color can be specified as a hex code or as wording.

How to include CSS in HTML Documents

There are 3 ways to attach CSS to HTML documents:

Include CSS in the STYLE attribute of HTML tags inline.
Include CSS in the STYLE tag inside the HEAD tag.
Include in an external file and specify it in the LINK tag inside the HEAD tag.

The size of text can be controlled with the font-size property. Each element of an HTML document has a default text size; The h1 element typically is largest, the h6 typically the smallest, with p, li, td, and so on in a medium range. The font-size property provides a way to override the default size.

Printed type is measured by its height in points (abbreviated pt), with 1 point being almost exactly 1/72 inch. Computer operating systems make a somewhat reasonable, almost consistent, conversion from points to pixels for displaying characters on the screen. This conversion depends on the assumed resolution of the screen.

The font-size property can be used to control the size of characters, using either absolute or relative values. Many different kinds of values are available; only three are described here.

absolute-size:in points;
absolute-size:in pixels;
relative-size:in percent;

When size is specified in points, characters should print as that size, with the display size depending on the OS conversion factor.

font-size:12pt;

When size is specified in points, characters should display on the screen as that size, with the print size depending on the OS conversion factor.

font-size:12px;

When size is specified in percent, characters should display on the screen and print as that percentage of the size which they would have without the style. A style of

font-size:100%;

should have no effect.

A style of

font-size:200%;

should double the size of the characters.

Example code:

<h1 style="font-align:center">Sizing Text</h1>
<h2>Default</h2>
<p>This paragraph has no style..</p>
<h2>Absolute Size (Points)</h2>
<p style="font-size:20pt">This paragraph has a 20 point font style.</p>
<h2>Absolute Size (Pixels)</h2>
<p style="font-size:20px">This paragraph has a 20 pixel font style.</p>
<h2>Relative Size</h2>
<p style="font-size:150%">This paragraph has a 150% font style,
<span style="font-size:75%;"> and this clause is 75% of 150%</span>.</p>

Output:

Sizing Text

Default

This paragraph has no style..

Absolute Size (Points)

This paragraph has a 20 point font style.

Absolute Size (Pixels)

This paragraph has a 20 pixel font style.

Relative Size

This paragraph has a 150% font style,
and this clause is 75% of 150%.

Aligning Text using CSS

Styles can be used to align the text of a web page. There are four options; align-left, align-right, center, and justify. These styles can be applied to any or all body elements which contain text.
The text-align style property, which controls the horizontal alignment of text, can have one of four values:

text-align:left;
text-align:right;
text-align:center;
text-align:justify;

Each alignment is relative to the available space, which may not be the width of the page. The space can be restricted by a div element or by a table cell.

“Justify” spreads full lines to be flush on both the left and right sides, by increasing the spaces between words.

Example code:

<h1 style="text-align:center">United States Constitution</h1>
<h2>Amendment X</h2>
<h3>Default</h2>
<p>
The powers not delegated to the United States by the 
Constitution, nor prohibited by it to the states, are 
reserved to the states respectively, or to the people.</p>
<h3>Left Aligned</H2>
<p style="text-align:left;">
The powers not delegated to the United States by the 
Constitution, nor prohibited by it to the states, are 
reserved to the states respectively, or to the people.</p>
<h3>Right Aligned</H2>
<p style="text-align:right;">
The powers not delegated to the United States by the 
Constitution, nor prohibited by it to the states, are 
reserved to the states respectively, or to the people.</p>
<h3>Centered</H2>
<p style="text-align:center;">
The powers not delegated to the United States by the 
Constitution, nor prohibited by it to the states, are 
reserved to the states respectively, or to the people.</p>
<h3>Justified</H2>
<p style="text-align:justify;">
The powers not delegated to the United States by the 
Constitution, nor prohibited by it to the states, are 
reserved to the states respectively, or to the people.</p>

Output:

United States Constitution