CSS tutorial 1

Posted on 06/09/2009 by

1



Heya!! People!!..I have shown you how CSS can be used  in Dreamwever, It can also be used in HTML. with CSS – Cascading Style Sheets we can create good-looking websites. with CSS you can control text, size, color, and the layout like backgrounds, margins, tables etc of a website, in one single file.

HTML was Originally designed to describe the informational structure of a document. Its tags and attributes were used to identify a Header, a List and other structural aspects of a document. This did not give the author true control of what a document would look like when rendered by the browser. Then people started adding all sorts of tags to HTML that enabled it to describe some visual aspects of documents. It was soon evident that trying to describe both a document’s structure as well as its layout using the same language would become a pretty big mess, because the associated concepts and needs were entirely different.

Example 1

CSS Background Color

<html>
<head>
<style type=”text/css”>
body
{
background-color:#ff33ff;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello Guys! This is the Background Color by using CSS.</p>
</body>
</html>

My CSS web page!

Hello Guys! This is the Background Color by using CSS

Example 2

Text Color

<html>
<head>
<style type=”text/css”>
body {color:blue}
h1 {color:#ff00ff}
p.ex {color:rgb(200,45,215)}
</style>
</head>
<body>
<h1>This is heading 5</h1>
<p>CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; and much more.</p>
<p>By using CSS to control your fonts, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.</p>
</body>
</html>

This is heading 5

CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; and much more.

By using CSS to control your fonts, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.

Example 3

Font Text

<html>
<head>
<style type=”text/css”>
p.serif{font-family:”Monotype Corsiva, Tahoma”,Georgia,Serif}
p.sansserif{font-family:Verdana,Sans-serif}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p>In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a web page. A block-level element is a standalone piece of content, usually separated by a new line in the HTML, and visually formatted as a block. For example, h1 tags, p tags, and div tags all produce block-level elements on a web page.</p>
<p>You can set margins and borders for block-level elements, position them in a specific location, add background color to them, float text around them, and so on. Manipulating block-level elements is in essence the way you lay out pages with CSS.
</p>
</body>
</html>

Advertisements
Posted in: Coding, CSS