R
Rifat
Guest
This is tutorial/guide mainly for people who have minimal experience with CSS (Cascading Style Sheets) and want to learn a bit out about it. CSS is a stylesheet language that formats the presentation of a document written in a markup language (e.g. HTML, XHTML, XML). CSS has a number of advantages one of the main ones being the presentation of websites can be held in one place, therefore making it really simple to update webpages. Style sheets make sites load faster and doesn't use require much bandwith. CSS specifications are maintained by W3C (World Wide Web Consortium).
Adding stylesheets within the HTML file:
Style sheets in CSS is made up of rules, and each of these rules has three parts to it.
- the Selector (example: 'body') : specifies which part of the document will be affected by the rule
- the Property (example: 'color' and 'background-color') : specifies what aspect of the layout is being set
- the Value (example: 'white' and '#000000'): gives the value for the property
Note: color values can be defined using hexadecimal notation to learn more about this go to this website - http://www.w3schools.com/html/html_colors.asp
Grouping selectors and rules:
Instead of having this:
OR
Instead of having this:
Will be adding more to this very soon.
Adding stylesheets within the HTML file:
<html>
<head>
<title></title>
<style type="text/css">
body {
color: white;
background-color: #000000;
}
</style>
</head>
<body>
[etc...]
</html>
Style sheets in CSS is made up of rules, and each of these rules has three parts to it.
- the Selector (example: 'body') : specifies which part of the document will be affected by the rule
- the Property (example: 'color' and 'background-color') : specifies what aspect of the layout is being set
- the Value (example: 'white' and '#000000'): gives the value for the property
Note: color values can be defined using hexadecimal notation to learn more about this go to this website - http://www.w3schools.com/html/html_colors.asp
Grouping selectors and rules:
Instead of having this:
We can have this:body {color: white}
body {background-color: #000000}
Just by using ';' to separate the properties.body { color: white;
background-color: #000000 }
OR
Instead of having this:
We can have this:H1 { font-style: bold }
H2 { font-style: bold }
H3 { font-style: bold }
H1, H2, H3 { font-style: bold }
Will be adding more to this very soon.