Scribd
Upload
4 views

MA UNIT - 1 CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its history, advantages, and various levels of style sheets including inline, document-level, and external styles. It explains the structure of CSS rules, selector forms, and property values, along with examples of font properties and text decoration. The document emphasizes the importance of consistency and control in web design through the use of CSS.

Uploaded by

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

MA UNIT - 1 CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its history, advantages, and various levels of style sheets including inline, document-level, and external styles. It explains the structure of CSS rules, selector forms, and property values, along with examples of font properties and text decoration. The document emphasizes the importance of consistency and control in web design through the use of CSS.

Uploaded by

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

SMS COLLEGE, BRAHMAVAR

CASCADING STYLE SHEETS


Introduction

• The presentation specifications of documents can be more precisely and more


consistently described with style sheets.

• The CSS1 specification was developed in 1996

• CSS2 was released in 1998

• CSS3 is on its way

• CSSs provide the means to control and change presentation of HTML documents

• CSS is not technically HTML, but can be embedded in HTML documents

• The most important benefit of style sheets is their capability of imposing consistency on
the style of documents. Eg: they allow the author to specify that all occurrences of a
particular tag use the same presentation style. Style is specified for a tag by the values of its
property.

Advantages of Style Sheets:

• Saves time

• Easy to change

• Keep consistency (always behave in the same way)

• More control over layout

• Create a common format for all the Web pages.

Levels of Style Sheets


There are three levels of style sheets:

• Inline style sheets - specified for a specific occurrence of a tag and apply only to that tag. This
is fine grain style, which defeats the purpose of style sheets - uniform style

• Document-level (Internal) style sheets - apply to the whole document in which they appear

• External style sheets - can be applied to any number of documents.

When more than one style sheet applies to a specific tag in a document, the lowest level style
sheet has precedence. For eg: if an external style sheet specifies a value for a particular

MA – UNIT 1 - CSS Page 1


SMS COLLEGE, BRAHMAVAR

property of a particular tag , that value is used until a different value is specified in either a
document style sheet or an inline style sheet

Likewise a document style sheet property value can be overridden by different property values
in an inline style sheet. Inline style sheets appear in the tag itself. Document-level style sheets
appear in the head of the document.

External style sheets are in separate files, they can be stored on any computer on the web. The
browser fetches just as it fetches documents.

When using multiple styles that conflict, which will be displayed?

Order:

• Inline style sheet

• Embedded style sheet

• External style sheet

• Browser default

• Inline Style sheets have precedence over document style sheets which have precedence over
external style sheet.

Style Specification Formats


Format depends on the level of the style sheet.

Format for Inline Style sheets:

• Inline style sheet appears as the values of the style attribute of a tag.

General form:

style = "property_1: value_1;

property_2: value_2;

property_n: value_n;"

Example:

<h1 style=“color:red; font-family: sans-sarif”>India is my country</h1>

Format for Document-level / Embedded / Internal style sheets:

A style is applied to the entire HTML file. Use it when you need to modify all instances of
particular element (e.g., h1) in a web page.

MA – UNIT 1 - CSS Page 2


SMS COLLEGE, BRAHMAVAR

Style sheet appears as a list of rules that are the content of a <style> tag within the header of a
document.

General form:

<style type = "text/css">

rule list

</style>

The <style> tag must include the type attribute, set to "text/css". Each style rule in a rule list has
two parts:

 Selector: indicates the tag or tags affected by the rule


 List of property value pairs

Each property/value pair has the form: property: value

Pairs are separated by semicolons.

General Form of the rules in rule list:

selector {property_1:value_1; property_2:value_2;…… property_n:value_n;}

Example:

<style>

h1 {color:red;font-size:20;font-family:monospace;}

</style>

PROGRAM

<html>

<head>

<title>Getting Started</title>

<style type=“text/css”>

h1 {font-family: sans-serif; color: organge;}

p{font-size:15;font-style:italic;background-color:grey;}

</style>

</head>

MA – UNIT 1 - CSS Page 3


SMS COLLEGE, BRAHMAVAR

<body>

<h1>…..</h1>

<p>….</p>

</body>

</html>

General form of External style sheet:

An external style sheet is a text file containing the style definition (declaration). Use it when you
need to control the style for an entire web site. The <link> tag is used to specify external style
sheets. Within <link>, the rel attribute is used to specify the relationship of the linked to
document to the document in which the link appears. The href attribute of <link> is used to
specify the URL of the style sheet document as in the following document:

<link rel = "stylesheet" type = "text/css"

href = "http://www.wherever.org/termpaper.css">

</link>

Creating an External Style Sheet:

