1st Day

CSS stands for Cascading Style Sheet.
CSS is used to control the style of a web

document in a simple and easy way.CSS to control the style and layout of multiple
Web pages all at once.Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web pages
presentable .CSS is created and maintained through a group of people within the
W3C called the CSS Working Group
Advantages of CSS
 CSS saves time

 Pages load faster
There are three ways of inserting a style sheet :
 External style sheet

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 Internal style sheet
CSS Style Rule Syntax as follows:
selector { property: value }
Selector: A selector is an HTML tag at which style will be applied. This could be any
tag like <h1> or <table> etc.
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color or border etc.
Value: Values are assigned to properties. For example color property can have value
either red or #F1F1F1 etc
Internal CSSrules into an HTML document using the <style> element. This tag is
placed inside <head>...</head> tags.
<head>
<style type="text/css">
Style Rules
............
</style>
</head>
 Inline style
An inline style can be used if a unique style is to be applied to one single occurrence
of an element.
<html>
<head>
</head>
<body style="background-color:gray">
<p style="background:green; color: white;">A background and
font color with inline CSS</p>
</body>
</html>
CSS supports a number of measurements
% - Defines a measurement as a percentage relative to another value
cm- Defines a measurement in centimeters.

em -A relative measurement for the height of a font in em spaces
ex -This value defines a measurement relative to a font's x-height
in- Defines a measurement in inches.
mm- Defines a measurement in millimeters
pc-Defines a measurement in picas. A pica is equivalent to 12 points.
Pt- Defines a measurement in points. A point is defined as 1/72nd of an inch.
px Defines a measurement in screen pixels.
CSS uses color values to specify a color. Typically, these are used to set a color either
for the foreground of an element(i.e., its text) or else for the background of the
element. They can also be used to affect the color of borders and other decorative
effects.
Hex Code : #RRGGBB
Short Hex Code: #RGB
RGB :%rgb(rrr%,ggg%,bbb%)
RGB Absolute:rgb(rrr,ggg,bbb)
keyword:aqua, black, etc.
CSS Id and Class
id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
#para1
{
text-align:center;
color:red;
}
<html>
<head>
p{color:blue;font-size:50px};
#para{color:green; }
</style>
</head>
<body>
<p>This is a paragraph</p>
<p id="para">This is a paragraph</p>
<p id="para">This is a paragraph</p>
</body>
</html>
The class selector is used to specify a style for a group of elements. The class selector
uses the HTML class attribute, and is defined with a "."
.center {text-align:center;}
<html>
<head>
p{color:blue;font-size:50px}
.para{color:green; }
</style>
</head>
<body>
<p class="para">This is a paragraph</p>
<p class="para">This is a paragraph</p>
</body>
</html>
Background Property:
The background-color property is used to set the background color of an element .
<html>
<head>
body{background-color:Green; }
</style>
</head>
<body>
<p>Hello! This is my frist CSS</p>
</body>
</html>
The background-image property is used to set the background image of an element.

<html>
<head>
Body{background-image: url(pic.jpg);}
</style>
</head>
<body>
</body>
</html>
The background-repeat property is used to control the repetition of an image in the

background.
By default background-repeat property will have repeat value..
<html>
<head>
Body{background-image: url(pic.jpg);background-repeat:repeat}
</style>
</head>
<body>
</body>
</html>
no-repeat value for background-repeat property if you don't want to repeat an

image, in this case image will display only once.
<html>
<head>
Body{background-image: url(pic.jpg);background-repeat: no-repeat}
</style>
</head>
<body>
</body>
</html>
Repeat-y to repeat the background image vertically.
<html>
<head>
Body{background-image: url(pic.jpg);background-repeat: repeat-y}
</style>
</head>
<body>

</body>
</html>
Repeat-x to repeat the background image horizontally.
<html>
<head>
Body {background-image: url(pic.jpg); background-repeat: repeat-x}
</style>
</head>
<body>
</body>
</html>
how to set the background image position 100 pixels away from the left side.
<html>
<head>
Body {background-image: url(pic.jpg); background-position:400px 200px;}
</style>
</head>
<body>
</body>
</html>
Background attachment determines whether a background image is fixed or scrolls

with the rest of the page.The background-attachment property is used to control the
scrolling of an image in the background.
Fixed set the fixed background image.
<html>
<head>
Body {background-image: url(pic.jpg); background-attachment:fixed

;}
</style>
</head>
<body>
</body>
</html>
Scrollto set the scrolling background image
<html>
<head>
Body {background-image: url(pic.jpg); background-attachment:scroll;}

