Scribd
Upload
28 views

Unit-2 WT CSS

Web technology

Uploaded by

keshavforpc
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Unit-2 WT CSS

Web technology

Uploaded by

keshavforpc
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

UNIT-2 CSS

Introduction of CSS

CSS stands for Cascading Style Sheets. It is a simple design


language intended to simplify the process of making web
pages presentable. 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
works with HTML and other Markup Languages (such as
XHTML and XML) to control the way the content is
presented. Cascading Style Sheets is a means to separate the
appearance of a webpage from the content of a webpage.
three parts of CSS syntax.
Definition
CSS Selectors
Cascading Style Sheets (CSS) is a simple mechanism used to
format the layout of Web Pages and adding style (e.g., fonts, You can define selectors in various simple ways based on
colors, spacing...) to web documents that previously could your comfort. Let me put these selectors one by one. Three
only be defined in a page's HTML. CSS describes how types of CSS Selectors
HTML elements are to be displayed on screen, paper, or in 1. The Element selectors
other media. It can control the layout of multiple web pages 2. The ID Selectors
all at once. 3. The Class Selectors

Advantages
1. The Element selectors
The advantages of CSS are:
A CSS declaration always ends with a semicolon, and
 CSS saves time - You can write CSS once and then reuse the declaration groups
same sheet in multiple HTML pages. are surrounded by curly brackets: example -
 Pages load faster – Increases Download Speed p {color:red;text-align:center;}
 Easy maintenance - To make a global change, all the To make the CSS more readable, you can put one declaration
elements in all the web pages will be updated automatically. on each line,
 Superior styles to HTML – It is better look to your HTML like this:
page in comparison to HTML attributes. p
 Multiple Device Compatibility - Style sheets allow content {
to be optimized for more than one type of device. color:red;
 Global web standards - Now HTML attributes are being text-align:center;
deprecated and it is being recommended to use CSS }

CSS Syntax 2. The ID Selectors


A CSS style rule is made of three parts:
The id selector is used to specify a style for a single, unique
1. Selector: A selector is an HTML tag at which a style will element.The
be applied. This id selector uses the id attribute of the HTML element, and is
could be any tag like <h1>, <p> or <table> etc. defined with a
2. Property: A property is a type of attribute of HTML tag. "#". Example –
Put simply, all Imagine within the body element of our html page, we have
the HTML attributes are converted into CSS properties. They the following
could be paragraph element
color, border, bgcolor etc. <p id=”welcome”>Welcome to the 1st CSS
3. Value: Values are assigned to properties. For example, Document </p>
color property can We can then create a CSS rule with the id selector:
have the value either red or #F1F1F1 etc. #welcome
{
color:red;

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 1


text-align:center; unique style. You define internal styles in the head section of
} an HTML page, by
using the <style> tag, like this:
The class selector is used to specify a style for a group of <head>
elements. Unlike <style type="text/css">
the id selector, the class selector is most often used on several hr {color:sienna;}
elements. p {margin-left:20px;}
This allows you to set a particular style for many HTML body {background-image:url("images/back1.gif");}
elements with the </style>
same class. The class selector uses the HTML class attribute, </head>
and is
defined with a ".". In the example below, all HTML elements 3. Inline style
with An inline style loses many of the advantages of style sheets
class="center" will be center-aligned: by mixing content
Imagine within the body element of our html page, we have with presentation. Use this method sparingly! To use inline
the following styles you use the style
header element attribute in the relevant tag. The style attribute can contain
<h2 class=”center”>Summary</h2> any CSS property. The
We can then create a CSS rule with the class selector: example shows how to change the color and the left margin
.center {text-align:center;} of a paragraph:
You can also specify that only specific HTML elements
should be affected <p style="color:sienna;margin-left:20px">This is a
by a class. In the example below, all p elements with paragraph.</p>
class="center" will
be center-aligned: example CSS Styling:-
p.center {text-align:center;} CSS is a language that describes the style of an HTML
document. You can set the
Types of CSS:- following text properties of an element:
There are three ways of inserting a style sheet: The color property is used to set the color of a text.
1. External style sheet The direction property is used to set the text direction.
2. Internal style sheet The letter-spacing property is used to add or subtract space
3. Inline style between the letters that make up a word.
The word-spacing property is used to add or subtract space
1.External style sheet: between the words of a sentence.
An external style sheet is ideal when the style is applied to The text-indent property is used to indent the text of a
many pages. paragraph.
With an external style sheet, you can change the look of an The text-align property is used to align the text of a
entire Web site by document.
changing one file. Each page must link to the style sheet The text-decoration property is used to underline, overline,
using the <link> tag. The and strikethrough text.
<link> tag goes inside the head section: The text-transform property is used to capitalize text or
<head> convert text to uppercase or lowercase letters.
<link rel="stylesheet" type="text/css" href="mystyle.css" /> The white-space property is used to control the flow and
</head> formatting of
An external style sheet can be written in any text editor. The text.
file should not The text-shadow property is used to set the text shadow
contain any html tags. Your style sheet should be saved with a around a text.
.css extension. An Set the Text Color
example of a style sheet file is shown below: The following example demonstrates how to set the text
hr {color:sienna;} color. Possible
p {margin-left:20px;} value could be any color name in any valid format.
body {background-image:url("images/back40.gif");} <p style="color:red;">This text will be written in red. </p>
Set the Text Direction
2.Internal style sheet:- The following example demonstrates how to set the direction
An internal style sheet should be used when a single of a text.
document has a Possible values are ltr or rtl.

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 2


