HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

Styling HTML with CSS

CSS stands for "Cascading Style Sheets". CSS is used to control the style of a web document in a simple and easy way.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

Using CSS, you can specify a number of style properties for a given HTML element.


How to apply CSS to your HTML

You can use CSS in three ways in your HTML document:

  • External stylesheet
  • Internal stylesheet
  • Inline style

External Stylesheet

An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element. The HTML file looks something like this:

HTML file
example.css
Run code

This method is arguably the best, as you can use one stylesheet to style multiple documents, and would only need to update the CSS in one place if changes were needed.


Internal Stylesheet

An internal stylesheet is where you don't have an external CSS file, but instead place your CSS inside a <style> element, contained inside the HTML <head>. So the HTML would look like this:

Run code

This can be useful in some circumstances, but it isn't quite as efficient as external stylesheets. In a website, the CSS would need to be repeated across every page, and updated in multiple places if changes were required.


Inline Style

Inline styles are CSS declarations that affect one element only, contained within a style attribute:

Run code

Don't do this, it is really bad for maintenance and makes the CSS harder to read and understand.

Note: Internal stylesheet can overwrite the rules of external stylesheet and Inline stylesheet can overwrite the rules of Internal stylesheet.


CSS Paddings

The CSS padding property creates extra space within an element.

Run code

CSS Margins

The CSS margin property create extra space around an element.

Run code

CSS Shadows

The CSS box-shadow property is used to add shadow effects around an element.

A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

Run code

To learn more about CSS, visit: CSS Tutorial.