Common CSS Styles and Interactive Using Javascript

CSS stands for Cascading Style Sheets. It describes what style html element should be displayed.

Add CSS Style to HTML

There's 3 ways to add CSS style:

1. External style sheet

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

2. Internal style sheet

<head>
<style>
body {background-color: lightgray;}
h1   {color: blue;}
p    {color: green;}
</style>
</head>

3. Inline style

<p
style="color:blue;border-style:solid;">This is a
heading</p>

There're default HTML styles for each element,
Default CSS Values for HTML Elements
Different browsers also have different default CSS styles. To make you html pages looks universal between all browsers, you can do CSS reset.
Reboot, Resets, and Reasoning

Each HTML element has margin, border, padding settings as below,

HTML element can be divided into Block Elements and Inline Elements:

Block Element (div, p, pre, etc.)

A block starts on a new line. You can add margins and padding on top, right, left, and bottom of the element.

Inline Element (span, a, button, img, etc.)

Inline elements don’t start on a new line. You can add space to the left and right, but you can't add space to the top and bottom.

Inline-Block

If you want an inline element can be styled like a block element, you can add “display: inline-block;” to it.

Table Styles

Set CSS styles of table elements

Table Layout

CSS table-layout property