This is a short tutorial for people who are learning basic CSS.
This post mainly describes what CSS is with different pieces of information needed to start learning how to use CSS and the advantages of using it. I will be adding another post on CSS in the future.
What is CSS?
A few facts about CSS:
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in CSS files
Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify the process of making web pages.
CSS handles the look of a web page. Using CSS, you can control the colour of the text, the style of fonts, the spacing between paragraphs, what background images are used, as well as a lot of other effects.
CSS is commonly combined with HTML. I would recommend learning HTML first.(See my earlier posts).
Advantages of learning CSS:
CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
CSS is recommended for making web-pages,so it will probably be compatible for future browsers.
Things to know:
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts:
Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <b> etc.
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be colour or border etc.
Value: Values are assigned to properties. For example colour property can have value either red or #F1F1F1 etc.
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by brackets.
Example:
h1 {color:red;text-align:center;}
Explained:
h1 is the Selector
colour is the Property
red is the Value
text-align is another Property
center is another the Value
To make it more readable,you can put one declearation on each line eg:
h1
{
color:red;
text-align:center;
}
So combined with the html it would look like:
<html>
<head>
<style type="text/css">
h1
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The text between <body> and </body> is the visible page content.
CSS Comments:
Comments are used to explain your code or just to have space to write a note . All comments can be seen in the source code. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*this is a comment*/
Mixed with the HTML and CSS it would be :
<html>
<head>
<style type="text/css">
/*this is a comment*/
h1
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1>heading here</h1>
</body>
</html>
Inserting CSS:
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/image.jpg");}
This is just a brief look into CSS. I hope that some of you found this post helpful and check back regularly.
