Home
Simple CSS Tutorial By JosephS.
What is CSS?
CSS stands for Cascading Style Sheets
CSS defines how to display html elements on a page
CSS is a quick and easy way to style your entire site
How does it work?
Well, stylesheets are simple. They are simple page ending in .css and contain styles which certain elements on your web page can be defined to. You use styles all the time.
If you use a simple and easy web editor which gives you a simple change font tool, you are changing the style of your page. Usualy when you change a style on the page it will automaticaly make a <style> section in your <head>.
But there's one problem with this... If your site needs lots of styles for different parts of the page, the code can become overcrowded and can get annoying when editing in code. However, stylesheets allow for one line of code in the <head> and that's it.
Show me how...
It's simple, create a text document or whatever editor you wish to use. Rename it to Style.css. Then you type in your code.
I'm going to make a simple bit of code which will change the alignments of texts in <div> tags on a html page.
So here's our CSS code:
This is the code for our HTML page:
What does this code mean?
I've already added what the CSS coding means in the code. But i'll briefly describe the HTML coding:
If in the stylesheet, there is '#style1' then in your page you wish to style, you msut give the conrtol the id of style1.
If in the stylesheet, there is 'h1' then in your page you wish to style, you must palce the text or whatever in the tags of <h1> and </h1>
Recap
Styles in the styleseet with a # infront mean that in the html, you give the control an id equal to the name in the stylesheet.
Styles in the stylesheet without a # infront mean that in the html, you place the control inside tags with the name of the style.
h1 stlye would be <h1>this style is h1</h1>
Everypage you want to be styled must have the line of code in the <head> tags.
Thanks for reading.
*with thanks to w3schools
What is CSS?
CSS stands for Cascading Style Sheets
CSS defines how to display html elements on a page
CSS is a quick and easy way to style your entire site
How does it work?
Well, stylesheets are simple. They are simple page ending in .css and contain styles which certain elements on your web page can be defined to. You use styles all the time.
If you use a simple and easy web editor which gives you a simple change font tool, you are changing the style of your page. Usualy when you change a style on the page it will automaticaly make a <style> section in your <head>.
But there's one problem with this... If your site needs lots of styles for different parts of the page, the code can become overcrowded and can get annoying when editing in code. However, stylesheets allow for one line of code in the <head> and that's it.
Show me how...
It's simple, create a text document or whatever editor you wish to use. Rename it to Style.css. Then you type in your code.
I'm going to make a simple bit of code which will change the alignments of texts in <div> tags on a html page.
So here's our CSS code:
- Code:
body
{
/* This area tells the pages what style you want the body of the page to have (the bits inbetween <body> and </body> */
/* You can have something like */
background-color: Black;
}
#div1
{
/* Everything in between the { and } will describe the style of the object with the id of 'div1' */
text-align: center;
font-size: larger;
color: White;
}
#div2
{
/* Everything in between the { and } will describe the style of the object with the id of 'div2' */
text-align: right;
color: Red;
}
#div3
{
/* Everything in between the { and } will describe the style of the object with the id of 'div3' */
font-size: small;
color: White;
}
This is the code for our HTML page:
- Code:
<html>
<head>
<title></title>
<link rel="Stylesheet" class="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="div1">
This text is centered and enlarged...
</div>
<div id="div2">
This text is red and aligned right.
</div>
<div id="div3">
This text is small and aligned left.
</div>
</body>
</html>
What does this code mean?
I've already added what the CSS coding means in the code. But i'll briefly describe the HTML coding:
- Code:
<head>
<title></title>
<link rel="Stylesheet" class="text/css" href="StyleSheet.css" />
</head>
- Code:
<body>
<div id="div1">
This text is centered and enlarged...
</div>
<div id="div2">
This text is red and aligned right.
</div>
<div id="div3">
This text is small and aligned left.
</div>
</body>
If in the stylesheet, there is '#style1' then in your page you wish to style, you msut give the conrtol the id of style1.
If in the stylesheet, there is 'h1' then in your page you wish to style, you must palce the text or whatever in the tags of <h1> and </h1>
Recap
Styles in the styleseet with a # infront mean that in the html, you give the control an id equal to the name in the stylesheet.
Styles in the stylesheet without a # infront mean that in the html, you place the control inside tags with the name of the style.
h1 stlye would be <h1>this style is h1</h1>
Everypage you want to be styled must have the line of code in the <head> tags.
Thanks for reading.
*with thanks to w3schools