• Open a new blank document in Notepad

• Type style declarations – h1 {color:red; font-family:sans-serif;}

• Do not include <style> tags

• Save the document as filename.css

Linking Style Sheets to HTML file:

• Open an HTML file

• Between <head> and </head> add – <link href=URL rel=“relation_type” type=“link_type”>

• Save this file and the .css file in the same web server directory.

MA – UNIT 1 - CSS Page 4


SMS COLLEGE, BRAHMAVAR

Selector Forms
The selector can have variety of forms:

1. Simple selector form

2. Class selector

3. Generic selector

4. Id selector

5. Contexual Selectors

6. Universal selector

7. Pseudo classes

1. Simple selector forms

The selector is a tag name or a list of tag names, separated by commas. Consider the following
examples, in which the property is font-size and the property value is a number of points:

h1, h3 { font-size: 24pt ;}

h2 { font-size: 20pt ;}

2. Class Selector

It is used to allow different occurrences of the same tag to use different style specifications. A
style class has a name, which is attached to a tag name.

p.normal {property/value list}

p.warning{property/value list}

The class you want on a particular occurrence of a tag is specified with the class attribute of the
tag. For example,

<p class = "normal">

A paragraph of text that we want to be presented in ‘normal’ presentation style</p>

<p class = "warning">

A paragraph of text that is a warning to the reader ,which should be presented in an especially
noticeable style.

</p>

Classes:

MA – UNIT 1 - CSS Page 5


SMS COLLEGE, BRAHMAVAR

HTML and XHTML require each id be unique– therefore an id value can only be used once in a
document. You can mark a group of elements with a common identifier using the class
attribute.

3. Generic Selectors

A generic class can be defined if you want a style to apply to more than one kind of tag. A
generic class must be named, and the name must begin with a period

Ex:

.really-big {property-value list }

Use it as if it were a normal style class

<h1 class = "really-big"> … </h1>

...

<p class = "really-big"> … </p>

4. id Selectors

An id selector allows the application of a style to one specific element.

General form:

#specific-id {property-value list}

Example:

#section14 {font-size: 20}

Specifies a font size of 20 points to the element

<h2 id = “section14”>Hello</h2>

5. Contextual selectors

Selectors can also specify that the style should apply only to elements in certain positions in the
document .This is done by listing the element hierarchy in the selector.

Eg: body b em {font-size: 24pt ;}

In the eg, selector applies its style to the content of emphasis elements that are descendants of
bold elements in the body of the document.

It is also called as descendant selectors. It will not apply to emphasis element not descendant of
bold face element.

6. Universal Selectors

MA – UNIT 1 - CSS Page 6


SMS COLLEGE, BRAHMAVAR

The universal selector denoted by an asterisk(*). It applies its style to all elements in the
document.

Ex:

* {color : red}

Makes all elements in the document red.

7. Pseudo Classes

Pseudo classes are styles that apply when something happens, rather than because the target
element (tag) simply exists. Names begin with colons

The style of hover pseudo classes apply when the mouse cursor is over the element. The style
of focus pseudo classes apply when an element has focus (mouse cursor over the element and
click the left mouse button)

Eg: Input:hover {color: red;}

Pseudo Class Example:

<!-- pseudo.html -->

<!DOCYPE html> <html lang=”en”>

<head>

<title>Pseudoclasses</title> <meta charset=”utf-8” />

<style type = "text/css">

input:hover {color: red;}

input:focus {color: green;}

</style>

</head>

<body>

<form action = "">

<p>

Your name:

<input type = "text" />

</p>

MA – UNIT 1 - CSS Page 7


SMS COLLEGE, BRAHMAVAR

</form>

</body>

</html>

5. Property Value Forms


CSS1 include 60 different properties in 7 categories:

• Fonts

• Lists

• Alignment of text

• Margins

• Colors

• Backgrounds

• Borders

Property Values (values of properties)

The property value can appear in many forms.

• Keywords – large,medium, small, …

• Number values – integers,decimal numbers etc.

• Length - numbers, maybe with decimal points followed by two character abbreviation of a
unit name.

