In order to start coding CSS, you will need to use any of the following methods:
- Create a new file named with a .css extension (for example: style.css) and then link it by placing this code within your <head> and </head> tags in your HTML document:
Code:
<link href="style.css" type="text/css" rel="stylesheet">
- Instead of the above method you can embed your CSS directly into your HTML code. In between <head> and </head>, enter your CSS code wrapped around <style> and </style>. For example:
Code:
<head>
<style>
** Your CSS Code Goes Here ***
</style>
</head>
Okay, now that you are all setup and ready to go, let's start coding. CSS can alter the style of most of the elements in HTML. For example, to change the style of the entire document, you would use the BODY element, since all of the pages visible elements are wrapped in <body> and </body>. In this example, we have used the BODY element to make the background color blue:
Code:
body {
background-color: blue;
}
Notice the formatting that CSS uses. All of the style commands are wrapped in { and }, with the element's name before it. In the style commands, the style you wish to modify (in this case, background-color) is set to 'blue' and a semi-colon is there. The ; and the : are essential, however the space between background-color: and blue is not. For example, we could have used background-color:blue; instead (notice no space inbetween) but let's keep our code simple and clean.
You can also target specific elements of your HTML document. For example, say you have a Paragraph for your content, and a Paragraph for your footer, and you want the style to be different for each one? Well with CSS, you can. You can give your paragraph (or any element for that matter) a name. This is called a 'class'. Let's give our content and footer different classes; for example:
Code:
<p class="content">This is our content paragraph</p>
<p class="footer">This is our footer paragraph</p>
You can now control these specific elements with CSS using the same way as we did before, but we put a dot before the elements name. In this example, we give the header a text color of red and the footer a color of green:
Code:
.header {
color:red;
}
.footer {
color:green;
}
You should also remember that CSS is American, so if you live in the United Kingdom, it's color not colour. So now we have mastered the basics of CSS, let's go through an extra. If you don't wish to use classes or HTML elements, then you can embed the CSS code directly into the element using the STYLE tag. Simply give your HTML element a style attribute, and insert your CSS in between the speech marks. For example:
Code:
<p style="color:orange;">This is my text</p>
In the above tutorial, I have guided you through how you can incorporate CSS and the basics of CSS. However, I have not guided you through all the style types (like background-color) as that is beyond this tutorial. However, for all of the style types I recommend you look at W3Schools.
LinkBack URL
About LinkBacks
x10Hosting Member
Posting Permissions
Reply With Quote
