1<head>
2 <!-- Linking external Css document -->
3 <link rel="stylesheet" href="styles.css">
4
5 <!-- Writing Css inside HTML element -->
6 <style>
7 ...
8 </style>
9</head>
1<!-- Linking External Style Sheets -->
2<head>
3 <link rel="stylesheet" href="css/style.css" />
4</head>
5
6<!-- Embedded Style Sheets -->
7<head>
8 <style>
9 body {
10 background-color: YellowGreen;
11 }
12 h1 {
13 color: blue;
14 }
15 p {
16 color: red;
17 }
18 </style>
19</head>
20
21<!-- Inline Styles -->
22<h1 style="color: red; font-size: 30px">This is a heading</h1>
23<p style="color: green; font-size: 18px">This is a paragraph.</p>
24<div style="color: green; font-size: 18px">This is some text.</div>
1Three ways to add CSS to the body of html:
2 1)External CSS
3 2)Internal CSS
4 3)Inline CSS
5
61) Externally:
7 Type your css code in a file. Remember you file name.
8 Then,
9<head>
10 <link rel="stylesheet" type="text/css" href="FileName.css" >
11</head>
12
132) Internally:
14 Type your cSS in the html file itself. (It is not preffered until
15 little CSS code is to be added). This can be done by style tag.
16 Example:
17 <head>
18 <style>
19 h1 {
20 text-color:red;
21 text-size: 0.8em;
22 }
23 </style>
24 </head>
25
263) Inline:
27 This method is not used by developers as it is very lengthy and
28 maintaining code becomes difficult.
29 Example:
30 <h1 style="color:blue;text-align:center;">Header file</h1>