<p style="direction:rtl;">This text will be rendered from right if an image is small. You can use no-repeat value for the
to left </p> background-repeat
Set the Space between Characters property if you don't want to repeat an image. In this case, the
The following example demonstrates how to set the space image will display
between only once. By default, the background-repeat property will
characters. Possible values are normal or a number specifying have a repeat value.
space. <table style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
<p style="letter-spacing:5px;">This text is having space background-repeat:
between letters. repeat;">
</p> <tr><td>
 Background image handling This table has background image which repeats multiple
The background-image property specifies an image to use as times.
the background of an </td></tr>
element. By default, the image is repeated so it covers the </table>
entire element. The  Set the Background Image Position
background image for a page can be set like this:body The following example demonstrates how to set the
{backgroundimage:url('paper.gif');} background image position
Example 100 pixels away from the left side.
<html> <table style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
<head> background-position:100px;">
<Title>This is my Internal css page</Title> <tr><td>
<style type="text/css"> Background image positioned 100 pixels away from the left.
body </td></tr>
{ </table>
background-image:url  Font Management using CSS
("C:/Users/SAI/Desktop/Desktop/100MSDCF/11. A font is the combination of typeface and other qualities,
jpg"); such as size, pitch,
} and spacing. For example, Times Roman is a typeface that
</style> defines the shape
</head> of each character. Within Times Roman, however, there are
<body> many fonts to
Background Image choose from -- different sizes, italic, bold, and so on.You can
</body> set the following
</html> font properties of an element:
You can set the following background properties of an The font-family property is used to change the face of a
element: font.
The background-image property is used to set the The font-style property is used to make a font italic or
background image of oblique.
an element. The font-variant property is used to create a small-caps
The background-repeat property is used to control the effect.
repetition of an The font-weight property is used to increase or decrease
image in the background. how bold or light
The background-position property is used to control the a font appears.
position of an The font-size property is used to increase or decrease the
image in the background. size of a font.
The background-attachment property is used to control the The font property is used as shorthand to specify a number
scrolling of of other font
an image in the background. properties.
The background property is used as shorthand to specify a  Set the Font Style
number of other The following example demonstrates how to set the font style
background properties. of an
Repeat the Background Image element. Possible values are normal, italic and oblique.
This table has background image which repeats multiple <p style="font-style:italic;">This text will be rendered in
times. italic
The following example demonstrates how to repeat the style </p>
background image Set the Font Variant

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 3


The following example demonstrates how to set the font numbering characters in ordered lists. Here are the values,
variant of an which can be used for
element. Possible values are normal and small-caps. an unordered list:
<p style="font-variant:small-caps;"> This text will be Example :
rendered as small <html>
caps </p> <head>
<Title>This is my inline css page</Title>
</head>
Set the Font Weight <body>
The following example demonstrates how to set the font <ul style="list-style-type:circle; list-
weight of an stlyeposition:outside;"><li>Maths</li>
element. The font-weight property provides the functionality <li>Social Science</li>
to specify <li>Physics</li>
how bold a font is. Possible values could be normal, bold, </ul>
bolder, lighter, <ul style="list-style-type:square;list-
100, 200, 300, 400, 500, 600, 700, 800, 900. styleposition:inside;"><li>Maths</li>
<p style="font-weight:bold;"> This font is bold. </p> <li>Social Science</li>
<p style="font-weight:bolder;"> This font is bolder. </p> <li>Physics</li>
<p style="font-weight:900;"> This font is 900 weight. </p> </ul>
<ol style="list-style-type:decimal;list-
Set the Font Size stlyeposition:outside;"><li>Maths</li>
The following example demonstrates how to set the font size <li>Social Science</li>
of an <li>Physics</li>
element. The font-size property is used to control the size of </ol>
fonts. <ol style="list-style-type:lower-alpha;list-style-
Possible values could be xx-small, x-small, small, medium, position:inside;">
large, x-large, <li>Maths</li>
xx-large, smaller, larger, size in pixels or in %. <li>Social Science</li><li>Physics</li>
<p style="font-size:20px;"> This font size is 20 pixels </p> </ol>
<p style="font-size:small;"> This font size is small </p> </body>
<p style="font-size:large;"> This font size is large </p> </html>
Managing List using CSS
Lists are very helpful in conveying a set of either numbered
or bulleted points.
This chapter teaches you how to control list type, position,
style, etc., using CSS.
We have the following five CSS properties, which can be
used to control lists:
The list-style-type allows you to control the shape or
appearance of the
marker.
The list-style-position specifies whether a long point that
wraps to a
second line should align with the first line or start underneath
the start of
the marker.
The list-style-image specifies an image for the marker
rather than a bullet
point or number.
The list-style serves as shorthand for the preceding
properties.

The list-style-type Property


The list-style-type property allows you to control the shape or
style of a bullet
point (also known as a marker) in case of unordered lists and
the style of

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 4


Designing Tables using CSS td.b

Tables are an excellent way to organize and display {


information on a page. You can set the following properties
of a table: border-style:solid;

The border-collapse specifies whether the browser should border-width:3px;


control the appearance of the adjacent borders that touch each border-color:#333333;
other or whether each cell should maintain its style.
padding:10px;
The border-spacing specifies the width that should appear
between table cells. }

The caption-side captions are presented in the <caption> Odisha State Open University Page 23
element. By default, these are rendered above the table in the
</style>
document. You use the caption-side property to control the
placement of the table caption. <table class="one">
The empty-cells specify whether the border should be <caption>Collapse Border Example</caption>
shown if a cell is empty.
<tr><td class="a"> Cell A Collapse Example</td></tr>
The table-layout allows browsers to speed up the layout of
a table by using the first width properties it comes across for <tr><td class="b"> Cell B Collapse Example</td></tr>
the rest of a column rather than having to load the whole
</table><br />
table before rendering it.
<table class="two">
The order-collapse Property
<caption>Separate Border Example</caption>
This property can have two values collapse and separate. The
following <tr><td class="a"> Cell A Separate Example</td></tr>
example uses both the values: <tr><td class="b"> Cell B Separate Example</td></tr>
<html> </table>
<head> </body>
<Title>This is my inline css page</Title> </html>
This property can have two values collapse and separate. The
</head>
following example uses both the values:
<body>
Collapse Border Example
<style type="text/css">
Cell A Collapse Example
table.one

{border-collapse:collapse;} Cell B Collapse Example

table.two
Separate Border Example
{border-collapse:separate;}

td.a Cell A Separate Example

{
Cell B Separate Example
border-style:dotted;

border-width:3px;

border-color:#000000;

padding: 10px;

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 5


Working with Box Model
You have seen the border that surrounds every box i.e.
element, the padding that
can appear inside each box, and the margin that can go
around them. In this
chapter, we will learn how to change the dimensions of
boxes. We have the
following properties that allow you to control the dimensions
of a box.
The height property is used to set the height of a box.
The width property is used to set the width of a box.
The line-height property is used to set the height of a line
of text.
The max-height property is used to set a maximum height
that a box can be.
The min-height property is used to set the minimum height
that a box can be.
The max-width property is used to set the maximum width
that a box can be.
The min-width property is used to set the minimum width
that a box can be.

The Height and Width Properties


The height and width properties allow you to set the height
and width for boxes.
They can take values of a length, a percentage, or the
keyword auto. Here is an
example:

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 6


Designing borders using CSS The border-style property allows you to select one of the
following styles of
The border properties allow you to specify how the border of
the box representing border:

an element should look. There are three properties of a border none: No border. (Equivalent of border-width:0;)
you can change:
solid: Border is a single solid line.
The border-color specifies the color of a border.
dotted: Border is a series of dots.
The border-style specifies whether a border should be
solid, dashed line, double line, or one of the other possible dashed: Border is a series of short lines.
values. double: Border is two solid lines
The border-width specifies the width of a border.

The border-color Property


The border-color property allows you to change the color of
the border

surrounding an element. You can individually change the


color of the bottom, left,

top and right sides of an element's border using the


properties:

border-bottom-color changes the color of bottom border.

border-top-color changes the color of top border.

border-left-color changes the color of left border.

border-right-color changes the color of right border

Setting Page Margin using CSS


The margin property defines the space around an HTML
element. It is possible to use negative values to overlap
content. The values of the margin property are not inherited
by the child elements. Remember that the adjacent vertical
margins (top and bottom margins) will collapse into each
The border-style Property other so that the distance between the blocks is not the sum of

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 7


the margins, but only the greater of the two margins or the
same size as one margin if both are equal.

We have the following properties to set an element


margin.

The margin specifies a shorthand property for setting the


margin properties in one declaration.

The margin-bottom specifies the bottom margin of an


element.

The margin-top specifies the top margin of an element.

The margin-left specifies the left margin of an element.

The margin-right specifies the right margin of an element

The margin-left Property


The margin-left property allows you to set the left margin of
an element. It can have a value in length, %, or auto. Here is
an example:

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 8


Padding using CSS

The padding property allows you to specify how much space


should appear between the content of an element and its
border: The value of this attribute should be either a length, a
percentage, or the word inherits. If the value is inherit,it will
have the same padding as its parent element. If a percentage
is used, the percentage is of the containing box. The
following CSS properties can be used to control lists. You can
also set different values for the padding on each side of the
box using the following properties:

The padding-bottom specifies the bottom padding of an


element.

The padding-top specifies the top padding of an element.

The padding-left specifies the left padding of an element.

The padding-right specifies the right padding of an


element.

The padding serves as shorthand for the preceding


properties

The padding-bottom Property:-

The padding-bottom property sets the bottom padding (space)


of an element. This

can take a value in terms of length of %. Here is an example:

CSS Advanced
Setting Position using CSS

CSS helps you to position your HTML element. You can put
any HTML element at whatever location you like. You can
specify whether you want the element positioned relative to
its natural position in the page or absolute based on its parent
element. Now, we will see all the CSS positioning related
properties with

examples.

Relative Positioning
Relative positioning changes the position of the HTML
element relative to where it normally appears. So "left:20"
adds 20 pixels to the element's LEFT position.

You can use two values top and left along with the position
property to move an

HTML element anywhere in an HTML document.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 9


Move Down - Use a positive value for top. The elements before the floating element will not be affected.
If an image is

floated to the right, a following text flows around it, to the


left:

Example:

img { float:right; }

If you place several floating elements after each other, they


will float next to each

other if there is room. Here we have made an image gallery


using the float

property:

Example

float property using CSS .thumbnail { float:left; width:110px; height:90px;


margin:5px; }
A float is a box that is shifted to the left or right on the
current line. The most

interesting characteristic of a float (or "floated" or "floating"


box) is that content Alignment in CSS

may flow along its side (or be prohibited from doing so by Center Align Elements
the property).
To horizontally center a block element (like <div>), use
With CSS float, an element can be pushed to the left or right, margin: auto;
allowing other
Setting the width of the element will prevent it from
elements to wrap around it. Float is very often used for stretching out to the edges of
images, but it is also
its container. The element will then take up the specified
useful when working with layouts. width, and the remaining

A line box is next to a float when there exists a vertical space will be split equally between the two margins:
position that satisfies all
Example:
of these four conditions:
.center
(a) At or below the top of the line box,
{
(b) At or above the bottom of the line box
margin: auto;
(c) Below the top margin edge of the float, and
width: 50%;
(d) Above the bottom margin edge of the float.
border: 3px solid green;
Elements Float
padding: 10px;
Elements are floated horizontally; this means that an element
can only be }
floated left or right, not up or down. A floated element will Center Align Text
move as far to the left
To just center the text inside an element, use text-align:
or right as it can. Usually this means all the way to the left or center;
right of the
Example:
containing element. The elements after the floating element
will flow around it. .center

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 10


text-align: center; }

border: 3px solid green;


navigation bar
}
A navigation bar (or navigation system) is a section of a
graphical user
Pseudo-class interface intended to aid visitors in accessing information.
A pseudo-class is used to define a special state of an element. Navigation bars are
For example, it implemented in file browsers, web browsers and as a design
can be used to: element of some web

