CSS For The Beginner
I'm writing this post because of how often I see people asking questions about or saying that they don't know anything about CSS. I know that to the complete novice CSS looks intimidating but really it's a very simple thing to master. There just aren't that many things to get used to. Hopefully this simple explanation of the basics will be enough to get the beginners up and running. This by no means covers everything related to CSS but it is the basic rules and everything else you can Google and understand how to apply the answers you find on Google.
First a word about tags. Tags, with just a couple of exceptions always have an opening tag and a closing tag. For example a paragraph tag is written like so...
<p>
Your paragraph would go in here...
</p>
Note the "/" character in the closing tag. This tells the browser that this is the end of the paragraph tag block. Everything between the p tags is treated and rendered as a paragraph. This general rule of opening and closing tags is pretty much universal with all HTML code/markup. Exceptions would be in the case of certain tags that don't actually have any content such as an <img> tag. These tags contain all their information inside the tag itself. For example...
<img src="/images/MyPic.gif" alt="alt text goes here" />
Notice the closing bracket "/>" contains our closing "/" character. This is what's considered a self closing tag. Maybe at another time we will dissect the different components of the tag.
OK, let's move on to the CSS.
CSS stands for Cascading Style Sheet
It is a way to add styling to your page layout and content. There are basically 3 ways to add your styling to your content.
1.) Internal stylesheet. With this method we add the CSS rules to the header of your document using the <style> tag. This would be done like so...
<head>
<title>Our Page Title</title>
<style type="text/css">
p {font-family:Tahoma;font-size:14px;color:#000000;line-height:16px;letter-spacing:1px;}
h1 {font-family:Arial;font-size:36px;color:Blue;line-height:38px;letter-spacing:1px;}
</style>
</head>
This method makes our style rule available to the document in which the style is placed. In other words if you want this style applied to other documents then this code has to be placed in the head of each document. Note also that the way our style is written it will be applied to every <p> tag and every <h1> tag in our document.
2.) External stylesheet This is probably the most useful method because it separates the CSS from the document and allows you to keep all of the CSS for your entire site in one place or file. To do this we create a file with a .css extension, something like "site.css" Then we link this file to our HTML document by placing the link in the head section of the HTML document. We write our link like so...
<link href="site.css"rel="stylesheet"type="text/css"/>
And it would go in the head of our HTML document like so...
<head>
<title>Our Page Title</title>
<link href="site.css"rel="stylesheet"type="text/css"/>
</head>
Notice that our link tag is a self closing tag with the "/" character at the end of the tag. Also notice that our tag has three attributes, "href", "rel", and "type". "href" is short for Hypertext REFerence and is the URL of the thing we are linking to. In our example above it is our CSS file name "site.css". In this example our css file is in the same folder as our web page so there is no file path used i.e. "folderName/site.css" Next is "rel" short for relationship which is a stylesheet. And last is "type" or MIME Type, in this case "text/css" All three of these elements must be in your link tag.
OK so that is a properly formed link tag and it allows our web page to talk to our CSS file. It also means that our web page will now look first to this file for any styling to be applied when the page is rendered. The only part of this tag you will ever have to edit is the "href" attribute. It must have the name/path to your .css file. Your page must be able to find your CSS file.
Defining styles in an external stylesheet we will use "class"s and "ID"s. A class is denoted using a "." so a class name would be written like so...
.MyClass
{
}
And an ID is denoted using the "#" character like so...
#MyID
{
}
An ID can only be used once on any page where as a class can be used over and over.
3.) Inline styles. This method might easily have been listed first but I chose to list it last because it has another use besides just applying a style to an element on our page. But first to the method. An inline style can be defined within a page element such as a <p> tag or a< h1> tag or any number of other tags. We would do this like so...
<p style="font-family:Tahoma; font-size:14px;color:Black; text-align:left;">
Our paragraph text goes in here...
</p>
This method means applying a style individually to each and every element of our page. This can be a real nightmare especially when our site grows to any size.
There is however another very useful thing we can do with this method. Let's say we have an h1 style defined in our css file like so...
h1
{
font-family:Tahoma;
font-size:28px;
color:Blue;
}
Now let's say we have one particular h1 tag that we want to be different than every other h1 tag on our site. We can use an inline style on the individual tag and it will override the style that is defined in our stylesheet. Styles applied at the element level are applied before styles that are defined in a stylesheet. So we could make a change to our h1 tag like so...
<h1 style="font-size:50px;">
Our altered heading text
</h1>
This will give us an h1 heading that gets all of its styling from our css file except the font-size. The font-size will be applied from the inline style. So this h1 heading will be a blue Tahoma font 50px high instead of 28px high.
Similarities and Differences
In all three of our methods you will notice that styles are defined using the same syntax, a name and a value i.e. name: value; In each pair the name is separated from the value by a colon ":" and each name/value pair is closed with a semicolon ";" This syntax is common across each method whether it's an inline style or an external stylesheet.
What is different is the way our styles are packaged. For an inline style we use the "style" attribute which for inline styles is written like so...
style="name:value;"
This style of notation is used within a tag like so...
<p style="name:value;">
Our paragraph text goes in here...
</p>
You will notice that the style is inside the opening <> brackets and the style="" attribute houses our name/pair elements. But the name:value;always uses the same syntax.
Next, in an internal stylesheet we still see the same name:value; syntax but we wrap it in "<style>" tags like so...
<style type="text/css">
p {font-family:Tahoma;font-size:14px;color:#000000;line-height:16px;letter-spacing:1px;}
h1 {font-family:Arial;font-size:36px;color:Blue;line-height:38px;letter-spacing:1px;}
</style>
No doubt you see some differences here. In our opening style tag we have the "type" attribute that tells our HTML document that the MIME Type is "text/css" and also you will notice that our page elements that we are defining styles for are declared here, i.e. "p { }" and "h1 { }" You will also notice that neither of these is preceded by a "." (class) or a "#" (ID). This is because these are native elements therefore they are denoted simply "p" or "h1" or whatever the element is.
Lastly we come to the external stylesheet. Again we see thename:value; syntax but this time we drop the style declaration altogether. For this method we simply declared the name of our class or ID and then list our style attributes wrapped in curly braces "{ }" like so...
p
{
font-family:Tahoma;
font-size:14px;
color:#252525;
text-indent:12px;
text-align:left;
line-height:20px;
letter-spacing:1px;
width:600px;
max-width:650px;
}
h1
{
font-family:Tahoma;
font-size:28px;
color:Blue;
}
In the above example I have defined styles directly for the <p> tags and the <h1> tags. A better way might be to define a class like so...
.leftAlignedBlue
{
font-family:Tahoma;
font-size:14px;
color:#005bb7;
text-indent:12px;
text-align:left;
line-height:18px;
letter-spacing:1px;
width:600px;
max-width:650px;
}
By using this method when I want to apply this in my HTML document I would simply write my <p> tag like so...
<p class="leftAlignedBlue">
The paragraph text goes here...
</p>
You see in my opening <P> tag I call my class "leftAlignedBlue" and the style that is defined in my CSS file is applied to my paragraph text. Doing it this way I can have several styles defined and apply them whenever or wherever I like.
First a word about tags. Tags, with just a couple of exceptions always have an opening tag and a closing tag. For example a paragraph tag is written like so...
<p>
Your paragraph would go in here...
</p>
Note the "/" character in the closing tag. This tells the browser that this is the end of the paragraph tag block. Everything between the p tags is treated and rendered as a paragraph. This general rule of opening and closing tags is pretty much universal with all HTML code/markup. Exceptions would be in the case of certain tags that don't actually have any content such as an <img> tag. These tags contain all their information inside the tag itself. For example...
<img src="/images/MyPic.gif" alt="alt text goes here" />
Notice the closing bracket "/>" contains our closing "/" character. This is what's considered a self closing tag. Maybe at another time we will dissect the different components of the tag.
OK, let's move on to the CSS.
CSS stands for Cascading Style Sheet
It is a way to add styling to your page layout and content. There are basically 3 ways to add your styling to your content.
1.) Internal stylesheet. With this method we add the CSS rules to the header of your document using the <style> tag. This would be done like so...
<head>
<title>Our Page Title</title>
<style type="text/css">
p {font-family:Tahoma;font-size:14px;color:#000000;line-height:16px;letter-spacing:1px;}
h1 {font-family:Arial;font-size:36px;color:Blue;line-height:38px;letter-spacing:1px;}
</style>
</head>
This method makes our style rule available to the document in which the style is placed. In other words if you want this style applied to other documents then this code has to be placed in the head of each document. Note also that the way our style is written it will be applied to every <p> tag and every <h1> tag in our document.
2.) External stylesheet This is probably the most useful method because it separates the CSS from the document and allows you to keep all of the CSS for your entire site in one place or file. To do this we create a file with a .css extension, something like "site.css" Then we link this file to our HTML document by placing the link in the head section of the HTML document. We write our link like so...
<link href="site.css"rel="stylesheet"type="text/css"/>
And it would go in the head of our HTML document like so...
<head>
<title>Our Page Title</title>
<link href="site.css"rel="stylesheet"type="text/css"/>
</head>
Notice that our link tag is a self closing tag with the "/" character at the end of the tag. Also notice that our tag has three attributes, "href", "rel", and "type". "href" is short for Hypertext REFerence and is the URL of the thing we are linking to. In our example above it is our CSS file name "site.css". In this example our css file is in the same folder as our web page so there is no file path used i.e. "folderName/site.css" Next is "rel" short for relationship which is a stylesheet. And last is "type" or MIME Type, in this case "text/css" All three of these elements must be in your link tag.
OK so that is a properly formed link tag and it allows our web page to talk to our CSS file. It also means that our web page will now look first to this file for any styling to be applied when the page is rendered. The only part of this tag you will ever have to edit is the "href" attribute. It must have the name/path to your .css file. Your page must be able to find your CSS file.
Defining styles in an external stylesheet we will use "class"s and "ID"s. A class is denoted using a "." so a class name would be written like so...
.MyClass
{
}
And an ID is denoted using the "#" character like so...
#MyID
{
}
An ID can only be used once on any page where as a class can be used over and over.
3.) Inline styles. This method might easily have been listed first but I chose to list it last because it has another use besides just applying a style to an element on our page. But first to the method. An inline style can be defined within a page element such as a <p> tag or a< h1> tag or any number of other tags. We would do this like so...
<p style="font-family:Tahoma; font-size:14px;color:Black; text-align:left;">
Our paragraph text goes in here...
</p>
This method means applying a style individually to each and every element of our page. This can be a real nightmare especially when our site grows to any size.
There is however another very useful thing we can do with this method. Let's say we have an h1 style defined in our css file like so...
h1
{
font-family:Tahoma;
font-size:28px;
color:Blue;
}
Now let's say we have one particular h1 tag that we want to be different than every other h1 tag on our site. We can use an inline style on the individual tag and it will override the style that is defined in our stylesheet. Styles applied at the element level are applied before styles that are defined in a stylesheet. So we could make a change to our h1 tag like so...
<h1 style="font-size:50px;">
Our altered heading text
</h1>
This will give us an h1 heading that gets all of its styling from our css file except the font-size. The font-size will be applied from the inline style. So this h1 heading will be a blue Tahoma font 50px high instead of 28px high.
Similarities and Differences
In all three of our methods you will notice that styles are defined using the same syntax, a name and a value i.e. name: value; In each pair the name is separated from the value by a colon ":" and each name/value pair is closed with a semicolon ";" This syntax is common across each method whether it's an inline style or an external stylesheet.
What is different is the way our styles are packaged. For an inline style we use the "style" attribute which for inline styles is written like so...
style="name:value;"
This style of notation is used within a tag like so...
<p style="name:value;">
Our paragraph text goes in here...
</p>
You will notice that the style is inside the opening <> brackets and the style="" attribute houses our name/pair elements. But the name:value;always uses the same syntax.
Next, in an internal stylesheet we still see the same name:value; syntax but we wrap it in "<style>" tags like so...
<style type="text/css">
p {font-family:Tahoma;font-size:14px;color:#000000;line-height:16px;letter-spacing:1px;}
h1 {font-family:Arial;font-size:36px;color:Blue;line-height:38px;letter-spacing:1px;}
</style>
No doubt you see some differences here. In our opening style tag we have the "type" attribute that tells our HTML document that the MIME Type is "text/css" and also you will notice that our page elements that we are defining styles for are declared here, i.e. "p { }" and "h1 { }" You will also notice that neither of these is preceded by a "." (class) or a "#" (ID). This is because these are native elements therefore they are denoted simply "p" or "h1" or whatever the element is.
Lastly we come to the external stylesheet. Again we see thename:value; syntax but this time we drop the style declaration altogether. For this method we simply declared the name of our class or ID and then list our style attributes wrapped in curly braces "{ }" like so...
p
{
font-family:Tahoma;
font-size:14px;
color:#252525;
text-indent:12px;
text-align:left;
line-height:20px;
letter-spacing:1px;
width:600px;
max-width:650px;
}
h1
{
font-family:Tahoma;
font-size:28px;
color:Blue;
}
In the above example I have defined styles directly for the <p> tags and the <h1> tags. A better way might be to define a class like so...
.leftAlignedBlue
{
font-family:Tahoma;
font-size:14px;
color:#005bb7;
text-indent:12px;
text-align:left;
line-height:18px;
letter-spacing:1px;
width:600px;
max-width:650px;
}
By using this method when I want to apply this in my HTML document I would simply write my <p> tag like so...
<p class="leftAlignedBlue">
The paragraph text goes here...
</p>
You see in my opening <P> tag I call my class "leftAlignedBlue" and the style that is defined in my CSS file is applied to my paragraph text. Doing it this way I can have several styles defined and apply them whenever or wherever I like.
Click Here To Test Drive
Learn Accounts in Ldh
Accounts Training in Ldh
My name is Justin Lewis. My digital marketing company has been in business for over 10 years with multiple six-figure years. We do provide a premium web design service.
WSO PRIVATE LABEL RIGHTS :20 PLR Marketing Graphics Modules PLR- 675 mb Over1300 Files,Video tuts & PSD's $3.99 PLR
Keep Ken Strong Benefit.
Learn Search Engine Optimization