codemonkey
Code monkey not crazy, just proud.
- Reaction score
- 66
Part I - Foundation
Want to learn the basics of CSS? Well you have come to the right place.
CSS is a language structured to make HTML easier to control and more powerful.
Usage
To use CSS you can use an external file or embed it straight into an HTML file.
External
Pros: Easy to manipulate lots of pages
Cons: Requires ability to make .css files
To use an external file you need to create a new file, let's call it stylesheet.css in the same directory as your HTML file. All the CSS code should go in stylesheet.css.
In the HTML file you need to put the following code below the <head> tag.
Put that on every page you want the CSS to affect.
Internal
Pros: Embedded directly into the HTML file.
Cons: Can only affect one page, to affect multiple you have to copy and paste code into each page.
To use CSS inside the HTML document you need to go to the <head> section of your HTML document and right below it add:
In between the <style> tag is where your CSS code goes.
CSS Comments
To make a comment you use /* */ like this:
Modifying Tags
Now we come to some practical stuff, modifying tags.
What this does is make the content of every <p> tag red.
p - defines the tag used (you can do this with any tag, except <a> which is special and we will get to later)
{ - declares the starting of attributes
color - declares that the font color of the <p> tag is going to be modified (this is called an CSS attribute)
: - shows that the attribute is over, and the value is the next thing coming up
red - the value for the "color" attribute
; - ends the statement
Common Attributes
Here's a list of some common attributes:
color - changes the font color
text-align - changes the alignment of the text (center, left, right)
font-size - changes the font size
font-family - changes the font type (Arial, Tahoma, etc.)
font-weight - changes the amount of boldness (bold, bolder, lighter)
background-color - changes the background color
font-style - changes the font style (italic, normal, oblique)
Measurement Attributes
When declaring the value of an attribute that involves measurement (font-size, width, height) you have to include a unit UNLESS the value is 0.
Common Units are px (pixel) and cm (centimeter).
Example Usage:
Multi-Value Attributes
Some CSS attributes require more than one value.
For example:
As seen in the above, each value is separated by a space.
1px - Thickness of border
solid - Type of border (solid, dotted, ridge, inset, outset, groove, dashed, double)
black - Color of border
Borders
Borders are very unique when it comes to CSS besides having a multi-value attribute.
With borders you can specify a border on only certain sides, for example:
That adds a border side to each side except the bottom. You could set the values to be different to have a multi-colored border, or something like that.
Here's the easier and shorter way though to do the same exact thing as the previous example.
All this does is make a border on all sides, then removes the border on the bottom to produce the same effect as before, however you save a couple bytes of space.
Part II - Classes and IDs
Classes and IDs make it possible to use CSS to change something, without changing all of a tag.
Classes
The CSS only affects tags that have the attribute class="class", not all tags.
Classes should be used when the class will be used more than one time, example:
However, it's not necessary for a class to be used more than once.
Identifiers (IDs)
IDs are practically identical to Classes, except they have a different method of usage, and you can only use an ID once.
Remember: Only use IDs ONCE.
You might be wondering why you would ever want to use an ID instead of a class, and that is because of JavaScript; I won't go into the details but it is good practice.
Tag Specific Classes
If you want to make a Class only be able to affect one tag, or have different effects on different tags so that this would happen:
You can do this with Tag Specific Classes.
Here's the code for it:
___
This concludes part two of Basics of CSS.
Part III - Links and Events
In this part we learn how to modify links and make dynamic content with hover event.
Modifying Links Attributes
Links are a bit different to modify then other tags.
To modify a link you need to use this code:
And if you want to change how it looks when visited or when it's hovered upon:
You can also use :hover with other tags besides <a>, for example:
That gives a highlighting effect when you scroll over the contents of a <p> tag.
___
This concludes part three of the Basics of CSS.
Part IV - Misc.
Asterisk
The asterisk (*) can be used to fill in CSS attributes for all tags that don't already have them specified.
For example:
Multiple Classes
You can use multiple classes on an element by seperating them with a space, for example:
Quick CSS
There is a third way of using CSS directly in the HTML, for those who want CSS to effect only one specific instance of a tag.
Here's how it works:
As you can see it only affects one tag.
Attribute and Value List
You can find a great list with all attributes and values here.
___
This concludes the Basics of CSS tutorial by me, thanks for reading!
You may not redistribute this tutorial without my permission.
Want to learn the basics of CSS? Well you have come to the right place.
CSS is a language structured to make HTML easier to control and more powerful.
Usage
To use CSS you can use an external file or embed it straight into an HTML file.
External
Pros: Easy to manipulate lots of pages
Cons: Requires ability to make .css files
To use an external file you need to create a new file, let's call it stylesheet.css in the same directory as your HTML file. All the CSS code should go in stylesheet.css.
In the HTML file you need to put the following code below the <head> tag.
Code:
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
Put that on every page you want the CSS to affect.
Internal
Pros: Embedded directly into the HTML file.
Cons: Can only affect one page, to affect multiple you have to copy and paste code into each page.
To use CSS inside the HTML document you need to go to the <head> section of your HTML document and right below it add:
Code:
<style type="text/css">
</style>
In between the <style> tag is where your CSS code goes.
CSS Comments
To make a comment you use /* */ like this:
Code:
/* This is a comment in CSS, it does not affect anything in the page */
Modifying Tags
Now we come to some practical stuff, modifying tags.
Code:
p
{
color: red;
}
What this does is make the content of every <p> tag red.
p - defines the tag used (you can do this with any tag, except <a> which is special and we will get to later)
{ - declares the starting of attributes
color - declares that the font color of the <p> tag is going to be modified (this is called an CSS attribute)
: - shows that the attribute is over, and the value is the next thing coming up
red - the value for the "color" attribute
; - ends the statement
Common Attributes
Here's a list of some common attributes:
color - changes the font color
text-align - changes the alignment of the text (center, left, right)
font-size - changes the font size
font-family - changes the font type (Arial, Tahoma, etc.)
font-weight - changes the amount of boldness (bold, bolder, lighter)
background-color - changes the background color
font-style - changes the font style (italic, normal, oblique)
Measurement Attributes
When declaring the value of an attribute that involves measurement (font-size, width, height) you have to include a unit UNLESS the value is 0.
Common Units are px (pixel) and cm (centimeter).
Example Usage:
Code:
b /* Bold tag */
{
font-size: 24px; /* notice there is NO SPACE between the number and the unit */
}
Multi-Value Attributes
Some CSS attributes require more than one value.
For example:
Code:
ul /* unordered list element */
{
border: 1px solid black;
color: red;
}
As seen in the above, each value is separated by a space.
1px - Thickness of border
solid - Type of border (solid, dotted, ridge, inset, outset, groove, dashed, double)
black - Color of border
Borders
Borders are very unique when it comes to CSS besides having a multi-value attribute.
With borders you can specify a border on only certain sides, for example:
Code:
p
{
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
That adds a border side to each side except the bottom. You could set the values to be different to have a multi-colored border, or something like that.
Here's the easier and shorter way though to do the same exact thing as the previous example.
Code:
p
{
border: 1px solid black;
border-bottom: none;
}
All this does is make a border on all sides, then removes the border on the bottom to produce the same effect as before, however you save a couple bytes of space.
Part II - Classes and IDs
Classes and IDs make it possible to use CSS to change something, without changing all of a tag.
Classes
Code:
.CoolRedClass /* The period, ".", before "CoolRedText" indicates that it is a class you are defining, not putting a tag name */
{
color: red;
font-style: italic;
}
Code:
<div class="CoolRedClass">This text is red (and italic)</div>
<p class="CoolRedClass">This text is also red (and italic)</p>
<div>This text is not red or italic</div>
<p>This text is not red or italic</p>
The CSS only affects tags that have the attribute class="class", not all tags.
Classes should be used when the class will be used more than one time, example:
Code:
<div class="myclass">Ahoy world!</div>
<div class="myclass">wuts up?</div>
However, it's not necessary for a class to be used more than once.
Identifiers (IDs)
IDs are practically identical to Classes, except they have a different method of usage, and you can only use an ID once.
Code:
#CoolRedID /* The number sign, "#", before "CoolRedID" indicates that it is a ID you are defining, not putting a tag name */
{
color: red;
font-style: italic;
}
Code:
<p id="CoolRedID">This text is red and italic.</p>
Remember: Only use IDs ONCE.
You might be wondering why you would ever want to use an ID instead of a class, and that is because of JavaScript; I won't go into the details but it is good practice.
Tag Specific Classes
If you want to make a Class only be able to affect one tag, or have different effects on different tags so that this would happen:
Code:
<p class="myclass">This text is red</p>
<div class="myclass">This text is blue, yet it has the same class as the previous</div>
You can do this with Tag Specific Classes.
Here's the code for it:
Code:
p.myclass /* p is the tag and myclass is the class */
{
color: red;
}
div.myclass
{
color: blue;
}
___
This concludes part two of Basics of CSS.
Part III - Links and Events
In this part we learn how to modify links and make dynamic content with hover event.
Modifying Links Attributes
Links are a bit different to modify then other tags.
To modify a link you need to use this code:
Code:
a:link
{
/*All CSS attributes here */
}
/*for a class use:*/
a.myclass:link
{
/* attributes here */
}
And if you want to change how it looks when visited or when it's hovered upon:
Code:
a:link
{
color: white;
}
a:visited
{
color: gray;
}
a:hover
{
color: blue;
}
You can also use :hover with other tags besides <a>, for example:
Code:
p:hover
{
background-color: yellow;
}
That gives a highlighting effect when you scroll over the contents of a <p> tag.
___
This concludes part three of the Basics of CSS.
Part IV - Misc.
Asterisk
The asterisk (*) can be used to fill in CSS attributes for all tags that don't already have them specified.
For example:
Code:
*
{
color: red;
}
div
{
color: blue;
}
Code:
<p>This text is red</p>
<div>This text is blue</p>
Multiple Classes
You can use multiple classes on an element by seperating them with a space, for example:
Code:
.redcolor
{
color: red;
}
.bluebackground
{
background-color: blue;
}
Code:
<div class="bluebackground redcolor">This has a blue background and is red.</div>
Quick CSS
There is a third way of using CSS directly in the HTML, for those who want CSS to effect only one specific instance of a tag.
Here's how it works:
Code:
<div style="color: red; /*other css properties*/">This text is red</div>
<div>This text is not red</div>
As you can see it only affects one tag.
Attribute and Value List
You can find a great list with all attributes and values here.
___
This concludes the Basics of CSS tutorial by me, thanks for reading!
You may not redistribute this tutorial without my permission.