CSS
|
Before you start using CSS, you should be familiar with HTML. Don’t be worried, you don’t need a huge understanding of HTML. For now, knowledge of some HTML Elements is fine.
CSS allows you to design your Webpage and allows you to set how your HTML Elements are displayed.
Before you start off, I would like to let you know that I will be covering some aspects of CSS as there are many varieties of design properties and functions in CSS.
|
|
| Getting Started |
| To begin using a CSS sheet you will have to create a CSS blank file that has the file format “.css”. For example, if you are creating a file called “design_sheet”, then it should be “design_sheet.css”.
|
|
| To link your CSS file to your HTML file, in each page where you want the design to appear use the <link> tag which should go inside the <head> tag. Look at below example.
|
<head>
<link rel="stylesheet" type="text/css" href=”design_sheet.css">
</head>
|
|
“href” is the location of where the file is stored and the name of file.
|
|
|
| Element Selector |
| To allow the specified HTML element to have a certain style, you just name the HTML element name. Have a look at the example below. |
|
| Example |
| HTML File |
| <b>Hello</b> |
| CSS File |
b
{
color: blue;
text-align: left;
}
|
| What this Shows on the Webpage |
| Hello
|
|
| Before the “:” is the property and after “:” is the value given. |
|
| id Selector |
| CSS id selector uses the id attribute in HTML to name or reference a specific element in HTML. The style or design will be applied to all elements with the same id value.
|
|
| Example |
| HTML File |
| <b id=”text_blue”>Hello</b> |
| CSS File |
|
#text_blue
{
color: blue;
text-align: left;
}
|
| What this Shows on the Webpage |
| Hello
|
|
|
| Class Selector |
| CSS class selector uses the class attribute in HTML to name or reference a specific element in HTML. As before the style or design will be applied to all elements with the same class value. To select certain elements with a class, the character “.”should be placed before the class name.
|
|
| Example |
| HTML File |
| <b class=”text_blue”>Hello</b> |
| CSS File |
|
.text_blue
{
color: blue;
text-align: left;
}
|
| What this Shows on the Webpage |
| Hello
|
|
|
| Also you can use the below method when there are elements with the same class names. So only certain elements are affected rather than all the elements with the same class name.
|
| HTML File |
| <b class=”text_blue”>Hello</b> |
| CSS File |
|
b.text_blue
{
color: blue;
text-align: center;
}
|
| What this Shows on the Webpage |
| Hello
|
|
|
| Styles |
| There are many different styles such as image style, text style, layout, background style and many more. So why not have a look at the website http://www.w3schools.com/css/default.asp to find useful styles that you may find helpful or even COOL. Also the fact that this chapter will go on and on and on and I’ll bore you to death. The funny thing is that you can never stop learning new things about programming languages as the possibilities are endless.
|
|
| Why not have a GO? |
| Exercise: |
| 1) Choose one of the previous Exercise and try to make the Webpage look nice using CSS. |