UNIT-2 CSS

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.

Definition

Cascading Style Sheets (CSS) is a simple mechanism used to format the layout of Web Pages and adding style (e.g., fonts, colors, spacing...) to web documents that previously could only be defined in a page's HTML. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.

Advantages

The advantages of CSS are:

Ø CSS saves time - You can write CSS once and then reuse the same sheetv in multiple HTML pages.

Ø Pages load faster – Increases Download Speedv

Ø Easy maintenance - To make a global change, all the elements in all thev web pages will be updated automatically.

Ø Superior styles to HTML – It is better look to your HTML page inv comparison to HTML attributes.

Ø Multiple Device Compatibility - Style sheets allow content to bev optimized for more than one type of device.

Ø Global web standards - Now HTML attributes are being deprecated andv it is being recommended to use CSS

CSS Syntax

A CSS style rule is made of three parts:

1. Selector: A selector is an HTML tag at which a style will be applied. This

could be any tag like <h1>, <p> or <table> etc.

2. 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, border, bgcolor etc.

3. Value: Values are assigned to properties. For example, color property can

have the value either red or #F1F1F1 etc.

three parts of CSS syntax.

CSS Selectors

You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one. Three types of CSS Selectors

1. The Element selectors

2. The ID Selectors

3. The Class Selectors

1. The Element selectors

A CSS declaration always ends with a semicolon, and declaration groups

are surrounded by curly brackets: example -

p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line,

like this:

{

color:red;

text-align:center;

}

2. The ID Selectors

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

"#". Example –

Imagine within the body element of our html page, we have the following

paragraph element

<p id=”welcome”>Welcome to the 1st CSS

Document </p>

We can then create a CSS rule with the id selector:

#welcome

{

color:red;

text-align:center;

}

The class selector is used to specify a style for a group of elements. Unlike

the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the

same class. The class selector uses the HTML class attribute, and is

defined with a ".". In the example below, all HTML elements with

class="center" will be center-aligned:

Imagine within the body element of our html page, we have the following

header element

<h2 class=”center”>Summary</h2>

We can then create a CSS rule with the class selector:

.center {text-align:center;}

You can also specify that only specific HTML elements should be affected

by a class. In the example below, all p elements with class="center" will

be center-aligned: example

p.center {text-align:center;}

Types of CSS:-

There are three ways of inserting a style sheet:

1. External style sheet

2. Internal style sheet

3. Inline style

1.External style sheet:

An external style sheet is ideal when the style is applied to many pages.

With an external style sheet, you can change the look of an entire Web site by

changing one file. Each page must link to the style sheet using the <link> tag. The

<head>

</head>

An external style sheet can be written in any text editor. The file should not

contain any html tags. Your style sheet should be saved with a .css extension. An

example of a style sheet file is shown below:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

2.Internal style sheet:-

An internal style sheet should be used when a single document has a

unique style. You define internal styles in the head section of an HTML page, by

using the <style> tag, like this:

<head>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back1.gif");}

</style>

</head>

3. Inline style

An inline style loses many of the advantages of style sheets by mixing content

with presentation. Use this method sparingly! To use inline styles you use the style

attribute in the relevant tag. The style attribute can contain any CSS property. The

example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a

paragraph.</p>

CSS Styling:-

CSS is a language that describes the style of an HTML document. You can set the

following text properties of an element:

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

 The direction property is used to set the text direction.

 The letter-spacing property is used to add or subtract space between the letters that make up a word.

 The word-spacing property is used to add or subtract space between the words of a sentence.

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

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

 The text-decoration property is used to underline, overline, and strikethrough text.

The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

 The white-space property is used to control the flow and formatting of

text.

 The text-shadow property is used to set the text shadow around a text.

Set the Text Color

The following example demonstrates how to set the text color. Possible

value could be any color name in any valid format.

<p style="color:red;">This text will be written in red. </p>

Set the Text Direction

The following example demonstrates how to set the direction of a text.

Possible values are ltr or rtl.

<p style="direction:rtl;">This text will be rendered from right to left </p>

Set the Space between Characters

