Pt3 Learn CSS to enhance your website

Category : How to make web game Tags : css html script tutorial

CSS or Cascading Style Sheet is a kind of Markup Language which is used to format the HTML code. It plays a very important role in formatting the HTML tags properties such as colors, size, margin space and so on. Almost every website you found in the internet uses CSS.

So, let?? begin with a plain HTML file.

Code:

<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
This is the web content
</body>
</html>

Result:

Next, let?? add in the CSS code into the HTML to change the tag properties.

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
margin:0px;
background-color:black;
font-family:arial,verdana,tahoma;
font-size:12px;
color:white
}
</style>
</head>
<body>
This is the web content
</body>
</html>

Result:

As you can see, the CSS has changed the formatting of the content.

Referring to the code above, you could notice we have added the <style> in the header zone of the code. Within the <style> zone, we have a set of CSS code to format the properties for the body tag of the HTML file. There are several attributes which you could set on the properties as explained below;

margin:0px;

This attribute set the empty space margin which frames your browser content.

background-color:black;

This attribute set the background color of your browser content.

font-family:arial,verdana,tahoma;

This attribute set the type of font to be used within the body content. Three types of font are mentioned here. Depends on the font availability on the clients computer, the first font (arial) will be the default font type followed by the next one.

font-size:12px;

This attribute set the size of the font.

color:white

This attribute set the font color.

So, let?? add another item into the CSS list.

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
margin:0px;
background-color:black;
font-family:arial,verdana,tahoma;
font-size:12px;
color:white
}
b{
color:pink;
text-decoration:underline;
}
</style>
</head>
<body>
This is the web content<br/>
With some <b>bold</b> text
</body>
</html>

Result
Here, we have added a CSS code to format the <b> tag. In this case, we have set the color of the font to be pink in color and decorated it with an underline.

Using CSS Class attributes.
You can create a list of CSS class setting to place certain formatting into certain individual tags whenever you need it. Let say I want to format a <b> tag into blue color and then another <b> tag into green in color.

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
margin:0px;
background-color:black;
font-family:arial,verdana,tahoma;
font-size:12px;
color:white
}
b{
color:pink;
text-decoration:underline;
}
.blue{
color:blue
}
.green{
color:green
}
</style>
</head>
<body>
This is the web content<br/>
With some <b>bold</b> text in <b class=??lue??Blue</b> and <b class=??reen??Green</b> in color.
</body>
</html>

Result:

Creating a CSS Website Template
CSS template is very common in today?? web design because it is very feasible and you only need to change the CSS settings to change the entire look of the web page. The main element in creating a CSS template is using the <div> tag. A <div> tag is used to create a rectangular region where you could place contents into it.

So, let say I want to make a template with three main rectangular box or region as below;

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
background-color:black
}
div{
color:white
}
.yellow{
float:left;
border:2px solid yellow;
width:400px;
}
.red{
float:left;
width:100%;
height:50px;
margin:2px;
background-color:red
}
.blue{
float:left;
width:100px;
height:80px;
margin:2px;
background-color:blue
}
.green{
float:right;
width:280;
height:80px;
margin:2px;
background-color:green
}
</style>
</head>
<body>

<div class="yellow">
<div class="red">Text
</div>
<div class="blue">Text
</div>
<div class="green">Text
</div>
</div>
</body>
</html>

Result:

Here you have a simple web template with three rectangular regions.

The inline CSS
Instead of placing your CSS code in the header of your HTML file, you can also place them right inside the tag.

Code:

Result:
Bold font in red

Linking external CSS file.
Instead of placing your entire CSS library into the header of your HTML file, you can also link them from an external CSS file. Simply write all your CSS content into a file with a file name style.css.
Then place the code below into your HTML header to link the CSS file.

Post Your Comment Here

Your Name
Email Address
Homepage