• Units:

 px - pixels
 in - inches
 cm - centimeters
 mm - millimeters
 pt - points
 pc - picas (12 points)
 em – value of the current font size in pixels
 ex - height of the letter ‘x’
 No space is allowed between the number and the unit specification. Ex: 1.5 in is illegal!
 Eg: 10px, 24pt etc.
 Percentage - just a number followed immediately by a percent sign. Eg: 70%
 URL values - url(protocol://server/pathname)

MA – UNIT 1 - CSS Page 8


SMS COLLEGE, BRAHMAVAR

 Colors
 Color name: eg: fuchsia
rgb(n1, n2, n3) Eg: rgb(255,0,255)
Numbers can be decimal or percentages
 Hexadecimal form: hexadecimal numbers must be preceded with pound(#) sign.
Eg : #B0E0E6 stands for powder blue color.

6. Font Properties
1. Font-Families

The font-family property is used to specify a list of font name. The browser will use the first font
in the list that it supports. For example, the following could be specified.

font- family: Arial, Helvetica, Courier

If a font name has more than one word, it should be single-quoted. ‘Times New Roman‘

2. font-size

It sets the size of fonts. There are two categories of font-size values, absolute and relative.

In the case of absolute category the size value could be given as length value in points, picas or
pixels or keywords from the list xx-small, x-small, small, medium, large and x-large.

Eg: font-size: 10pt

The relative size values are smaller and larger, which adjust the font size relative to the font
size of the parent element.

Eg: font-size:1.2em

This sets the font size to 1.2 times the font size of the parent element.1.2em and 120% are
same.

3. Font Variant

The default value of the font-variant property is normal, which specifies the usual character
font. This property can be set to small-caps to specify small capital letters.

4. font-style

Most commonly used to specify italic.

Eg: font-style: italic

5. font-weight

It is used to specify degrees of boldness.

MA – UNIT 1 - CSS Page 9


SMS COLLEGE, BRAHMAVAR

Eg: font-weight: bold

Possible values are bolder, lighter, bold, normal(default)

Could specify as a multiple of 100 (100 – 900) where 400 is same as normal.

6. Font Shorthands

For specifying more than one font properties. The values can be stated in a list as value of the
font property.

Eg: font: bold 14pt Arial Helvetica

The order which browser follows is last must be font name, second last font size and then the
font style, font variant and font weight can be in any order but before the font size and names.

Ex:

<!DOCTYPE html>

<!—fonts.html

An example to illustrate font properties -->

<html lang=”en”>

<head><title>Font Properties</title> <meta charset=”utf-8” /> <style type”text/css”>

p.major {font-size: 14pt;

font-style: italic;

font-family: ‘Times New Roman’ ;}

p.minor {font: 10pt bold ‘courier New’;}

h2 {font-family: ‘Times New Roman’; font-size: 24pt;font-weight: bold;}

h3 {font-family: ‘Courier New’;}

</style>

</head>

<body> <p class = “major”>

If a job is worth doing,it’s worth doing right</p> < p class = “minor”> Two wrong don’t make a
right,but they certainly can get you in a lot of trouble.

</p>

MA – UNIT 1 - CSS Page 10


SMS COLLEGE, BRAHMAVAR

<h2> Chapter 1 Introduction</h2>

<h3> 1.1 The basics of computer networks</h3>

</body>

</html>

Output:

Revision of fonts.html that uses an external style sheet rather than document level
stylesheets:

fonts2.html

<!DOCTYPE html>

<!— An example to illustrate font properties -->

<html lang=”en”>

<head><title>Font Properties</title>

<meta charset=”utf-8” />

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

</head>

<body> <p class = “major”> If a job is worth doing,it’s worth doing right</p> < p class =
“minor”> Two wrong don’t make a right,but they certainly can get you in a lot of trouble.

</p>

<h2> Chapter 1 Introduction</h2>

<h3> 1.1 The basics of computer networks</h3>

</body>

</html>

/*styles.css */

MA – UNIT 1 - CSS Page 11


SMS COLLEGE, BRAHMAVAR

p.major {font-size: 14pt;

font-style: italic;

font-family: ‘Times New Roman’;}

p.minor {font:bold 10pt ‘courier New’;}

h2 {font-family: ‘Times New Roman’;

font-size: 24pt;font-weight: bold}

h3 {font-family: ‘Courier New’;}

Output:

7. The text-decoration property

It specifies some special features of text. Possible values of text-decoration property are line-
through, overline, underline, none

Example:

<!DOCTYPE html>

<!—fonts2.html

An example to illustrate font properties -->

<html lang=”en”>

<head><title>Text Decoration</title>

<meta charset=”utf-8 />

<style type = “text/css”>

p.delete {text-decoration: line-through}

p.cap {text-decoration:overline}

p.attention {text-decoration: underline}

</style>

MA – UNIT 1 - CSS Page 12


SMS COLLEGE, BRAHMAVAR

</head>

<body>

<p class = “delete”>

This illustrates Linehrough

</p>

<p class = “cap”>

This illustrates overline

</p>

<p class = “attention”>

This illustrates underline

</p>

</body>

</html>

Output:

8. Text Spacing

The letter-spacing property controls the amount of space between letters in words. This
spacing is called tracking. The possible values of letter-spacing are normal or any length
property values—for example, 3px.

Positive values increase the letter spacing, negative values decrease it.

For eg: letterspacing: 1px spreads the letters of words. letter-spacing: -1px squeezes the letters
of the words together. The value normal resets letter-spacing back to that of parent element.

The space between words in a text can be controlled with the word-spacing property, whose
values are normal or any length value. Positive values increase the letter spacing, negative
values decrease it.

MA – UNIT 1 - CSS Page 13


SMS COLLEGE, BRAHMAVAR

The space between lines of text can be controlled with the line-height property. This spacing is
called leading. The value of line-height can be a number or a length value.

List properties
Property Name: list-style-type can applied to both ordered and unordered list.

Unordered lists:

Bullet can be a disc (default), a square, or a circle. Set it on either the <ul> or <li> tag.

On <ul>, it applies to list items.

Ex:

<style type = “text/CSS”>

ul {list-style-type:square}

</style> ……………………………

<h3> Some Common Single-Engine Aircraft </h3>

<ul>

<li> Cessna Skyhawk </li>

<li> Beechcraft Bonanza </li>

<li> Piper Cherokee </li>

</ul>

On <li>, list-style-type applies to just that item.

Ex:

<h3> Some Common Single-Engine Aircraft </h3>

<ul>

<li style = "list-style-type: disc">

Cessna Skyhawk </li>

<li style = "list-style-type: square">

Beechcraft Bonanza </li>

<li style = "list-style-type: circle">

Piper Cherokee </li>


MA – UNIT 1 - CSS Page 14
SMS COLLEGE, BRAHMAVAR

</ul>

Output:

Ordered lists:

On ordered lists list-style-type property can be used to change the sequence values.

Property value Sequence type First four

Decimal Arabic numerals 1, 2, 3, 4

upper-alpha Uc letters A, B, C, D

lower-alpha Lc letters a, b, c, d

upper-roman Uc Roman I, II, III, IV

lower-roman Lc Roman i, ii, iii, iv

Ex:

<head><title> Sequence types </title>

<style type = “text/css”>

ol {list-style-type: upper-roman;}

ol ol {list-style-type: upper-alpha;}

ol ol ol {list-style-type: decimal;}

</style>

</head>

<body>

<h3> Aircraft Types </h3>

<ol>

MA – UNIT 1 - CSS Page 15


SMS COLLEGE, BRAHMAVAR

<li> General Aviation (piston-driven engines)

<ol>

<li> Single-Engine Aircraft

<ol>

<li> Tail wheel </li>

<li> Tricycle </li>

</ol>

</li>

<li> Dual – Engine Aircraft

<ol>

<li> Wing-mounted engines <\li>

<li> Push-pull fuselage-mounted engines </li>

</ol>

</li>

</ol>

</li>

</ol>

</body>

</html>

Output:

Alignment of Text
The text-indent property allows indentation (first line of a paragraph can be intended). This
property takes either a length or a % value.

MA – UNIT 1 - CSS Page 16


SMS COLLEGE, BRAHMAVAR

Ex:

<style type = “text/css”>

p.indent {text-indent: 0.5in}

</style>

…………

<p class =“indent”>

Now is the time for all good Web programmers to begin using cascading style sheets for all
presentation details in their documents. No more deprecated tags and attributes, just nice,
precise style sheets. </p>

Output:

Now is the time for all good Web programmers to begin using cascading style sheets for
all presentation details in their documents. No more deprecated tags and attributes, just nice,
precise style sheets.

The text-align property has the possible values, left (the default), center, right, or justify

The float property is used to specify that text should flow around another element often an
image or table. The float property has the possible values, left, right, and none (the default).

If we have an element we want on the right, with text flowing on its left, we use the default
text-align value (left) for the text and the right value for float on the element we want on the
right.

MA – UNIT 1 - CSS Page 17


SMS COLLEGE, BRAHMAVAR

Or we can specify float style using inline style sheet for image.

<img src = "c210.jpg" style = "float: right" />

Output:

Colors
Color is a problem for the Web for two reasons:

1. Monitors vary widely

2. Browsers vary widely

There are three color collections

MA – UNIT 1 - CSS Page 18


SMS COLLEGE, BRAHMAVAR

1. There is a set of 17 colors that are guaranteed to be displayable by all graphical


browsers on all color monitors.

black 000000 green 008000

silver C0C0C0 lime 00FF00

gray 808080 olive 808000

white FFFFFF yellow FFFF00

maroon 800000 navy 000080

red FF0000 blue 0000FF

purple 800080 teal 008080

fuchia FF00FF aqua 00FFFF

2. There is a much larger set, the Web Palette


• 216 named colors
3. Any one of 16 million different colors

Color Properties :

The color property specifies the foreground color of elements.

Ex:

<style type = “text/css”>

th.red {color: red}

th.orange {color: orange}

</style>

<table>

<tr>

<th class = "red"> Apple </th>

<th class = "orange"> Orange </th>

<th class = "orange"> Screwdriver </th>

</tr>

</table>

MA – UNIT 1 - CSS Page 19


SMS COLLEGE, BRAHMAVAR

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

Output:

10. The Box Model


Virtually all document elements can have borders with various styles, such as color and width.
Furthermore, the amount of space between the content of an element and its border, known
as padding, can be specified, as well as the space between the border and an adjacent element,
known as the margin. This model is called box model.

Borders

• Borders – every element has a border-style property, that Controls whether the element has
a border and if so, the style of the border.

• border-style values: none(default), dotted, dashed, and double.

• The style of one particular element can be set with border-top-style, borderbottom-style,
border-left-style, and border-right-style

• border-width – thin, medium (default), thick, or a length value in pixels. border -width can be
specified for any of the four borders (e.g., border-top-width…)

MA – UNIT 1 - CSS Page 20


SMS COLLEGE, BRAHMAVAR

• border-color – any color. Border color can be specified for any of the four borders (e.g.,
border-top-color)

The following document, borders.html, illustrates borders, using a table and a short paragraph
as examples:

MA – UNIT 1 - CSS Page 21


SMS COLLEGE, BRAHMAVAR

Output:

Margins and padding:

Margin is the space between the border of an element and its neighbor element. Padding is the
space between the content of an element and its borders. The margin properties are named
MA – UNIT 1 - CSS Page 22
SMS COLLEGE, BRAHMAVAR

margin, which applies to all four sides of an element: margin-left, margin-right, margin-top and
margin-bottom. The padding properties are named padding, which applies to all four sides:
padding-left, padding-right, padding-top and padding-bottom.

Output:

MA – UNIT 1 - CSS Page 23


SMS COLLEGE, BRAHMAVAR

Background Images
The background-image property is used to place an image in the background of an element.

The background image is replicated as necessary to fill the area of the element. This replication
is called tiling. The tiling can be controlled with the background-repeat property. Possible
values: repeat (default), no-repeat, repeat-x, or repeat-y. The no-repeat value specifies that just
one copy of the image is to be displayed. The repeat-x value means that the image is to be
repeated horizontally; repeat-y means that the image is to be repeated vertically. In addition,
the position of a non repeated background image can be specified with the background-
position property. Possible values: top, center, bottom, left, or right.

The <span> and <div> tags


One problem with the font properties is that they apply to whole elements, which are often too
large. In many situations we want to apply special font properties to less than a whole
paragraph of text. For eg: it is often useful to have a word or phrase in a line appear in a
different font size or color. The <span> tag is designed for just this purpose. Unlike most other
tags there is no default layout for the content. The default meaning of <span> is to leave the
content as it is.

MA – UNIT 1 - CSS Page 24


SMS COLLEGE, BRAHMAVAR

<p>

Now is the <span> best time </span> ever!

</p>

Use <span> to apply a document style sheet to its content

<style type = "text/css" >

bigred {font-size: 24pt;

font-family: Ariel; color: red}

</style>

<p>

Now is the <span class = "bigred"> best time </span> ever!

</p>

Output:

The <span> tag is similar to other HTML tags, they can be nested and they have id and class
attributes.

Another tag that is useful for style specifications: <div>

It is common for documents to have sections, each consisting of some number of paragraphs
that have their own presentation styles. Used to create document sections (or divisions) for
which style can be specified.

Ex: A section of five paragraphs for which you want some particular style.

MA – UNIT 1 - CSS Page 25


SMS COLLEGE, BRAHMAVAR

Example:

<html>

<head>

<style>

div { line-height: 20px;

margin: 30px;

padding-bottom: 20px;

text-align: justify;

width: 140px;

color: red; }

</style>

</head>

<body>

<p>A div element is displayed like this:

<div>This is some text in a div element. This is some text in a div element. This is some
text in a div element. This is some text in a div element. This is some text in a div
element. This is some text in a div element.</div>

Change the default CSS settings to see the effect.

</p>

</body>

MA – UNIT 1 - CSS Page 26


SMS COLLEGE, BRAHMAVAR

</html>

Output:

MA – UNIT 1 - CSS Page 27

You might also like