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>
Default HTML Style
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
CSS Box Model
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