Web design and CSS

Home

blog

Website Design

Web design and CSS

Website Design

Sunday, 05 July 2009 20:05 Written by Administrator

Now a day web page design is a most popular and important works all over the world. Web page is the only one way to display anything in the internet. Basically a webpage made by hyper text markup language (HTML). But only HTML cannot make a web page looking good and more attractive. To solve this problem we can use CSS. CSS is used for provide style for a web page. Now a CSS is most important for web page designing. Every web page designer has to know CSS well. CSS make a web page more attractive and first loaded. You can add CSS with three way 1) Inline CSS 2) internal CSS 3) External CSS.

Inline CSS:

Inline CSS used in the HTML tag. And it is used for every line. Here is some example about Inline CSS.

Example:

<h1 style="font-family:Arial, Helvetica, sans-serif; color:#00CC33;
font-size:16px;">Hi It is the inline CSS</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:14px;
 font-weight:bold; color:#333333;" >Hi i am sazzad. i am a web d
esigner and a web developer. how are you</p>

This style will work for this line only.

internal CSS:

Internal CSS stay in the <head> </head> section with <style> </style> section . Here is some example about Internal CSS. Example:

<head><style>
h1{font-family:Arial, Helvetica, sans-serif;color:#00CC33;font-size:16px;}
p{font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000;}
</style></head>

This style will work for all the HTML <h1> tag all the web page.

External CSS:

At first we have to making an external CSS file. For this reason open up notepad or any kind of text editor and we use the following CSS code. CSS Code:

h1{color:#009933;font-family:Arial, Helvetica, sans-serif;}
p{padding:5px;text-align:left;font-family:Arial, Helvetica, sans-serif;font-size:14px;}

Now we can save this file as a CSS(.css) file. Name the file “style.css” (without the quotes). Now we create a now html file and we use the following code. HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<h1>hello world. how are you</h1>
<p>Hi i am sazzad. i am a web designer and a web developer.
how are you</p>
</body>
</html>

Now we can save the file as a HTML (.html) in the same directory as our CSS file. The External style sheet (CSS File) enable to change the appearance and layout of all the pages in our web site just changing one single CSS file. In the future post I will discuss some style and some more tips about CSS.

Bookmark

Email this

Comments (5) Add Comment

Subscribe to this comment's feed

nits

November 08, 2009

122.173.197.230

Votes: +0

...

nice stuff great help for us.

randy

March 08, 2010

124.41.252.222

Votes: +0

...

Hi, very nice blog!i also much better your web design and web blog.

Web Development

July 14, 2010

203.128.27.107

Votes: +0

...

hi there, thanks for a useful information.

it surely is handy for the beginners to develop their basic concepts about the use of css in web design.

.........
Ronnie
Web design and web development

Bradford Sherrill

July 21, 2010

71.238.48.249

Votes: +0

...

Great article for the novice web designer or one wanting to learn web design. Another FYI is generally speaking inline css style tags maybe considered old school, and external css style sheets maybe considered web design 2.0.

Business University

August 11, 2010

114.143.163.225

Votes: +0

...

This very useful information to setup a new business, it also useful to beginners who learn web design this is a great article.
=============
Jeny Douglas

Write comment