</style>
</head>
<body>
</body>
</html>
The background property is used as shorthand to specify a number of other

background properties.
<html>
<head>
Body {background: url(pic.jpg) repeat fixed ;}

</style>
</head>
<body>
</body>
</html>
Fonts CSS
The font-family property is used to change the face of a font.
<html>
<style type=”text/css”>
P {font-family:georgia,garamond,serif
}
</style>
<head>
</head>
<body>
</body>
</html>
The font-style property is used to make a font italic or oblique.
<html>
P { font-style:italic; }
</style>
<head>
</head>
<body>
</body>
</html>
The font-variant property is used to create a small-caps effect.
<html>
P { font-variant:small-caps
;}
</style>
<head>
</head>
<body>
</body>
</html>
The font-weight property is used to increase or decrease how bold or light a font
appears.font-weight property provides the functionality to specify how bold a font is.
Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600,
700, 800, 900.
<html>
P { font-weight:bold
;}
</style>
<head>
</head>
<body>
</body>
</html>
The font-size property is used to increase or decrease the size of a font.The font-size
property is used to control the size of fonts. Possible values could be xx-small, x-
small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html>
P { font-size:50px;
;}
</style>
<head>
</head>
<body>
</body>
</html>
The font property is used as shorthand to specify a number of other font properties .
<html>
P { font:50px bold
;}
</style>
<head>
</head>
<body>
</body>
</html>
Text CSS
The color property is used to set the color of a text .
<html>
<head>
h1 {color:red;}
p {color: green;}
</style>
</head>
<body>
<h1>New Delhi</h1>
<p>New Delhi, Feb 7 (IANS) Actress Ayesha Takia is upset after a ground staff
member of Kingfisher Airlines misbehaved with her younger sister Nisha at the
airport.
"Been getting retweets about Ayesha Takia and KFA. not too sure who she is, an actor
of some sorts?? But it seems something has upset her!!" he posted. </p>
</body>
</html>
The direction property is used to set the text direction.Possible values are ltr or rtl.
<html>
<head>
h1 {direction:rtl;}
p {color: green;}
</style>
</head>
<body>
<h1>New Delhi</h1>
<p>New Delhi, Feb 7 (IANS) Actress Ayesha Takia is upset after a ground staff
member of Kingfisher Airlines misbehaved with her younger sister Nisha at the
airport.
"Been getting retweets about Ayesha Takia and KFA. not too sure who she is, an actor
of some sorts?? But it seems something has upset her!!" he posted. </p>
</body>
</html>
The letter-spacing property is used to add or subtract space between the letters that
make up a word.
<html>
<head>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>Welcome to Cncwerbworld</h1>
<h2>Welcome to Auxirpvt ltd</h2>
</body>
</html>
The word-spacing property is used to add or subtract space between the words of a
sentence.
<html>
<head>
p {word-spacing:40px;}
</style>
</head>
<body>
<p>
SRK keeps updating the comments/opinions of his two kids. Recently he tweeted that
his daughter's remarks made him feel on top of the world. 'My lil girl said she is
proud of me... uff feel 6 ft 2 inches tall... loved and blessed to have her in my life. My
beautiful girl,' (sic) Shah Rukh wrote. Though the 11-year-old is quite proud of her
dad, that doesn't mean she approves his bad habits as well..
</p>
</body>
</html>
The text-indent property is used to indent the text of a paragraph.
<html>
<head>
p {text-indent:80px;}
</style>
</head>
<body>
<p>Daughter just reprimanded me... how can u be the HT survey youth role model if
you smoke. So to all the youths out there... please don't smoke!! (sic)" tweeted Shah
Rukh. "Big reprimand for smoking from my strict little atom bomb of a daughter!!!"
he added. 46-year-old King Khan is said to be a chain-smoker but has admitted
smoking is the "worst habit". '</p>
</body>
</html>
text-align property is used to align the text of a document.
<html>
<head>
H1{text-align:center}
H1{text-align:right}
</style>
</head>
<body>
<h1 >Indian cricket in critical situation</h1>
<p>Feb, 2012</p>
<p>His fans look up to him as an idol, but superstar Shah Rukh Khan's daughter
Suhana believes her father isn't the perfect youth icon as he smokes a lot.</p>
<p><b>Note:</b> Daughter just reprimanded me... how can u be the HT survey

