Scribd
Upload
225 views

CSS Stands For Cascading Style Sheets. It Is A Style Sheet Language That Acts As The Presentation Layer For Markup Languages Such As HTML and XHTML

CSS stands for Cascading Style Sheets and is used to style HTML and other markup languages. There are three main ways to apply CSS styles: inline, internal, and external stylesheets. CSS uses selectors to target elements and properties to style them by setting values like color, font, size, and other visual properties. Common selectors include type, class, ID, and descendant selectors. The box model in CSS describes the layout of elements using properties like content, padding, border, and margin.

Uploaded by

Ankit Srivastava
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
225 views

CSS Stands For Cascading Style Sheets. It Is A Style Sheet Language That Acts As The Presentation Layer For Markup Languages Such As HTML and XHTML

CSS stands for Cascading Style Sheets and is used to style HTML and other markup languages. There are three main ways to apply CSS styles: inline, internal, and external stylesheets. CSS uses selectors to target elements and properties to style them by setting values like color, font, size, and other visual properties. Common selectors include type, class, ID, and descendant selectors. The box model in CSS describes the layout of elements using properties like content, padding, border, and margin.

Uploaded by

Ankit Srivastava
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 82

CSS

CSS stands for Cascading Style Sheets. It


is a style sheet language that acts as the
presentation layer for markup languages
such as HTML and XHTML.
SYNTEX OF CSS
The syntax of CSS declaration is as follows:

selector selectorname

{ property:value;
  ...
}

There is no limit on the number of property:value pair that can be


specified for a selector.

the following property:value declaration:

color : yellow;

There are three main types of selectors: type selectors, class


selectors, and ID selectors.

Type selectors are existing (X)HTML tags such as <body> and


<h1>. Class and ID selectors are user-defined selectors.
GROUPING

If multiple selectors share the same CSS properties, they


can be declared together. This is called "grouping". For
example, if <h1>, <h2>, and <h3> share the same style,
they can be declared together as follows:

h1 h2 h3

{
  property:value;
  ...
}
DESCENDANT SELECTORS

Descendant selectors are an elegant way to


apply styles to specific areas of your page while
reducing the need to embed classes within
elements. First introduced in CSS1 in 1996,
descendant selectors (then called contextual
selectors) match elements that are descendants
of other elements in the document tree.
Composed of two or more selectors separated by
whitespace, descendant selectors apply styles to
elements that are contained within other
elements.
SYNTAX FOR
DESCENDANT SELECTORS
[Parent Selector] [Child Selector]

{
  property:value;
  ...
}

means that text in the <b> element inside the <li>


element will be yellow. Text in the <b> elements not
within the <li> element will not be affected by this
stylesheet.
EXAMPLE OF DESCENDANT SELECTOR
div.nav ul {font-size:1.1em;}
The above selector is a pattern that matches all ul elements contained within divs
with a class of .nav. So this:
.nav {font-size:1.1em;}
<div>
<ul>
<li class="nav">One</li>
<li class="nav">Two</li>
</ul>
</div>
Becomes this:
div.nav ul {font-size:1.1em;}
<div class="nav">
<ul> <li>One</li>
<li>Two</li>
</ul> </div>
CSS STYLESHEET

There are three ways to apply a CSS style sheet to an

HTML document:

· Inline

· Internal

· External Link
INLINE STYLESHEET

Styles can be declared within the HTML document. For


example,

<p style='font-family:verdana; font-size:16;'>This is font size


16.</p>

The above HTML code renders the following:

This is font size 16.


INTERNAL STYLESHEET

Styles can be embedded within the HTML (usually within the

<head> tag). For example:-

