CSS tutorial - part 1: basics
Posted by admin in css, Tutorial
CSS (Cascading Style Sheets) is a style language that defines layout of HTML documents. With CSS you can assign properties to HTML elements like fonts, size, colors, margins, paddings, height, width, images, backgrounds and more. HTML is used to structure content. CSS is used for formatting structured content.
Here is an example for assigning body background color in HTML code:
<body bgcolor=”#FF0000″>
And the same in CSS code:
body {backgroung-color: #FF0000;}
So why should you even use CSS if you can do just the same in HTML? Imagine you have 20 HTML pages and you decide to change body backgroung color. You can make the change 20 times on each HTML page or just one in CSS file. I choose CSS!
The fundamendal CSS model looks like this:
selector {property: value;}
How to apply CSS to HTML?
There are three ways:
- In-line.
<body style=”backgroung-color: #FF0000;”>
- Internal. The code is inserted between <head> tags.
<style type=”text/css”>
body {background-color: #FF0000;}
</style> - External. You create CSS file containing CSS attributes and link it to the HTML document. The code is inserted between <head> tags.
<link rel=”stylesheet” type=”text/css” href=”style.css” />
I recommend applying external style sheet file as one change in it affects all HTML documents.
Sorry but I find page hard on the eye. Black background/white foreground … yuk!