Unit-II Cascading Style Sheets

(1)

UNIT-II

CASCADING STYLE SHEETS

Definition of CSS:

“CSS is an acronym which means Cascading Style Sheets. CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!

HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.

CSS was a revolution in the world of web design. The concrete benefits of CSS include:

• control layout of many documents from one single style sheet;

• more precise control of layout;

• apply different layout to different media-types (screen, print, etc.);

• numerous advanced and sophisticated techniques.

The basic CSS syntax

The basic syntax for a CSS rule is as follows

A CSS rule is simply a statement that consists of a selector and a declaration.

• Selector: is the hook used to choose what part(s) of your HTML to apply the CSS to. It indicates the element to which the rule is applied. Following the selector is the…

(2)

• Declaration: Inside a declaration block you can have as many declarations as you want and each declaration is a combination of a CSS Property and a value.

• Property: is one of the CSS Properties used to tell what part of the selector will be changed (or styled). It specifies a characteristic, such as color, font-family, position, and is followed by a colon (:)

• Value: assigns a value to the property.

******************************************************************************

Types of Style Sheets

Inline Style Sheets Internal Style Sheets External Style Sheets There are three types of CSS styles:

Inline styles

Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

<a href="" style="text-decoration: none;">

Use inline style sheets when you want to apply a style to a single occurrence of an element. Inline style sheets are declared within individual tags and affect those tags only. Inline style sheets are declared with the style attribute.

Example:

<p style="color:gray">This text will be gray.</p>

In this example, we are using the style sheet command color to denote that the text in a paragraph will be gray.

Output:

(3)

Internal or Embedded Style Sheets

Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.

Use an internal style sheet when you want an HTML document to have a unique style. An internal style sheet is defined using the <style> tag and goes in the head section of an HTML document.

The <style> tag specifies the content type of a style sheet with its type attribute which should be set to "text/css".

Syntax:

<style type="text/css"> styles go here </style>

Example:

<html>

<head>

<style type="text/css">

p {color: green}

</style>

</head> <body>

<p> The text in this paragraph will be green. </p> <p> This paragraph too. </p>

</body> </html>

(4)

Creating an external style sheet

Use an external style sheet when you want to apply one style to many pages. If you make one change in an external style sheet, the change is universal on all the pages where the style sheet is used.

An external style sheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External style sheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag takes three attributes.

Attributes of the <link> tag:

• rel - When using an external style sheet on a webpage, this attribute takes the value "style

sheet"

• type - When using an external style sheet on a webpage, this attribute takes the value

"text/css"

• href - Denotes the name and location of the external style sheet to be used.

Example:

<link rel="stylesheet" type="text/css" href="style1.css" />

</head> <body>

<p> The text in this paragraph will be blue. </p> </body>

</html>

(5)

The code from style1.css:

p {color:blue}

******************************************************************************

Properties and Values in CSS

A number of properties CSS can alter our web page designing. The following properties can change the style of our work.

1. Colors and backgrounds

CSS provides different properties to apply colors and background colors to our websites. It also provides some advanced methods to position and control background images. The following CSS properties will be explained:

color

background-color

background-image

background-repeat

background-attachment

background-position

background

Foreground color: the 'color' property

The color property describes the foreground color of an element.

For example, imagine that we want all headlines in a document to be dark red. The headlines are all marked with the HTML element <h1>. The code below sets the color of <h1> elements to red.

