HTML Style

HTML Style

In HTML, style refers to how documents are presented on a web browser. The language has limited features for styling documents because it was originally created for presenting textual information. Cascading Style Sheets (CSS), which was introduced by the W3C in 1996, offers better methods and features for enhancing web pages. Using CSS, developers can easily specify the color of text and page background, the style and size of fonts, change the amount of space between elements, and add outlines or boarders.

Style information of a webpage can either be embedded in its HTML code or attached as a separate document. The three main methods of adding styling information to a html document are inline styles, embedded style, and external style.

Inline Styles

With inline styles, a developer adds style properties to an element by applying CSS syntax directly into the start tag. Use the style attribute to attach various properties to segments of text. A style attribute is characterized by a series of CSS properties and value pairs. Each value pair is separated by a semicolon – there should be no line breaks if you decide to use inline styles.

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

Internal style sheet

Embedded style sheets are designed to only affect the document they are embedded in. These are usually defined in the head section of a document using the <style> element.

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

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

External Style Sheets

An external style sheets come I handy when a developer intends to apply a particular style to several pages. The style rules are held in a separate document that can be linked to files in the website. External styles are preferable to inline and embedded styles because they offer great flexibility – you can change the look of an entire website by applying changes to a single file. An external sheet can be attached to a website by two ways which are namely, importing and linking.

To attach using the link method, use the link tag which should be included in the head section of your html document. If you will prefer using the import method, use the import statement which instructs the browser to load style properties from an external file. You can include the @import statement in the header section of your document or load rules from external CSS files using the style element.

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>