close
Home 
blog Website Design Web design and CSS
blog Website Design Web design and CSS
Web design and CSS
Sunday, 05 July 2009 20:05
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
Hits: 5286
Comments (9)
Subscribe to this comment's feed
...
Great article with even better illustrations!
I'm pretty new to the code side of web design myself, and I have found that when there are illustrations things are much easy to understand. My real shortcoming is going through CSS and trying to tweak the code to my liking...
| < Prev | Next > |
|---|
Portfolio Check out our portfolio.
Click Here Web Design Every great business idea takes wings with the launch of a professionally designed website. e-commerce Ecommerce is an agile and trusted business solution.
Click Here Web Design Every great business idea takes wings with the launch of a professionally designed website. e-commerce Ecommerce is an agile and trusted business solution.
