HTML Styles

Photo by DATAIDEA

Styles

HTML Styles are used to style HTML elements it also means changing the default values.

For instance, styling cna change the default values of the text color as black, background color as white, text alignment as left and text size as 12 pixels.

Internal Style Sheet (internal styling)

Using an internal style sheet is also called internal styling.

An internal style sheet is composed of one or more cascading style sheet (css) rule set.

A CSS rule-set consists of a selector and a declaration block sorrounded by curly braces that contains one or more CSS declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

They are all enclosed inside the <style> element with its type="text/css" attribute which is included inside the <head> element.

Internal Style Sheet Syntax

<style type="text/css">
  p{
    font-size: 14px;
  }

Note!

There will be alot of Internal Styling examples throughout the entire tutorial so just keep going and enjoy!

Inline Syling

Inline styling is used to style elements using the style attribute with CSS declaration inside which are similar to internal styling.

Inline Styling Syntax

<div style="property: value; property: value;"></div>

Background Color Example

See the Pen Untitled by DATAIDEA (@DATAIDEA) on CodePen.

Text Color Example

See the Pen Untitled by DATAIDEA (@DATAIDEA) on CodePen.

Text Sizing Example

See the Pen Text Sizing Example by DATAIDEA (@DATAIDEA) on CodePen.

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top