HTML Styles

HTML style is the appearance or design in which elements are being presented. Examples of styles: font, color, width etc.

Adding Styles

The three (3) methods to add styles to elements are: Inline, Embedded and External styling.

INLINE STYLING

Inline styling is method of applying styles to specific element (one by one) inside the body section.

It uses the style attribute, placed inside the opening tag element.
The style attribute is made up of two parts: property and the value separated by colon (:) and ends with a semi-colon (;). Example: style="property: value;"

TRY IT OUT YOURSELF

NOTE:

Multiple styles can be added to a specific element.
Some properties are made up of two words separated by hyphen (-). Example: font-weight, font-size, background-color etc.

EMBEDDED STYLING

Embedded styling is a method of applying styles to multiple elements (all at once) inside the body section. It is also called internal styling.

It is enclosed inside the <style>....</style> tags, which is placed inside the <head>....</head> tags
To style: the tag name, id or class attribute of the element is written first (p, h1, #para1 .item etc); followed by curly brackets. { }. Then inside the curly brackets, property and the value separated by colon (:) which ends with a semi-colon (;) is written.

TRY IT OUT YOURSELF

EXTERNAL STYLING

External styling is a method using a cascading style sheet (CSS) to apply styles to multiple elements (all at once) inside the body section.

The <link> element is used to link the style sheet to the current document. It is placed inside the <head>....</head> tags
<link> tag takes three (3) attributes: href, type and rel.
- href contains the address or URL of the style sheet. style.css
- type defines the media type of the linked document/resource. text/css
- rel defines the relationship between the linked resource and the current document. stylesheet
Inside the style sheet, styles are written the same way as the embedded styling

TIP:

Inline styling applies to that specific element.
Embedded or Internal styling applies to that particular document.
External styling applies to any document that it is linked to.

Styles

There are many styles you can apply to element(s) using any method of your choice above. In this tutorial I will be showing you a few which are: Color, Font, Width, Height, Margin and Padding.

COLOR

Color is one of the most used styles in HTML. They are of three (3) types: Named Colors, RGB, HEX and HSL

Named Colors are predefined colors. Yellow, Blue, Green, etc.

TRY IT OUT YOURSELF

RGB stands for (Red, Green, Blue) which takes value ranging from 0 - 256. Each value specify the intensity of the color. rgb(0, 23, 138)

TRY IT OUT YOURSELF

HEX are hexadecimal color written in the format #RRGGBB which stands for #RR(red)BB(blue)GG(green). #040955

TRY IT OUT YOURSELF

HSL stands for (Hue, Saturation, Light). The last two values ranging from 0 - 360% hsl(4, 25%, 90%).

TRY IT OUT YOURSELF

RGBA and HSLA the A is called the alpha value which represents the opacity. It takes value ranging from 0.0 - 1. Example: rgb(0, 23, 138, 0.4), hsla(4%, 25%, 90%, 0.2).

TRY IT OUT YOURSELF

FONT

Font in HTML is used to style the typography or characters in your web page or document. Font properties includes: font-family, font-size, font-weight, etc.

TRY IT OUT YOURSELF

Below are font properties and the values they accept

PROPERTIES	VALUES
font-family	Georgia, Impact, Arial, Verdana, Times New Roman, etc.
font-size	xx-small, x-small, small, medium, large, x-large, smaller, larger, px(20px, 50px, etc), %(30%, 80%, etc) em(2.5em, 4em, etc).
font-weight	normal, bold, bolder, lighter, (100 - 900).
font-style	normal, italic, oblique.
font-variant	normal, small-caps.
font-variant-caps	normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.
font-kerning	normal, none

TIP:

Font property shorthand method: font: font-style | font-variant | font-weight | font-size | font-family.

WIDTH AND HEIGHT

Width and height styling is commonly used for object elements (image, videos, etc) to set the width and height of that element.

TRY IT OUT YOURSELF

Most style properties like font-size, width, height etc takes length values. Length is measurement; a number follow by the unit (20px, 5%, 2.5em, etc). Length units are of two (2) major types: Absolute and Relative

Absolute Units

Absolute length units are fixed unit which appears exactly their size.

UNIT	DESCRIPTION
cm	Centimetres
mm	Millimetres
cm	Centimeters
in	Inches
px	Pixels
pi	Picas

Relative Units

Relative length units are relative to other units

UNIT	DESCRIPTION
em	Relative to font size (Example 3em - 3 times the font's original size)
ex	Relative to element height (Example 3ex - 3 times the elements' original height)
ch	Relative to the width of the "0"
rem	Relative to font size of root element.
vw	Relative to 1% width of the viewport
vh	Relative to 1% height of the viewport
vmin	Relative to 1% of viewport's smaller dimension
vmax	Relative to 1% of viewport's smaller dimension
%	Relative to parent element

Other Styles

Like I said from the beginning there are many styles you can add to your elements; below are few more others

margin
border
padding
line-height
background-color

HTML

BASIC

INTERMEDIATE

ADVANCE

HTML Styles

Adding Styles

INLINE STYLING

EMBEDDED STYLING

EXTERNAL STYLING

Styles

COLOR

FONT

WIDTH AND HEIGHT

Absolute Units

Relative Units

Other Styles

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT