CSS » Basics
Inline CSS
If you keep the CSS code inline, the
CSS will be written within a
HTML tag, affecting only what's displayed
in that particular tag. For example a paragraph tag,
<p style="color: #ff0000">This text will be red</p>
This text will be red
Internal CSS
Internal CSS means that you have the
CSS code placed between the <head> tags.
The coding will only affect elements within that HTML
file. The other HTML files won't be affected. Hence,
not the best option if you want one line of code to affect multiple
HTML documents. A body tag defined with
CSS,
<head>
This will make the background blue and the text white in the HTML
document.
<style type="text/css">
body {
background-color: #0000ff;
color: #ffffff; }
<style/>
</head>
External CSS
Lastly, we have the external CSS.
The coding is written in a seperate file with the file extension
".css". You link the HTML pages to the CSS file like this,
<head>
The CSS file can be written in notepad for example.
There should be no HTML coding in this file,
only the selectors (p, h1, body etc.) and their properties and values,
<link href="style.css" type="text/css" />
</head>selector { property: value; }
body {
After you've edited all the selectors you want, save it as style.css.
background-color: #0000ff;
color: #ffffff; }
p { color: #ff0000 }
Most common selectors
- body - Covers the whole document
- h1 - The largest header
- h2 - The second largest header
- p - Paragraph
- a - Link
- a:hover - Link on mouseover
- div - A division layer that defines a division/section in the document
- li - List
