#InboxUpgrade2020

Page 4

HTML Styles

Styling HTML Elements

 HTML is quite limited when it comes to the  presentation of document. It was originally designed as a simple way of  presenting information. CSS (Cascading Style Sheets) was introduced in December 1996 by the W3C, to provide a better way to style HTML elements.                

With CSS, it becomes easy to specify  the colors used for the text and the backgrounds, the size and the style  for the fonts, the amount of space between elements, adding border and  outlines to the elements and a host of other styling.          

Adding Styles to HTML Elements               

Style information can be either attached as a  separate document or embedded in the HTML document. These are the three  methods of implementing styling information to the HTML document (from  highest to lowest priority).            

• Inline styles — Using the style attribute in the HTML start tag.                    
• Embedded style — Using the <style> element in the head section of the document.                  
• External style sheet — Using the <link> element, pointing to an external CSS files.                           

In this tutorial we will cover all these different types of style sheet one by one:           

Inline Styles

Inline styles are used to apply the unique style  rules to an element by putting the CSS rules directly into the start  tag. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each property: value pair is separated by a semicolon (;),  just as you would write into an embedded or external style sheet. But  it needs to be all in one line i.e. no line break after the semicolon.

                 

The following example will show you how to change the color and font-size of the text:

Example

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="color:Orange;">I am Orange</p>

Example

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>
			

HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

EXAMPLE

   <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem    ipsum...</p> 
   <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem    ipsum...</p> 
			

EXAMPLE

<h1 style="background-color:#708090; color: #FFFAFA;">This is not complicated at all</h1>
<p style="background-color:#D2B48C;">This is easier</p> 

Using the inline styles are generally considered as a bad practice especially when you are accustomed to CSS. As style rules are embedded directly inside the html tag, it causes the presentation to become mixed with the content of the document; which negates the purpose of using CSS.

However, if are you new to html it is imperative for you to understand as Inline style works

HTML Fonts

The font-family property defines the font to be used   for an HTML element:

Example

  <h1 style="font-size:300%;">This is a heading</h1>
<p  style="font-size:160%;">This is a paragraph.</p> 

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

  <h1 style="text-align:center;">Centered Heading</h1>
  <p style="text-align:center;">Centered paragraph.</p> 

HTML Quotation and Citation Elements

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.

Example

  <p>WWF's goal is to: <q>Build a future where people live in harmony with   nature.</q></p> 

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that  is quoted from another source.

Browsers usually indent <blockquote> elements.

Example

  <p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
  For 50 years, WWF has been protecting the future of nature.
The world's   leading conservation organization,
WWF works in 100 countries and is   supported by
1.2 million members in the United States and
close to 5   million globally.
</blockquote> 

HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation  or an acronym.

Marking abbreviations can give useful information to browsers, translation  systems and search-engines.

Example

  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in   1948.</p> 

HTML <address> for Contact Information

The HTML <address> element defines contact information  (author/owner) of a document or an article.

The <address> element is usually displayed in italic. Most browsers  will add a line break before and after the element.

Example

  <address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
  Box 564, Disneyland<br>
USA
</address> 

HTML <cite> for Work Title

The HTML <cite> element defines the title of a  work.

Browsers usually display <cite> elements in italic.

Example

<p>I have not failed. I've just found 10,00 ways that won't work</p>
<p><cite>-Thomas Edison</cite></p>

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional  override.

The <bdo> element is used to override the current text direction:

  <bdo dir="rtl">This text will be written from right to left</bdo>