youth role model if you smoke. So to all the youths out there... please don't smoke!!
(sic)" tweeted Shah Rukh.
</body>
</html>
text-decoration property is used to underline, overline, and strikethrough

text.Possible values are none, underline, overline, line-through, blink..
<html>
<head>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a href="http://www.auxir.com">Auxir</a></b></p>
<p>SRK keeps updating the comments/opinions of his two kids. Recently he tweeted
that his daughter's remarks made him feel on top of the world. 'My lil girl said she is
dad, that doesn't mean she approves his bad habits as well.</p>
</body>
</html>
The text-transform property is used to capitalize text or convert text to uppercase or

lowercase letters.
<html>
<head>
p{text-transform:uppercase;}
</style>
</head>
<body>
<p >this is auxirpvt.</p>
<p >both are awesome software development comp.</p>
</body>
</html>
The white-space property is used to control the flow and formatting of text.Possible
values are normal, pre, nowrap.
<html>
<head>
P{white-space:pre;}
</style>
</head>
<body>
<p><b><a href="http://www.auxir.com">Auxir</a></b></p>
<p>SRK keeps updating the comments/opinions of his two kids. Recently he tweeted
that his daughter's remarks made him feel on top of the world. 'My lil girl said she is
dad, that doesn't mean she approves his bad habits as well.</p>
</body>
</html>

1st Day

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1st Day

Uploaded by

Copyright:

Available Formats

CSS stands for Cascading Style Sheet.

CSS is used to control the style of a web

 CSS saves time

There are three ways of inserting a style sheet :

 External style sheet

 Internal style sheet

CSS Style Rule Syntax as follows:

selector { property: value }

<p style="background:green; color: white;">A background and

font color with inline CSS</p>

CSS supports a number of measurements

% - Defines a measurement as a percentage relative to another value

cm- Defines a measurement in centimeters.

ex -This value defines a measurement relative to a font's x-height

in- Defines a measurement in inches.

mm- Defines a measurement in millimeters

pc-Defines a measurement in picas. A pica is equivalent to 12 points.

Pt- Defines a measurement in points. A point is defined as 1/72nd of an inch.

px Defines a measurement in screen pixels.

Hex Code : #RRGGBB

Short Hex Code: #RGB

keyword:aqua, black, etc.

The id selector is used to specify a style for a single, unique element.

<p id="para">This is a paragraph</p>

<p id="para">This is a paragraph</p>

<p class="para">This is a paragraph</p>

<p class="para">This is a paragraph</p>

The background-color property is used to set the background color of an element .

<p>Hello! This is my frist CSS</p>

The background-image property is used to set the background image of an element.

<p>Hello! This is my frist CSS</p>

The background-repeat property is used to control the repetition of an image in the

By default background-repeat property will have repeat value..

<p>Hello! This is my frist CSS</p>

no-repeat value for background-repeat property if you don't want to repeat an

Body{background-image: url(pic.jpg);background-repeat: no-repeat}

<p>Hello! This is my frist CSS</p>

Repeat-y to repeat the background image vertically.

Body{background-image: url(pic.jpg);background-repeat: repeat-y}

<p>Hello! This is my frist CSS</p>

Repeat-x to repeat the background image horizontally.

Body {background-image: url(pic.jpg); background-repeat: repeat-x}

<p>Hello! This is my frist CSS</p>

Body {background-image: url(pic.jpg); background-position:400px 200px;}

<p>Hello! This is my frist CSS</p>

Background attachment determines whether a background image is fixed or scrolls

Fixed set the fixed background image.

Body {background-image: url(pic.jpg); background-attachment:fixed

<p>Hello! This is my frist CSS</p>

Scrollto set the scrolling background image

Body {background-image: url(pic.jpg); background-attachment:scroll;}

The background property is used as shorthand to specify a number of other

Body {background: url(pic.jpg) repeat fixed ;}

<p>Hello! This is my frist CSS</p>

The font-family property is used to change the face of a font.

The font-style property is used to make a font italic or oblique.

The font-variant property is used to create a small-caps effect.

The color property is used to set the color of a text .

<h2>Welcome to Auxirpvt ltd</h2>

The text-indent property is used to indent the text of a paragraph.

text-align property is used to align the text of a document.

<h1 >Indian cricket in critical situation</h1>

<p><b>Note:</b> Daughter just reprimanded me... how can u be the HT survey