usama_rasab13
New Member
- Messages
- 13
- Reaction score
- 0
- Points
- 0
Please could someone do a tutorial on how to do css scripting Because I have no idea on how to do it
css
- Thread starter usama_rasab13
- Start date
- Messages
- 6,084
- Reaction score
- 368
- Points
- 83
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:
- 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:
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:
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:
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:
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:
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.
- 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>
Code:
.header {
color:red;
}
.footer {
color:green;
}
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.
In other areas, W3Schools is outdated, incomplete and inaccurate. Their CSS section has a few problems of its own, though not as serious. Here are a few alternatives:
Lastly, CSS isn't a scripting language; it isn't even a programming language. "Scripting" specifically refers to interpreted control languages. They're used to control other programs, either acting as glue code (as in shell scripts) or to automate or extend the functionality of a single application (such as Blender or the GIMP).
- Starting with HTML + CSS (on the W3C site)
- HTMLDog's CSS Beginner tutorial
- 20 Websites To Help You Learn and Master CSS
- W3C Tips: Use class with semantics in mind
- Web Style Guide: Semantic Content Markup
Lastly, CSS isn't a scripting language; it isn't even a programming language. "Scripting" specifically refers to interpreted control languages. They're used to control other programs, either acting as glue code (as in shell scripts) or to automate or extend the functionality of a single application (such as Blender or the GIMP).