The following example demonstrates how to set the space between

characters. Possible values are normal or a number specifying space.

<p style="letter-spacing:5px;">This text is having space between letters.

</p>

v Background image handling

The background-image property specifies an image to use as the background of an

element. By default, the image is repeated so it covers the entire element. The

background image for a page can be set like this:body {backgroundimage:url('paper.gif');}

Example

<html>

<head>

<Title>This is my Internal css page</Title>

body

{

background-image:url

("C:/Users/SAI/Desktop/Desktop/100MSDCF/11.

jpg");

}

</style>

</head>

<body>

Background Image

</body>

</html>

You can set the following background properties of an element:

 The background-image property is used to set the background image of

an element.

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

image in the background.

 The background-position property is used to control the position of an

image in the background.

 The background-attachment property is used to control the scrolling of

an image in the background.

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

background properties.

Repeat the Background Image

This table has background image which repeats multiple times.

The following example demonstrates how to repeat the background image

if an image is small. You can use no-repeat value for the background-repeat

property if you don't want to repeat an image. In this case, the image will display

only once. By default, the background-repeat property will have a repeat value.

<table style="background-image:url(/images/pattern1.gif); background-repeat:

repeat;">

This table has background image which repeats multiple times.

</td></tr>

</table>

v Set the Background Image Position

The following example demonstrates how to set the background image position

100 pixels away from the left side.

<table style="background-image:url(/images/pattern1.gif);

background-position:100px;">

Background image positioned 100 pixels away from the left.

</td></tr>

</table>

v Font Management using CSS

A font is the combination of typeface and other qualities, such as size, pitch,

and spacing. For example, Times Roman is a typeface that defines the shape

of each character. Within Times Roman, however, there are many fonts to

choose from -- different sizes, italic, bold, and so on.You can set the following

font properties of an element:

 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 font-weight property is used to increase or decrease how bold or light

a font appears.

 The font-size property is used to increase or decrease the size of a font.

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

properties.

v Set the Font Style

The following example demonstrates how to set the font style of an

element. Possible values are normal, italic and oblique.

<p style="font-style:italic;">This text will be rendered in italic

style </p>

Set the Font Variant

The following example demonstrates how to set the font variant of an

element. Possible values are normal and small-caps.

<p style="font-variant:small-caps;"> This text will be rendered as small

caps </p>

Set the Font Weight

The following example demonstrates how to set the font weight of an

element. The 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.

<p style="font-weight:bolder;"> This font is bolder. </p>

<p style="font-weight:900;"> This font is 900 weight. </p>

Set the Font Size

The following example demonstrates how to set the font size of an

element. 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 %.

<p style="font-size:20px;"> This font size is 20 pixels </p>

<p style="font-size:small;"> This font size is small </p>

<p style="font-size:large;"> This font size is large </p>

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

numbering characters in ordered lists. Here are the values, which can be used for

an unordered list:

Example :

<html>

<head>

<Title>This is my inline css page</Title>

</head>

<body>

<ul style="list-style-type:circle; list-stlyeposition:outside;"><li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<ul style="list-style-type:square;list-styleposition:inside;"><li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<ol style="list-style-type:decimal;list-stlyeposition:outside;"><li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<li>Maths</li>

<li>Social Science</li><li>Physics</li>

</ol>

</body>

</html>

Designing Tables using CSS

Tables are an excellent way to organize and display information on a page. You can set the following properties of a table:

 The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

 The border-spacing specifies the width that should appear between table cells.

 The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.

 The empty-cells specify whether the border should be shown if a cell is empty.

 The table-layout allows browsers to speed up the layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

The order-collapse Property

This property can have two values collapse and separate. The following

example uses both the values:

<html>

<head>

<Title>This is my inline css page</Title>

</head>

<body>

table.one

{border-collapse:collapse;}

table.two

{border-collapse:separate;}

td.a

{

border-style:dotted;

border-width:3px;

border-color:#000000;

padding: 10px;

}

td.b

{

border-style:solid;

border-width:3px;

border-color:#333333;

padding:10px;

}

Odisha State Open University Page 23

</style>

<caption>Collapse Border Example</caption>

<tr><td class="a"> Cell A Collapse Example</td></tr>

<tr><td class="b"> Cell B Collapse Example</td></tr>

</table><br />

<caption>Separate Border Example</caption>

<tr><td class="a"> Cell A Separate Example</td></tr>

<tr><td class="b"> Cell B Separate Example</td></tr>

</table>

</body>

</html>

This property can have two values collapse and separate. The following example uses both the values:

Collapse Border Example

Cell A Collapse Example

Cell B Collapse Example

Separate Border Example

Cell A Separate Example

Cell B Separate Example

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:

Designing borders using CSS

The border properties allow you to specify how the border of the box representing

an element should look. There are three properties of a border you can change:

 The border-color specifies the color of a border.

 The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.

 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

The border-style Property

The border-style property allows you to select one of the following styles of

border:

 none: No border. (Equivalent of border-width:0;)

 solid: Border is a single solid line.

 dotted: Border is a series of dots.

 dashed: Border is a series of short lines.

 double: Border is two solid lines

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 other so that the distance between the blocks is not the sum of 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:

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.

 Move Down - Use a positive value for top.

float property using CSS

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

may flow along its side (or be prohibited from doing so by the property).

With CSS float, an element can be pushed to the left or right, allowing other

elements to wrap around it. Float is very often used for images, but it is also

useful when working with layouts.

A line box is next to a float when there exists a vertical position that satisfies all

of these four conditions:

(a) At or below the top of the line box,

(b) At or above the bottom of the line box

(d) Above the bottom margin edge of the float.

Elements Float

Elements are floated horizontally; this means that an element can only be

floated left or right, not up or down. A floated element will move as far to the left

or right as it can. Usually this means all the way to the left or right of the

containing element. The elements after the floating element will flow around it.

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

.thumbnail { float:left; width:110px; height:90px; margin:5px; }

Alignment in CSS

Center Align Elements

To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of

its container. The element will then take up the specified width, and the remaining

space will be split equally between the two margins:

Example:

.center

{

margin: auto;

width: 50%;

border: 3px solid green;

padding: 10px;

}

Center Align Text

To just center the text inside an element, use text-align: center;

Example:

.center

{

text-align: center;

border: 3px solid green;

}

Pseudo-class

A pseudo-class is used to define a special state of an element. For example, it

can be used to:

 Style an element when a user mouses over it

 Style visited and unvisited links differently

 Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

selector: pseudo-class

{

property: value;

}

Anchor Pseudo-classes

Links can be displayed in different ways:

Example

/* unvisited link */

a:link {

color: #FF0000;

}

/* visited link */

a:visited {

color: #00FF00;

}

/* mouse over link */

a:hover {

color: #FF00FF;

}

/* selected link */

a:active {

color: #0000FF;

}

navigation bar

A navigation bar (or navigation system) is a section of a graphical user

interface intended to aid visitors in accessing information. Navigation bars are

implemented in file browsers, web browsers and as a design element of some web

sites. A set of buttons or images in a row or column that serves as a control point

to link the user to sections on a Web site. The navigation bar may also be a

single graphic image with multiple selections.

Vertical Navigation Bar

To build a vertical navigation bar we only need to style the <a> elements, in

addition to the code above:

Example

a { display:block; width:60px; }

Example explained:

 display:block - Displaying the links as block elements makes the whole

link area clickable (not just the text), and it allows us to specify the width

 width:60px - Block elements take up the full width available by default.

We want to specify a 60 px width .

Note: Always specify the width for <a> elements in a vertical navigation bar. If

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 up the full width

available when displayed as block elements. This will produce the same result as

our previous example:

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 60px;

}

li a {

display: block;

}

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.

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.

 The width property is used to set the width of an image.

 The -moz-opacity property is used to set the opacity of an image.

Search This Blog

ENGINEERING NOTES

UNIT-2 CSS

Comments

Post a Comment

Popular posts from this blog

Compiler Design UNIT-1

COA- Unit -5 Peripheral DeviceS

COA-UNIT-3 Control Unit