CSS is used to control the style
f a web document in a simple and easy way. CSS stands for Cascading Style Sheet It
defines how to display HTML elements. HTML was never intended to contain tags
for formatting a document.
CSS
handles the look and feel part of a web page. Using CSS, you can control the
color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, as
well as a variety of other effects.
CSS
is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTM. Below are some Example of a CSS Code
p
{colour:green;text-align:center;}
h1{color:bluer; text text-align:left;}
Types of CSS:
Internal CSS: Internal CSS is defined in the header of a Web page and
applies to the Web page document. A new tag must be added <style>, inside the <head> tag. E.g
<head>
<style type="text/css"></style>
</head>
<body>
External
CSS: The use of external CSS helps to keep CSS separate from HTML codes.
Placing CSS in a separate file allows for easier maintenance of web pages. To
use external CSS file, we need to first create the required CSS code and save
it with a ".css" file extension.This CSS file is then referenced in your
HTML codes using the <link>instead of <style> tag. e.g
<html>
<head>
<link
rel="stylesheet" type="text/css"
href="texternal.css" />
</head>
<body>
Advantages of CSS
·
CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web
pages as you want.
·
Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply to all the occurrences of that
tag. So less code means faster download times.
· Easy maintenance - To make a global change, simply change the style, and all elements in
all the web pages will be updated automatically
3.3 CSS types and example
Ø
Example
of an internal CSS
<!DOCTYPE html>
<html
lang="en-US">
<html>
<head>
<style
type="text/css">
h1 { color: blue; font-weight:
normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
p {colour: white; }
body{background-color: green; }
h2{color:white;
text-align:center;}
h3{color:violet;
text-decoration:blink;}
</style>
<link rel="icon"
type="image/png"
href="myFavicon.png">
<title> Introduction to Web
Design |
This is the title bar </title>
</head>
<body>
<p
style="font-variant:small-caps;"> This text will be rendered as
full caps </p>
<p
style="text-decoration:underline;"> This will be underlined
</p>
<p
style="text-decoration:line-through;"> This will be striked
through. </p>
<p style="text-decoration:overline;">
This will have a over line. </p>
<h1>this text is blue
</h1>
<h2>this text will have a
white text color and be centralized </h2>
<h3>this text will have a
violet text color and will also have a blinking effect </h2>
<p style="background:grey;
"> This is inline CSS </p>
<p>Move the mouse over the
words to see the cursor change:</p>
<div
style="cursor:text">hover your cursor on this
text.........................CURSOR</div>
<div
style="cursor:wait">hover your cursor on this text
wait......WAITING!</div>
<div
style="cursor:help">hover your cursor on this
text..............................HELP</div>
</body>
</html>
OUTPUT
>>>>> Download Now
ReplyDelete>>>>> Download Full
>>>>> Download LINK
>>>>> Download Now
>>>>> Download Full
>>>>> Download LINK nV