h1 { color: #ff0000; }

The 'background-color' property

The background-color property describes the background color of elements.

(6)

We can also apply background colors to other elements including headlines and text. In the example below, different background colors are applied to<body> and <h1> elements.

body { background-color: #FFCC66; } h1 { background-color: #FC9804; }

Background images [background-image]

The CSS property background-image is used to insert a background image.

To insert the image of the butterfly as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.

body { background-image: url("butterfly.gif"); }

Repeat background image [background-repeat]

By default the butterfly was repeated both horizontally and vertically to cover the entire screen. The property background-repeat controls this behavior.

The table below outlines the four different values for background-repeat.

Value Description

background-repeat: repeat-x The image is repeated horizontally

background-repeat: repeat-y The image is repeated vertically

background-repeat: repeat The image is repeated both horizontally and vertically

background-repeat: no-repeat The image is not repeated

(7)

Lock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

The table below outlines the two different values for background-attachment. Click on the examples to see the difference between scroll and fixed.

Background-attachment: scroll The image scrolls with the page - unlocked

Background-attachment: fixed The image is locked

For example, the code below will fix the background image.

body { background-attachment: fixed; }

Place background image [background-position]

By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen.

The table below gives some examples.

background-position:2cm 2cm The image is positioned 2 cm from the left and 2 cm down the page

background-position:50% 25% The image is centrally positioned and one fourth down the page

(8)

The code example below positions the background image in the bottom right corner: body { background-position: right bottom; }

Compiling [background]

The property background is a short hand for all the background properties listed above. For example, look at these five lines:

background-color: #FFCC66;

background-image: url("butterfly.gif"); background-repeat: no-repeat;

background-attachment: fixed; background-position: right bottom;

Using background the same result can be achieved in just one line of code: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

2. Fonts:

The following CSS properties will be described:

• font-family

• font-style

• font-variant

• font-weight

• font-size

• font

Font family [font-family]

The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.

(9)

h2 {font-family: "Times New Roman", serif;}

Font style [font-style]

The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics.

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}

Font variant [font-variant]

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

h1 {font-variant: small-caps;} h2 {font-variant: normal;}

Font weight [font-weight]

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold.

h1 { font-weight: bold;}

Font size [font-size]

The size of a font is set by the property font-size. There are many different units (e.g. pixels and percentages) to choose from to describe font sizes.

h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;}

Compiling [font]

Using the font short hand property it is possible to cover all the different font properties in one single property.

(10)

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

Using the short hand property, the code can be simplified:

p { font: italic bold 30px arial, sans-serif; }

3. Text

Formatting and adding style to text is a key issue for any web designer. CSS gives us to add layout to text. The following properties will be described:

• text-indent

• text-align

• text-decoration

• letter-spacing

• text-transform

Text indention [text-indent]

The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph.

p { text-indent: 30px; }

Text alignment [text-align]

The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right ,centre or justify.

(11)

Text decoration [text-decoration]

The property text-decoration makes it is possible to add different "decorations" or "effects" to text.

h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

Letter space [letter-spacing]

The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width.

h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

Text transformation [text-transform]

The text-transform property controls the capitalization of a text. There are four possible values for text-transform:

capitalize

Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".

uppercase

Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".

lowercase

Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".

none

No transformations - the text is presented as it appears in the HTML code. h1 { text-transform: uppercase; }

(12)

4. Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

• border-width

• border-color

• border-style

The width of borders [border-width]

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The figure below illustrates the system:

The color of borders [border-color]

The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" .

Types of borders [border-style]

(13)

Examples of defining borders

To illustrate this, we will take a look at a document where we define different borders for <h1>, <h2>, <ul> and <p.

h1 {

border-width: thick; border-style: dotted; border-color: gold; }

h2 {

border-width: 20px; border-style: outset; border-color: red; }

p {

border-width: 1px; border-style: dashed; border-color: blue; }

******************************************************************************

Formatting block of information

(14)

a. Classes

“A class is a definition of a set of styles which can be applied where we need.” classes are required to apply a style to some paragraphs. The above methods

paragraphs in the same manner. The gen

selector.classname {property; value; property: value...}

Let us assume that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this:

<p>Grapes for white wine:</p> <ul>

<li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul>

<p>Grapes for red wine:</p> <ul>

<li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li>

<li><a href="pn.htm">Pinot Noir</a></li> </ul>

“A class is a definition of a set of styles which can be applied where we need.” classes are required to apply a style to some paragraphs. The above methods

