How to use CSS in an HTML document.

How to use CSS in an HTML document.

What is a Style?

A style is a rule or a command, telling a browser how to display a particular HTML element For instance, a style could specify that all <h1> elements should be displayed in red and in a different typeface than the rest of the text. Styles can stand-alone or can be organized into style sheets.

Style rule: a command that tells a user agent how to display a particular element.

There are three ways to include styles in documents:

  • Inline styles,
  • Document-level style sheets,
  • External style sheets.

You can apply one or more of these to a given document. The reason they are called Cascading Style Sheets is because of how a browser resolves conflicts when more than one style appears to apply toe the same element. We will discuss this in more detail later, but the general rule is that the most local and/or recent style takes priority.

# How Information Travels Over The Internet?

1. Inline Styles:

Inline style: a style that is specified within the body of a markup tag as an attribute of that tag.

The inline style is the easiest way to define a style. It is useful for circumstances where you want to format a single item in a specific way. To define an inline style, you make use of the style attribute within the tag you want to format the content of. The value the style attribute takes is a semi-colon separated list of style rules. Any HTML element can take inline style rules, for instance,

<img src="image.png" style="border; 2px solid red;"/> <table style="max-width:600px,">

<b style="font-size: 1.2em; font-weight: 500;">

2. Document Level Style Sheets:

Document-level style sheet: a collection of style rules enclosed in <style> tags in the header of the document.

A preferred method of using styles is to put all the styles at the top of the document in a document-level style sheet.

To create a document-level style sheet you place the style rules within <style> tags in the header section of the document. It is like including one document inside another. Everything between the tags are considered part of the style rules for the page.

A Really simple document-level style sheet might look like this:

<style>                                                                            blockquote {color: blue; font-style: italic}            </style>

A <style> tag should not be confused with a style attribute. They are both for applying styles to documents, but in slightly different ways.

When using document-level style sheets, the style rules should appear within HTML comments.