Path = Home > How To Use Cascading Style Sheets (CSS) On Your Website

How To Use Cascading Style Sheets (CSS) On Your Website

Cascading Style Sheets (CSS) are an easy and convenient way of controlling the look of the content on your web pages. They give you great flexibility and control over the exact appearance of a page, from precise positioning of the content, to specific fonts and styles. CSS styles let you control many properties that cannot be controlled using just HTML.

They are called cascading because you can apply multiple style sheets to the same web page.

CSS tags can be placed in the following locations, embedded, inline, and external.

Embedded style sheets are collections of CSS styles included in a style tag in the <head> section of a web page.
Inline styles are defined with specific instances of tags throughout a web page.
External style sheets are collections of CSS styles stored in a separate, external file with the .css extension. This file is linked to a one or more pages in a website using a link in the <head> section of the web page.

You can define the following types of CSS styles.

Custom CSS styles, also called class styles, let you create custom style attributes for any range or block of text.
HTML tag styles redefine the formatting for an existing tag. For example, when you create or change a CSS style for the <h1> tag, all text formatted with the <h1> tag is immediately updated.
CSS selector styles redefine the formatting for a chosen combination of tags. For example, <td h1> applies whenever an <h1> tag appears inside a table cell) or for all tags that contain a specific <id> attribute. For example, <#style1> applies to all tags that contain the attribute-value pair <id="style1">).

Creating a new CSS style

You can create a new CSS style to automate the formatting of HTML tags or a range of text identified by a <class> attribute.

A CSS style consists of two main parts - called the selector and the declaration. The selector is the name of the style (for example, <h1>, or <p>) and the declaration defines what the style elements are. It is formed of two parts, the property (for example, <font-size>), and value (for example, 14px).

How To Use Embedded Style Sheets - an embedded cascading style sheet is, as the name suggests, embedded in a web page. This means that you can use different styles on each page if you wish.

How To Use Inline Styles - these are defined with specific instances of tags throughout a web page. These are useful when you want to change part of a page which is already formatted by an embedded or external CSS.

How To Use External Style Sheets - this enables you to use one style for all or part of your site. The main advantage is that you can make sitewide changes by just changing the contents of the style sheet. For example, if you decide to change the background color of your site, you just need to change it in your external file, and it will be changed on all the pages that use that style sheet.

Using the HR Tag - to make a horizontal line across your web page you can use the HR tag.

Using the H1 tag - to make large text such as titles on your web page you can use the H1 tag.