paragraphs in the same manner. The general format is:

<selector class=classname>

that we have two lists of links of different grapes used for white wine and TML code could look like this:

<p>Grapes for white wine:</p>

<li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li>

<p>Grapes for red wine:</p>

a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li>

<li><a href="pn.htm">Pinot Noir</a></li>

“A class is a definition of a set of styles which can be applied where we need.” The classes are required to apply a style to some paragraphs. The above methods apply styles to all

(15)

Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.

To achieve this, we divide the links into two categories. This is done by assigning a class to each link using the attribute class.

Let us try to specify some classes in the example above:

Classes.html

<title>Example on Classes in CSS</title>

<body>

<h1>Two groups of links</h1>

<p><strong>Grapes for white wine:</strong></p> <ul>

<li><a href="Link1" class="whitewine">Riesling</a></li> <li><a href="Link2" class="whitewine">Chardonnay</a></li> <li><a href="Link3" class="whitewine">Pinot Blanc</a></li> </ul>

<p><strong>Grapes for red wine:</strong></p> <ul>

<li><a href="Link4" class="redwine">Cabernet Sauvignon</a></li> <li><a href="Link5" class="redwine">Merlot</a></li>

<li><a href="Link6" class="redwine">Pinot Noir</a></li> </ul>

(16)

Style.css

a {

color: blue; }

a.whitewine { color: red; }

a.redwine {

color: green; }

Output

Identification of element using id

In addition to grouping elements, we might need to identify one unique element. This is done by using the attribute id.

The special about the attribute id is that there cannot be two elements in the same document with the same id. Each id has to be unique. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id:

<h1>Chapter 1</h1> ...

(17)

<h2>Chapter 1.2</h2> ...

<h1>Chapter 2</h1> ...

<h2>Chapter 2.1</h2> ...

<h3>Chapter 2.1.2</h3> ...

The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows:

<h1 id="c1">Chapter 1</h1> ...

<h2 id="c1-1">Chapter 1.1</h2> ...

<h2 id="c1-2">Chapter 1.2</h2> ...

<h1 id="c2">Chapter 2</h1> ...

<h2 id="c2-1">Chapter 2.1</h2> ...

<h3 id="c2-1-2">Chapter 2.1.2</h3> ...

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:

#c1-2 {

(18)

b. Span

The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook (clip) to a part of a text or a part of a document.

Ex: <html>

<body>

<p>My mother has <span style="color:blue;font- weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body> </html>

Output

c. Divisions using <div> tag

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

Ex:

<!DOCTYPE html> <html>

<body>

(19)

</div>

</html>

Output:

******************************************************************************

Explain about Margins and Padding’s in CSS

Set the margin in an element

An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document).

(20)

The CSS code for this would look as follow: body {

margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

Or you could choose a more elegant compilation: body {

margin: 100px 40px 10px 70px; }

Set padding in an element

Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

h1 {

background: yellow;

} h2 {

background: orange;

}

By defining padding for the headlines, you change how much filling there will be around the text in each headline:

h1 {

(21)

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

******************************************************************************

Layers in CSS

Layer on layer with z-index (Layers)

CSS operates in three dimensions - height, width and depth. It explains how to let different elements become layers. In short, this means the order in which the elements overlap one another.

For that purpose, we can assign each element with a number (z-index). The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements (position :absolute, position: relative, or position: fixed).

Ex:

<!DOCTYPE html> <html>

<head>

<style> img{

(22)

left:0px; top:0px; z-index:-1; }

</style> </head> <body>

<h1>This is a heading</h1>

<p>Because the image has a z-index of -1, it will be placed behind the text.</p> </body>

</html>

Output:

******************************************************************************

Important Questions

1. Define CSS and Explain Style sheet syntax

2. Explain types of CSS Style Sheets

3. How can you format a block of information in CSS

4. Explain different Properties and their values in CSS