<head> <style type="text/css">

    div { background-color:#FF0000; }

  </style>

</head><body>

  <div> The background color is red </div>


</body>

The above HTML code renders the following:

The background color is red


EXTERNAL STYLESHEET

CSS declarations are stored in a file external to the HTML

document. That file typically has an extension of .css. Within the

<header> .. </header> tags of the HTML document, you include

the following declaration:

<link rel=“stylesheet” type="text/css“ href=“file.css">

This will apply the CSS declarations stored in 'external-

stylesheet.css' into the HTML document.


CLASS SELECTOR

Class is specified by including a period (.) before the selector name. The syntax

for declaring a Class selector is as follows:

.[Class Name] {

  property:value;

  ...

For example,

.navbar {

color:#0000FF;

To apply this style to the HTML, using the following code:

<p class="navbar">This is a sample using a Class selector.</p>


MULTIPLE CLASSES
It is possible to include multiple classes at the same time. For example, assuming

we have the following CSS declaration,

.applylarge {

  font-size:20px;

.applyred {

  color:#FF0000;

the following HTML,

<p class="applylarge applyred">This is an example of multiple classes.</p>

would render,

This is an example of multiple classes.


ID SELECTOR

ID is specified by including a sign (#) before the selector name. The syntax

for declaring an ID selector is as follows:

#[ID Name]

{property:value; }

For example,

#footer {

color:#FF00FF;

To apply this style to the HTML, using the following code:

<p id="footer">This is a sample using an ID selector.</p>

The above HTML code renders:

This is a sample using an ID selector.


WHAT IS THE DIFFERENCE BETWEEN A CLASS
AND AN ID?

A Class definition can be used several times throughout


your document, while an ID can only be used once. If you
have a style that you want to apply several times throughout
the document, you need to use a Class. However, it if only
want to apply the style once (for instance, to position a
particular element, you should use the ID.
EXAMPLE ID AND CLASS
<!--CSS part:-->

<style type="text/css">

#greenidstyle {color:green}

.redclassstyle {color:red}

</style>

<!--HTML part:-->

<body>

<p id="greenidstyle">first line of copy for id</p>

<p class="redclassstyle">second line of copy for class</p>

<p id="greenidstyle" class="redclassstyle">third line of copy for

combined</p>

</body>
DIV
Div divides the content into individual sections. Each section can then have its

own formatting, as specified by the CSS. Div is a block-level container, meaning

that there is a line feed after the </div> tag.

For example, if we have the following CSS declaration:

.large {

  color: #00FF00;

  font-family:arial;

  font-size: 4pt;

The HTML code

<div class="large">

  This is a DIV sample.

</div>

gets displayed as

This is a DIV sample.


RELATIVE UNITS
Relative units include:
· px: pixels
· em: em
· ex: height of letter x
Absolute units include:
· in: inches
· cm: centimeters
· mm: millimeters
· pt: points, 1 pt = 1/72 in
· pc: picas, 1 pc = 12 pt
If no unit is specified, the default unit is px.
Below are examples for each unit type:
CSS Declaration
Output
p {font-size:9px;} Font Size 9px.
p {font-size:3em;} Font Size 3em.
p {font-size:3ex;} Font Size 3ex.
p {font-size:0.2in;} Font Size 0.2 inch.
p {font-size:0.5cm;} Font Size 0.5 cm.
p {font-size:12mm;} Font Size 12 mm.
p {font-size:24pt;} Font Size 24 pt.
p {font-size:2pc;} Font Size 2 pc.
BOX MODLE
The box model is an important concept in CSS. It
dictates how elements are laid out. The box model
is shown below:
The innermost component is the content. Padding
is applied outside the content area. Border is then
applied outside of the padding area. Finally,
margin is applied outside of the padding area.
Margins specify the relationship between different
elements.
DIAGRAM OF BOX MODLE
MARGIN ATTRIBUTE

Margin is the space outside of the border,


and is used to determine spacing among the
different elements. In a box, there are four
sides. So, we can specify margins up to the
4 sides:
· margin-top
· margin-right
· margin-bottom
· margin-left
Margins can be specified in 3 ways: length, percentage,
or auto.
example:
#container {
margin-top:5px;
margin-left:10%;
margin-right:auto;
margin-bottom:20px;
border: 1px solid 000000;
}
The following HTML
<div id="container">
This is an example for the margin
</div>
BORDER

Common ways of specifying border properties in


CSS include the following:
· border-style
· border-width
· border-color
· border-top-, border-left-, border- bottom-,
border-right-
· border
BORDER STYLE
The border-style property
defines the format of the border.
The table below shows the
possible values and how each
one renders.
CSS Declaration p {border-style:ridge;}
Output Ridge Border
p {border-style:solid;} p {border-style:inset;}
Solid Border Inset Border
p {border-style:dashed;} p {border-style:outset;}
Dashed Border Outset Border
p {border-style:double;}
Double Border
p {border-style:dotted;}
Dotted Border
p {border-style:groove;}
Groove Border
BORDER-WIDTH

The border-width property specifies the width of the border.


The value can be "thin", "medium", "thick", or a numerical
width.

CSS Declaration:-

p {border-width:9px; border-style:solid;}

p {border-width:medium; border-style:dashed;}
BORDER COLOR
The border-color property specifies the color of the
border.

Examples below:

CSS Declaration:-

p {border-color:#0000FF; border-style:solid;}

p {border-color:red; border-style:dotted;}
BORDER-LEFT,BORDER-RIGHT,BORDER-TOP,BORDER-
BOOTOM

Directions (top, left, bottom, right) can be combined with style, width,

and color to form a 3-part CSS command. For example, border-top-

style specifies the style of the top border. Some examples below:

CSS Declaration:-

p {border-top-style:solid; border-bottom-style:dotted;}

p {border-top-style:solid; border-top-width:medium;}

p {border-left-style:solid; border-bottom-style:dashed;

border-bottom-color:#00FF00;}
BORDER

If the characteristics for all 4 sides of the border are the

same, they can be combined into a single line using the

border property. In addition, all three border properties

(border-style, border-width, and border-color) can be

combined into a single line with the border command.

For example, with the CSS declaration,

p { border:#0000FF 5px solid; }


PADDING
The padding is the space just outside the content area, and just inside the
border area.
we can specify paddings up to the 4 sides, plus a general padding property:
· padding-top
· padding-right
· padding-bottom
· padding-left
we can used padding as a shortcut for the above four properties.
paddings can be specified in 3 ways: length, percentage, or auto.
example:
#container {
  padding-top:15px;
  padding-left:5px;
  padding-right:30px;
  padding-bottom:40px;
  border: 1px solid 000000; }
The following HTML
<div id="container">
This is an example for the padding
</div>
PADDING SHORTCUTS

All four paddings can be specified on a single line using the


"padding" property. The syntax is as follows:

padding: [padding-top] [padding-right] [padding-bottom]


[padding-left]

The order is very important here. The first element is always


the top padding, the second is always the right padding, the
third is always the bottom padding, and the fourth is always
the left padding.
BACKGROUND

Common ways of specifying background properties in CSS

include the following:

background-attachment: Specifies whether the background stays

fixed on the screen.

background-color: Specifies the color of the background.

background-image: Specifies the image to use for the

background.

background-position: Specifies the position of the background.

background-repeat: Specifies whether the background image

should be repeated vertically or horizontally or both.


BACKGROUND ATTACHMENT
The background-attachment property specifies whether a background stays

fixed on the screen. Possible values are "fixed" (background stays in the

same place when scrolling) and "scroll" (background moves with the rest of

content when scrolling).

Below are two examples:

body {background-attachment: fixed;

  background-image: url("yp.jpg");

  background-repeat: no-repeat;

body {background-attachment: scroll;

  background-image: url("yp.jpg");

  background-repeat: no-repeat;

}
BACKGROUND-COLOR

The background-color property specifies the


color of the background.

  CSS Declaration:

  Output

  p {background-color: 00FF00;}  

  p{background-color: red;}  
 
BACKGROUND-COLOR
In the CSS Background-color property page, we can specify
a single color for the background. What if we want to use an
image for our background? That's what the background-
image property is for.

Example:-

CSS Declaration:-

p {background-image:url(yp.jpg);}

With Background Image


BACKGROUND-POSITION

The background-position property specifies the position of the background.

The values can be combination of [top,center,bottom] and [left,center,right].

Two percentage values: The first value indicates the horizontal percentage,

and the second value indicates the vertical percentage.

Two position values: The first value is the absolute horizontal position, the

second value is the vertical position.

Examples :-

body { background-image: url("yp.jpg");

  background-position: center; }

body { background-image: url("yp.jpg");

  background-position: 20% 20%; }


BACKROUND-REPEAT
The background-repeat property specifies whether a background image repeats itself.
The default is "repeat", which means repeating the image in both the x- and y-
directions. You can also specify x-repeat, y-repeat, or no-repeat.
Examples :-
CSS Declaration:-
p
{ background-image:url(yp.jpg);
  background-repeat: no-repeat; }
Background does not repeat.

p{
  background-image:url(yp.jpg);
  background-repeat: repeat-x; }
Background repeats horizontally.

p{
  background-image:url(yp.jpg);
  background-repeat: repeat-y; }
Background repeats vertically.
p{
  background-image:url(yp.jpg);
  background-repeat: repeat; }
Background repeats in both directions.
FONT

Common ways of manipulating font properties in


CSS include the following:
· font-family
· font-size
· font-weight
· font-style
· font-variant
FONT-FAMILY

The font-family property specifies the type of the font.


CSS Declaration
Output
p {font-family: verdana;}
Font Family Verdana.
p {font-family: arial;}
Font Family Arial.
p {font-family: impact;}
Font Family Impact.
FONT-SIZE
The font-size property specifies the size of the font. The
size can be numerical (length or percentage), or in text
(possible values are "xx-large", "x-large", "large",
"medium", "small", "x-small", and "xx-small").
CSS Declaration:-
p {font-size:9px;}
Font Size 9px.
p {font-size:150%;}
Font Size 150%.
p {font-size:0.8cm;}
Font Size 0.8cm.
p {font-size:small;}
Font Size small.
p {font-size:large;}
Font Size large.
FONT-WEIGHT
The font-weight property specifies the thickness of the font.
Font weight can go from 100 to 900, with 900 being the
thickest. One can also specify "bold", "bolder", or "normal".
Examples:-
CSS Declaration
p {font-weight: 100;}
This is font weight 100.
p {font-weight: 900;}
This is font weight 900.
p {font-weight: bold;}
This is bold font weight.
FONT-STYLE

The font-style property specifies whether the font is italic or


oblique.
CSS Declaration
Output
p {font-style: italic;}
This is font style italics.
FONT-VARIANT

The font-variant property specifies whether the font will be


displayed in small caps. Small caps mean that all letters will
be displayed in the capital case, but the font size is smaller
than usual. The possible values are 'small-caps' and
'normal'.example:-
With the following CSS,
span {
  font-variant:small-caps; }
the HTML code below,
<span>initial in small caps</span> AND LATER IN LARGE
CAPS.
renders
INITIAL IN SMALL CAPS AND LATER IN LARGE CAPS.
LINK

The default style for a link is blue font with an underline. This is, however,

not always ideal. There are times when we want links to have a different

style. This can be achieved using the following selectors:

a:link: Specifies how the link looks if the page it links to has not yet been

visited.

a:visited: Specifies how the link looks if the page it links to has already been

visited.

a:hover: Specifies how the link looks like when the user mouses over the

link.

a:active: Specifies how the link looks like when the user clicks on it.
The following declaration:-

a:link {color:#FF0000; text-decoration:none;}

a:visited {color:#0000FF; text-decoration:none;}

a:hover {font-size:20; color:#00FF00; text-decoration:underline;}

a:active {color:#FF00FF; text-decoration:underline;}

What this means is the following:

1) When the page is first loaded, the font color is red.

2) Once the link is visited, the font color becomes blue.

3) When you mouse over the link, font size becomes 20, font color

becomes green, and an underline appears.

4) When you click on the link, font color becomes pink, and the

underline remains.
LIST

Common ways of manipulating font properties in CSS include


the following:
· list-style-type
· list-style-position
· list-style-image
· list-style
LIST-STYLE-TYPE
The list-style-type property lets you specify a different type of marker than the default
disc. The most commonly used list-style-types are:
· none
· disc
· circle
· square
One may also wish to use ordered character sets. Common ones are:
· upper-latin
· lower-latin
· upper-roman
· lower-roman
· upper-alpha
· lower-alpha
example:-
Example 1:
<ul style='list-style-type:upper-roman;'>
  <li>item 1</li>
  <li>item 2</li> </ul>
Example 2:
<ul style='list-style-type:square;'>
  <li>square item 1</li>
  <li>square item 2</li> </ul>
LIST-STYLE-POSITION
The list-style-position property offers a way for the user to specify whether the
marker should be treated as part of the regular text when it comes to formatting.
The possible values are 'inside' and 'outside'. 'Outside' is the default value.
Example 1:-
<ul style='list-style-position:inside;'>
  <li>First one<br>second line
  <li>Second one </ul>
Result:
•First
one
second line
•Second one
Example 2: -
<ul style='list-style-position:outside;'>
  <li>First one<br>second line
  <li>Second one </ul>
Result:
•First
one
second line
•Second one
LIST-STYLE-IMAGE
The list-style-image property is used to specify an image to
use for the market. The syntax is :-
list-style-image:url([image_url]);
For example, if our CSS code is
ul {
  list-style-image:url("circle.gif"); }
the following HTML code
<ul>
  <li>First list for custom marker.
  <li>Second list for custom marker. </ul>
renders
First list for custom marker.
Second list for custom marker.
TABLE
The table, th, tr, and td selectors can use many of the properties , but not
limited , those for text, font, border, color, and background.
example: Assuming that we want the following style applied to the table:
· Table: No outer border, font is arial, font size is 14px.
· Heading: Background is yellow.
· Element: There is a black solid line beneath every element in the table.
· For scores below 60, create a separate class that would make the font
color red.
We would apply the following stylesheet:
table {
  border: 0;
  font-family: arial;
  font-size:14px; }
th {
  background-color:yellow; }
td {
  border-bottom:1 solid #000000; }
.fail {
  color:#FF0000; }
Given this style, the HTML code below:
<table>
  <tr>
    <th>Student Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Stella</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Sophie</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td class="fail">55</td>
  </tr>
</table>
would render the following:
Student Name Score
Stella 85
Sophie 95
Alice 55
BORDER-COLLAPSE
There is one property related to a table that is the border-collapse property. The
border-collapse property essentially replaces the cellspacing=0 declaration. example
CSS declaration:-
table {
  border:0;
  border-collpase:collpase;
  width:200px; }

tr {
  border-bottom:1px solid #000; }
the HTML code below:-
<table>
  <tr><td>Year</td><td>Income</td></tr>
  <tr><td>2006</td><td>35.2M</td></tr>
  <tr><td>2007</td><td>40.1M</td></tr> </table>
would render the following:
Year Income
2006 35.2M
2007 40.1M
Notice that the underline between the Year column and the Income column are
continuous. The is the effect of border-collapse:collapse.
POSITION

The position property specifies what kind of position is used. Possible

values include:

static (default): indicates that the element will be placed at the default

location. Please note that if static is specified, values for the top, bottom,

right, and left properties will have no effect.

absolute: places an element in relation to the actual browser window. The

position of the element moves along with the rest of the content when the

page is scrolled.

relative: specifies how the element will be positions relative to how it would

have been positioned by default.

fixed: places an element in relation to the actual browser window. The

position of the element remains fixed even when the page is scrolled.
additional properties are needed to complement the position
property. They are as follows:
· top
· right
· left
· bottom
· overflow
· z-index
SESSION
The absolute value of the position property means that the element
will be displayed in the same location within the browser, with the
location being determined by top, bottom, left, or right properties. The
element will move with the rest of the content when scrolling. As an
example, you will see a red ball 550 pixels from the top of the browser
and 400 pixels from the left of the browser. The code for this is:
p{
  position:absolute;
  top:50px;
  left:600px;
}
The HTML code,
<div>
  <p><img src="red-ball.jpg">
</div>
renders the image you see that is 50px from the top of the browser
and 600px from the left of the browser. Please notice that as you
scroll up and down and page, the red ball moves along with the rest
of the page. This is different from when we specify {position:fixed;},
when the red ball stays in the same place as the rest of the page
moves.
RELATIVE
The relative value of the position property specifies how the element will be positions relative to
how it would have been positioned by default. It is used in combination with a direction (top,
bottom, left, and right).
Example
CSS Code
div {
  background-color:#FF00FF;
  width:250px;
  height:60px; }
p{}
The HTML code,
<div>
  <p>Example to show relative position. </div>
renders
Example:-
div {
  background-color:#FF00FF;
  width:250px;
  height:60px; }
p{
  position:relative;
  top:15px; }
  <div>
  <p>Example to show relative position. </div>
Example to show relative position.
In the above example, applying the {position:relative; top:15px;} style added 15px of space on top
of the text. In other words, this style shifted the text down by 15px relative to the default position.
FIXED-PROPERTY

The fixed value of the position property means that the element will
always be displayed in the same location within the browser, with the
location being determined by top, bottom, left, or right properties. As
an example, you will see a red ball 50 pixels from the top of the
browser. As you scroll down the page, that red ball stays in the same
place. The code for this is:
p{
  position:fixed;
  top:50px;
  left:650px; }
The HTML code,
<div>
  <p><img src="red-ball.jpg"> </div>
renders the image you see that is 50px from the top of the browser
and 650px from the left of the browser. Please notice that as you
scroll up and down and page, the red ball stays in the same place.
STATIC PROPERTY

Static is the default value of the position property, which


means if no value is given to the position property, its value is
static. If an element's position is specified as static, that
means it will be rendered in the normal flow of the text.
Since static is the default value of position, we seldom see it
declared explicitly. The only instances are when we are trying
to undo a declaration that was done to the same element.
If static is the value of position, the directional properties (top,
bottom, left, and right) are not used even if specified.
TOP-PROPERTY
The top property specifies the distance from the top of the
element to the default location of the element (when
position=relative) or the distance between the top of the element
and the top of the container (when position=absolute). This can
be specified as a percentage, as a length, or 'auto'.
Let's take a look at two examples:
Example 1: CSS Code
div {
  background-color:#FF00FF;
  width:500px;
  height:60px; }
p{
  position:relative;
  top:10px; }
The HTML code,
<div>
  <p>Sample text.
</div>
BOTTOM
The bottom property specifies the distance from the bottom of the element to the default
location of the element . example:
CSS Code
div {
  background-color:#FF00FF;
  width:250px;
  height:60px; }
p{} 
The HTML code,
<div>
  <p>No bottom property. </div>
renders
No bottom property.
div {
  background-color:#FF00FF;
  width:250px;
  height:60px; }
p{
  position:relative;
  bottom:5px; }
<div>
  <p>Apply bottom:5px. </div>
Apply bottom:5px.
In the above example, applying the {position:relative; bottom:5px;} style moved the text up
by 5px.
LEFT-PROPERTY
The left property specifies the distance from the left of the
element to the default location of the element
the distance between the left of the element and the left of the
container (when position=absolute). This can be specified as a
percentage, as a length, or 'auto'.
Example 1: CSS Code
div {
  background-color:#FF00FF;
  width:500px;
  height:60px; }
p{
  position:relative;
  left:30px; }
The HTML code:-
<div>
  <p>This text is 30 pixels from the left of the box.
</div>
RIGHT-PROPERTY
The right property specifies the
distance from the right of the
element to the default location of the
element or the distance between the
right of the element and the right
edge of the container (when
position=absolute).
text-align:right;
examples:   position:relative;
Example 1   right:30px; }
CSS Code <div>
div {   <p>Apply right:30px.
  background-color:#FF00FF; </div>
  width:250px; Apply right:30px.
  height:60px; }
p{
  text-aligh:right; }
The HTML code,
<div>
  <p>No right property. </div>
div {
  background-color:#FF00FF;
  width:250px;
OVERFLOW-PROPERTY

The overflow property indicates how the content will be


displayed when it exceeds the containing element. Possible
values are:
visible: The entirety of the content is shown, regardless of the
height specified for the element.
hidden: Only the content within the containing element is
shown.
scroll: Displays the vertical and horizontal scroll bar to allow
scroll of the content, regardless of whether the content
exceeds the containing element.
auto: If the content is beyond the containing element, a scroll
bar is displayed
Z-INDEX-PROPERTY
The z-index property specifies the stack order of an element.
In other words, when there is an overlap between two
elements, the z-index value determines which one shows up
on top. The element with a larger z-index value will appear on
top.
For example, say we define two blocks with the following CSS
code:
#redblock {
  z-index: 1;
  position:
  absolute;
  width:80px;
  height:100px;
  top:20px;
  left:20px;
  border: 1px solid #FFF;
  background-color: #FF0000; }
#pinkblock
{
  z-index: 2;
  position: absolute;
  width:100px;
  height:80px;
  top:50px;
  left:50px;
  border: 1px solid #FFF;
  background-color: #FF00FF;
}
The following HTML code,
<div id="redblock"></div>
<div id="pinkblock"></div>
renders the following:
As we can see, the pink block, with a z-index value of 2, lies on top
of the red block, which has a z-index value of 1.
TEXT-PROPERTIES

Here are the most commonly-used CSS properties related


to text.
· direction
· letter-spacing
· line-height
· text-align
· text-decoration
· text-indent
· text-transform
· word-spacing
DIRECTION-PROPERTY

The direction property specifies the text direction. Possible


values are 'ltr' and 'rtl'.
For example, with a CSS declaration of,
p{
  direction:ltr;
}
The following HTML,
<p>LTR Direction</p>
LETTER-SPACING PROPERTY
The letter-spacing property specifies the amount of space
between characters. For example, with a CSS declaration
of :
P
{
  letter-spacing:8px;
}
The following HTML,
<p>8px between letters</p>
renders
8px between letters
LINE-HEIGHT-PROPERTY

The line-height property specifies the amount of space


between lines. For example, with a CSS declaration of,
P
{
  line-height:30px;
}
The following HTML,
<p>30px between line 1<br>and line 2.</p>
renders
30px between line 1
and line 2.
TEXT-ALIGN PROPERTY
The text-align property specifies how text is justified. Possible values are:
· left: left-justified
· right: right-justified
· center: text is centered
· justified: text is both right- and left-justified
Examples:-
CSS Declaration
Output
p
{
  text-align:left;
}
This sentence illustrates what it looks like to be left-justified.
p
{
  text-align:right;
}
This sentence illustrates what it looks like to be right-justified.
p{
  text-align:center;
}
This sentence illustrates what it looks like to be
centered.
p{
  text-align:justify;
}
This sentence illustrates what it looks like to be fully-
justified.
TEXT-DECORATION PROPERTY
The text-decoration property specifies how text is decorated. Possible values are:
· underline: adds an underline to the text
· overline: adds a line on top of the text
· line-through: adds a line through the middle of the text.
· blink: causes the text to blink.
Examples below:
CSS Declaration
Output
p{
  text-decoration:underline;
}
An underline example
p{
  text-decoration:overline;
}
An overline example
p{
  text-decoration:line-through;
}
TEXT-INDENT PROPERTY
The text-indent property specifies how much space to indent
before the first line of the text in a block. Both length and
percentage can be used. For example, with a CSS declaration
of,
p{
  text-indent:15px;
}
The following HTML,
<p>This text is indented by 15px at the beginning of the
paragraph. Subsequent lines are not indented.</p>
renders
This text is indented by 15px at the beginning of the paragraph.
Subsequent lines are not indented.
TEXT-TRANSFORM
The text-transform property controls how upper and lower cases are
displayed. Possible values are:
· capitalize: capitalizes the first letter in a word
· uppercase: makes the entire word upper case
· lowercase: makes the entire word lower case
· none: no transform is performed
For example, if we apply each of the following CSS style to the text "this is
a LAWYER", we get the following:
CSS Declaration
Output
p
{
  text-transform:capitalize;
}
this is a LAWYER
p
{
  text-transform:uppercase;
}
THIS IS A LAWYER
P
{
  text-transform:lowercase;
}
this is a LAWYER
FLOAT-PROPERTY
One of the commonly-seen layout, especially in large websites
displaying ads, is wrapping the text around an advertising
block. This is accomplished using the float property.
The float property has three possible values: 'left', 'right', and
'none'. Let's take a look at the following examples:
Example 1: Given the CSS declaration,
#leftfloat
{
  float:left;
}
the following HTML,
<span id="leftfloat"><img src="yp.jpg"></span>This example
illustrates how float:left affects the appearance of a block.
Notice how the image "floats" to the left.
CLEAR PROPERTY
The clear property is used to cancel the effect of float.
Possible values for the clear property are:
· left: Keep the left side clear.
· right: Keep the right side clear.
· both: Keep both sides clear.
· none: Do not keep either side clear.
CSS declaration:
#leftfloat {
  float:left;
}
#clearleft {
  clear:left;
}
the following HTML,
<span id="leftfloat"><img src="yp.jpg"></span>This example
<span id="clearleft"> illustrates how clear:left breaks the float
property. </span>
CURSOR PROPERTY
At some websites, you'll see
different mouse cursors. This
is set via the cursor property.
Below we list the commonly-
seen cursors, as well as how
they are declared. what a Mouse cursor is set to text
cursor looks like, just mouse { cursor: move; }
over the "Result" column. Mouse cursor is set to move
CSS Declaration { cursor: wait; }
Result Mouse cursor is set to wait
{ cursor: crosshair; } { cursor: help; }
Mouse cursor is set to Mouse cursor is set to help
crosshair
{ cursor: pointer; }
Mouse cursor is set to pointer
{ cursor: text; }
{ cursor: progress; }
Mouse cursor is set to progress

{cursor: not-allowed; }
Mouse cursor is set to not-allowed

{ cursor: no-drop; }
Mouse cursor is set to no-drop

{ cursor: no-vertical-text; }
Mouse cursor is set to no-vertical-text
{ cursor: all-scroll; } Mouse cursor is set to nw-resize
Mouse cursor is set to all-scroll { cursor: w-resize; }
{ cursor: col-resize; } Mouse cursor is set to w-resize
Mouse cursor is set to col-resize { cursor: sw-resize; }
{ cursor: row-resize; } Mouse cursor is set to sw-resize
Mouse cursor is set to row- { cursor: s-resize; }
resize Mouse cursor is set to s-resize
{ cursor: e-resize; } { cursor: se-resize; }
Mouse cursor is set to e-resize Mouse cursor is set to se-resize
{ cursor: ne-resize; } We can also specify a custom
Mouse cursor is set to ne-resize image for the mouse cursor. The
{ cursor: n-resize; } syntax for doing this is:
Mouse cursor is set to n-resize { cursor: url(image_url); }
{ cursor: nw-resize; }
TEXT-WRAP PROPERTY
Text wrap can be achieved in CSS using the white-space
property. Common values of this property are as follows:

normal: This is the default. Consecutive white space


characters are collapsed into a single white space. Line
wraps when it becomes to long to fit the container's width.
nowrap: Line does not wrap even when it becomes too long
to fit the container's width.
pre: This behaves like the <pre> tag in HTML. All formatting
is "as is" for the text inside the <pre> </pre> tag, so there is
no line wrapping.
EXAMPLE-1
div
{
  background-color:#FF00FF;
  width:200px;
  height:60px;
}
p
{
  white-space:normal;
}
The HTML code,
<div>
  <p>This line shows the layout with white-space:normal.
</div>
renders
This line shows the layout
with white-space:normal.
EXAMPLE-2
Div
{
  background-color:#FF00FF;
  width:200px;
  height:60px; }
p
{
  white-space:nowrap;
}
The HTML code,
<div>
  <p>This line shows the layout with white-space:nowrap.
</div>
renders
This line shows the layout with white-space:nowrap.
In Example 2, text does not wrap to the next line when it
reaches the right edge of the pink box.
EXAMPLE-3
div {
  background-color:#FF00FF;
  width:200px;
  height:60px;
}
p{
  white-space:pre;
}
The HTML code,
<div>
  <p>
These two lines show the layout with ...
        white-space:pre.
</div>
renders
These two lines show the layout with white-space:pre.
In Example 3, text is displayed exactly as how it was shown in the
HTML document, and does not wrap to the next line when it reaches
the right edge of the pink box.

You might also like