Style an element when a user mouses over it sites. A set of buttons or images in a row or column that
serves as a control point
Style visited and unvisited links differently
to link the user to sections on a Web site. The navigation bar
Style an element when it gets focus may also be a
Syntax single graphic image with multiple selections.
The syntax of pseudo-classes: Vertical Navigation Bar
selector: pseudo-class To build a vertical navigation bar we only need to style the
<a> elements, in
{
addition to the code above:
property: value;
Example
}
a { display:block; width:60px; }
Anchor Pseudo-classes
Example explained:
Links can be displayed in different ways:
display:block - Displaying the links as block elements
Example
makes the whole
/* unvisited link */
link area clickable (not just the text), and it allows us to
a:link { specify the width

color: #FF0000; width:60px - Block elements take up the full width


available by default.
}
We want to specify a 60 px width .
/* visited link */
Note: Always specify the width for <a> elements in a vertical
a:visited { navigation bar. If
color: #00FF00; you omit the width, IE6 can produce unexpected results. You
can also set the
}
width of <ul>, and remove the width of <a>, as they will take
/* mouse over link */
up the full width
a:hover {
available when displayed as block elements. This will
color: #FF00FF; produce the same result as

} our previous example:

/* selected link */ ul {

a:active { list-style-type: none;

color: #0000FF; margin: 0;

padding: 0;

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 11


width: 60px; The border property is used to set the width of an image
border.
}
The height property is used to set the height of an image.
li a {
The width property is used to set the width of an image.
display: block;
The -moz-opacity property is used to set the opacity of an
} image.
attribute selectors

You can also apply styles to HTML elements with particular


attributes. The style

rule below will match all the input elements having a type
attribute with a value of

text:

input[type="text"]

color: #000000;

The advantage to this method is that the <input


type="submit" /> element is

unaffected, and the color applied only to the desired text


fields.

There are following rules applied to attribute selector.

p[lang] - Selects all paragraph elements with a lang


attribute.

p[lang="fr"] - Selects all paragraph elements whose lang


attribute has a

value of exactly "fr".

p[lang~="fr"] - Selects all paragraph elements whose lang


attribute

contains the word "fr".

p[lang|="en"] - Selects all paragraph elements whose lang


attribute

contains values that are exactly "en", or begin with "en-".

Working with images

Images play an important role in any webpage. Though it is


not recommended to

include a lot of images, but it is still important to use good


images wherever

required. CSS plays a good role to control image display. You


can set the

following image properties using CSS.

ER.VIPIN RAWAT ASSISTANT PROF.CSE DEPARTMENT AIMT LUCKNOW Page 12

You might also like