Saturday, May 14, 2011
Introducing CSS in HTML - Tutorial 1
Posted on 10:47 AM by Ram Sidh
CSS is an acronym for Cascading Style Sheets, which, as its name implies, uses specific style sheets to change how a website looks. CSS can be integrated into HTML or can be written separately, with a link attaching it to the original HTML document. CSS is a simple language and is much easier to comprehend and grasp than Hyper Text Mark-Up Language (HTML). CSS is ONLY concerned with changing designs and the basic looks of a website and will not insert functions or scripts unlike HTML (which really doesn't create functions but more basic instructions) or JavaScript.
CSS is ONLY concerned with the "id" and "class" attributes used in HTML to identify and create new styles for that specific element specified.
CSS syntax is easy and is explained below:
For instance here is a very simple example of the syntax of CSS used in style sheets:-
p {color:red; text-decoration:underline; text-align:center;}
Remember, to understand these examples or anything in CSS at all, you HAVE to have at least a minimal or basic understanding of HTML or it is completely impossible to understand the syntax.
Assuming you have basic knowledge of HTML, the "p" you see in the CSS syntax above refers to the "paragraph tag" used in HTML to create neat lines of text. It is called the "selector", or the tag to which you wish the changes in style or design to be made. The rest of the instructions to change the style of the text are written within curly brackets: {}. The styles that we wished to be changed, like the color of the text, the decoration on the text or the alignment of the text are called the "properties" and the changes we assign to these "properties" are called the "properties" respective "values". Each "property" is followed by a colon, and each "value" is followed by a semi-colon which refers to the end of that specific "property" or style change.
There are different ways of inserting a style sheet or independent styles into HTML or even outside as a separate document altogether, simply linked to the HTML.
1. Inserting CSS using Internal Style Sheets
It is possible to insert CSS using Internal Style Sheets, which are actually integrated into the HTML Document your are writing for your website. You can easily do this by adding the <style> tag to your HTML, which should be within the <head> tags. Here is the code explaining how it should be done. Later parts of the code will be explained below the following example:
<html>
<head>
<title>
TEST WEBSITE
</title>
<style type="text/css">
#heading1
{
color:blue;
text-decoration:underline;
text-transform:capitalize;
text-align:center;
font-family:Georgia;
font-size:42px;
padding-top:60px;
}
</style>
</head>
<body>
<p id="heading1">this is a test website!</p>
</body>
</html>
The above example may be a little confusing but it is practically one of the easiest renditions of CSS integrated into HTML as an Internal Style Sheet. Above we inserted a <style> tag in the within which we wrote our CSS selectors, and their respective properties and values. But as you may have noticed, the selector is followed by a hash, and is not the name of any tag in HTML, but the name inserted as the value in the "id" attribute in the <p> tag inside the <body> tags. If you are familiar with the "id" tag, what it does is, it specifies an individual or unique ID, or identification name to any tag, in this case the <p> tag. In the example above, I have given the name "heading1" to the text written within the <p></p> tags.
Example No.1, written at the top of this article, may confuse you, since the selector in that case is just the <p> tag. But, what this does is, it applies the specific style changes inserted to ALL the text within ANY <p></p> tag, whereas the "id" attribute is used to change styles of only ONE specific HTML tag. The "class" tag is to specify the same style changes to a group of different or same tags in HTML.
More examples on that will appear in the following articles in this CSS series.
Now, I'll explain the CSS Code in the Example No.2. The property "color" defines the color of whatever item maybe within the respective tags. In this case it changes the color of the text to the assigned value: blue. There are many ways of defining the color of text or anything else in CSS. One of the most popular are by using the Hexidecimal Codes of Color, which can be found by going to Color Picker. You can copy and paste the code, which must be ALWAYS followed by a hash (#). For example the color "black" in the hexidecimal form is: #000000.
The next property inserted was the "text-decoration" property which defines the decoration used in the respective text. The text-decoration property has some values, like:
CSS is ONLY concerned with the "id" and "class" attributes used in HTML to identify and create new styles for that specific element specified.
CSS syntax is easy and is explained below:
For instance here is a very simple example of the syntax of CSS used in style sheets:-
p {color:red; text-decoration:underline; text-align:center;}
Remember, to understand these examples or anything in CSS at all, you HAVE to have at least a minimal or basic understanding of HTML or it is completely impossible to understand the syntax.
Assuming you have basic knowledge of HTML, the "p" you see in the CSS syntax above refers to the "paragraph tag" used in HTML to create neat lines of text. It is called the "selector", or the tag to which you wish the changes in style or design to be made. The rest of the instructions to change the style of the text are written within curly brackets: {}. The styles that we wished to be changed, like the color of the text, the decoration on the text or the alignment of the text are called the "properties" and the changes we assign to these "properties" are called the "properties" respective "values". Each "property" is followed by a colon, and each "value" is followed by a semi-colon which refers to the end of that specific "property" or style change.
There are different ways of inserting a style sheet or independent styles into HTML or even outside as a separate document altogether, simply linked to the HTML.
1. Inserting CSS using Internal Style Sheets
It is possible to insert CSS using Internal Style Sheets, which are actually integrated into the HTML Document your are writing for your website. You can easily do this by adding the <style> tag to your HTML, which should be within the <head> tags. Here is the code explaining how it should be done. Later parts of the code will be explained below the following example:
<html>
<head>
<title>
TEST WEBSITE
</title>
<style type="text/css">
#heading1
{
color:blue;
text-decoration:underline;
text-transform:capitalize;
text-align:center;
font-family:Georgia;
font-size:42px;
padding-top:60px;
}
</style>
</head>
<body>
<p id="heading1">this is a test website!</p>
</body>
</html>
The above example may be a little confusing but it is practically one of the easiest renditions of CSS integrated into HTML as an Internal Style Sheet. Above we inserted a <style> tag in the within which we wrote our CSS selectors, and their respective properties and values. But as you may have noticed, the selector is followed by a hash, and is not the name of any tag in HTML, but the name inserted as the value in the "id" attribute in the <p> tag inside the <body> tags. If you are familiar with the "id" tag, what it does is, it specifies an individual or unique ID, or identification name to any tag, in this case the <p> tag. In the example above, I have given the name "heading1" to the text written within the <p></p> tags.
Example No.1, written at the top of this article, may confuse you, since the selector in that case is just the <p> tag. But, what this does is, it applies the specific style changes inserted to ALL the text within ANY <p></p> tag, whereas the "id" attribute is used to change styles of only ONE specific HTML tag. The "class" tag is to specify the same style changes to a group of different or same tags in HTML.
More examples on that will appear in the following articles in this CSS series.
Now, I'll explain the CSS Code in the Example No.2. The property "color" defines the color of whatever item maybe within the respective tags. In this case it changes the color of the text to the assigned value: blue. There are many ways of defining the color of text or anything else in CSS. One of the most popular are by using the Hexidecimal Codes of Color, which can be found by going to Color Picker. You can copy and paste the code, which must be ALWAYS followed by a hash (#). For example the color "black" in the hexidecimal form is: #000000.
The next property inserted was the "text-decoration" property which defines the decoration used in the respective text. The text-decoration property has some values, like:
- line-through
- underline
- overline
- blink
You can see the effects of these values by using them in your own CSS documents. In the example above, we have sued the "underline" value which creates an underline for the respective text. The "text-transform" property literally "transforms" the text to various different values. Some are:
- capitalize
- uppercase
- lowercase
In the example above we used the "capitalize" value, which capitalizes each word's first letter.
After this we used the "text-align" property, which defines the alignment of text. The "text-align" property has many values and some of them are:
- center
- right
- left
- justify
After this, we used the "font-family" property. The value of the "font-family" property is usually a group of different fonts. Here is an example of how it would look like:
p {font-family:Georgia, Times New Roman, Helvetica;}
We add more number of fonts to make this strip of code more redundant. If the 'Georgia' font is not installed in the web browser or the computer, then all the text will assume the font of 'Times New Roman', if this font does not exist either, then it will assume the 'Helvetica' font. If any of these fonts are not present, text will assume the default installed font of the browser and computer.
In the example above I've just written down the 'Georgia' font because it is installed and the text will assume the font successfully.
The "font-size" property is easy to understand, and determines the size of the text. It takes values in unit pixel.
The "padding-top" property defines the number of pixels that create the padding between the top of the body and the item itself. There are many other padding properties. They are:
- padding-top
- padding-bottom
- padding-right
- padding-left
There are some more ways to create style sheets. Other than the internal style sheet above, where we wrote our CSS code in between the style tag, and specified the type of style language we were using by creating the attribute "type" and inserting the value as "text/css" specifying the style language as CSS, we can create an external style sheet, where we write ONLY the CSS code and link it to the HTML file using a <link> tag, which we shall discuss in the upcoming tutorials in this series. One of the most popular ways of inserting styles within HTML is by creating inline styles. Here is an example:
<p style="color:red; text-transform:capitalize; font-size:32px;">
i like eating pizzas!
</p>
In this example no. 3, instead of creating an "id" and extracting it in the CSS using the (#) symbol, we add it immediately into that specific tag by inserting a "style" attribute and adding our properties and values within quotes.
So I hope these basic things about CSS have been laid out as clearly as possible. To learn more about HTML, please download our FREE HTML Basics Guide e-book which is in PDF format and read it. You can also find more information from our video channel, you go there by clicking here.
Give us your very important feedback by commenting below and rating this article! Also, if you liked our articles, please Like Us! or Follow Us! using your Facebook or Google Accounts respectively.
Thank you for visiting!
Subscribe to:
Post Comments (Atom)
2 Response to "Introducing CSS in HTML - Tutorial 1"
We appreciate you this information. Which is almost all I'm able to state. You almost certainly make this blog in to something special. Anyone clearly know what you are carrying out, you've got coated numerous facets.Thank you!
Cheapest RS Gold
Cheap Eden Gold
By using modern specifications like CSS3 Design and HTML5, you can considerably decrease the cost of creating and keeping a website when compared to history HTML only web pages.
Leave A Reply