menu
Ad goes here

Thursday, 6 September 2012

CSS / Stylesheet Introduction

CSS, or Cascading Styles Sheets, is a way to style HTML.
There are three ways to apply CSS to HTML:
  1. Inline Style- Using the style attribute in HTML elements
  2. Internal Style- Using the <style> element in the <head> section
  3. External Style- Using an external CSS file - <link rel="stylesheet" type="text/css" href="mystyle.css" />

1. Inline CSS:

To use inline styles, please use the style attribute in the relevant tag. The style attribute can contain any CSS property. Please see example below.

Background Color Inline style:
<!DOCTYPE html>
<html>
<body style="background-color:red; ">
    Thanks to visit our site.  Please feel free to contact us.
</body>
</html>

Paragraph Inline style:
<!DOCTYPE html>
<html>
<body style="background-color:red; ">
    <p style=”font-family:Arial, font-size:12px; color:#ff0000;”>
Thanks to visit our site. 
Please feel free to contact us.</p>
</body>
</html>

Font Family, Font Color, Font Size Inline Style:
<!DOCTYPE html>
<html>
<body style="font-family:Arial;  color:#ffffff"; font-size:12px>
Thanks to visit our site.  Please feel free to contact us.
</body>
</html>


2. Internal Style Sheet:

The internal style can be used before </head> tag by using <style> tag.
<head>
<style type="text/css">
body { background-color:red;  font-family:Arial; color:#ffffff"; font-size:12px  }
p { color:yellow "; font-size:14px }
</style>
</head>



3. External Style:

External style is the ideal way to applied many pages from a single css file. Before using the external style in your HTML document, first you have to create a .CSS file.

Use any text editor to create the file and save it in .css format.

CSS file with relevant properties.
/* CSS Document */
Body { margin:0; padding:0; background-color:red; font-family:Arial, color:#fff}
P { color:#fff; font-size:12px;}
h1 { font-size:18px; color:yellow;}
Let's see how to include the CSS file.
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

No comments:

Post a Comment

Books for you (Crafted with )