Scribd
Upload
39 views

Unit-Ii/ Chapter - 7 Cascading Style Sheets

The document discusses Cascading Style Sheets (CSS). CSS allows specifying rules to control the style and layout of elements on web pages, including colors, font sizes, spacing, etc. Style rules have two parts - a selector that links the rule to an HTML tag, and declarations that set properties and values. There are four types of style sheets - embedded, linked/external, inline stylesheet blocks, and inline element styles. External style sheets are most useful when multiple pages need the same styling as they prevent duplicating rules and make updates easier. Font properties control text appearance, including font family, size, weight, and color.

Uploaded by

467-056 Chandana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

Unit-Ii/ Chapter - 7 Cascading Style Sheets

The document discusses Cascading Style Sheets (CSS). CSS allows specifying rules to control the style and layout of elements on web pages, including colors, font sizes, spacing, etc. Style rules have two parts - a selector that links the rule to an HTML tag, and declarations that set properties and values. There are four types of style sheets - embedded, linked/external, inline stylesheet blocks, and inline element styles. External style sheets are most useful when multiple pages need the same styling as they prevent duplicating rules and make updates easier. Font properties control text appearance, including font family, size, weight, and color.

Uploaded by

467-056 Chandana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

UNIT-II/ CHAPTER –7

Cascading Style Sheets

Q. What is CSS?

Cascading Style Sheets are used to take control of the style of web pages, including the colors,
size of fonts, width, color of lines and amount of space between items on the page. The
cascading style sheets specification works by allowing you to specify rules that say how the
content of elements within the document should appear.

Q. What is a style rule?

CSS works by allowing you to associate rules with the elements that appear in a web page. These
rules govern how the content of those elements should be rendered. To create style we state the
element we wish to define followed by a list of attributes and values in curly braces. A semicolon
separates each property and value pair. A style rule has two parts
(i) A selector
(ii) A set of declarations
The selector is used to create a link between the rule and XHTML tag. The declaration has
two parts.
(i) A property
(ii) A value
Syntax: selector {property: value; property: value …}
This form is used for all style declarations in style sheets.
⬥Ex: h1, h2, h3 {

font-weight:bold;
font-family:arial;
color:#000000;
background-color:#FFFFFF;}
There are three heading elements named in the selector (<h1>, <h2>, and <h3>), and this rule
says that where these headings are used they will be written in a bold Arial font in black with a
white background.
Q. Explain the different types of style sheets.

Style sheets can be applied at four different levels. Cascading Style sheets means the four
methods can be defined together and cascading effect implies that some method takes precedence
over the others. This means that we could create a linked style sheet for the site, but have one
page that must differ from the rest of the site.

Embedding a Stylesheet file: The implication of embedding a style sheet in a web page is that
only a single web page will benefit from the styles we specify. If the web page also links to a
style sheet, the embedded style takes precedence in the case where two tags are defined
differently.Embedded styles are placed in the <head> of the web page,surrounded by
<style></style> tags.

Ex: <html>

<head>

<title> Embedded Stylesheet example</title>

<style type=“text/css”>

body{background-color: pink; font-family: Arial}

a: link{color:red;}

a: visited {color:blue;}

a: active {color:green;}

h1{font-size 36pt;}

p{font-style:italic;}

</style>

</head>

<body>

<p>

<h1>Welcome</h1>

<a href = “one.html”>clickone</a>


<a href = “two.html”>clicktwo</a>

<a href = “three.html”>clickthree</a>

</p>

</body>

</html>

Linked or External style sheets - External style sheets appear in separate files. This means we
can create a single style sheet that each page of our website links to, thus creating a consistent
look to the site.
Linking to a Stylesheet file/External stylesheet: First create the stylesheet to link to, on any
text editor and store in a file with extension .css
Ex: Filename sample.css
body{background: yellow;}
a: link{color:red;}
h1{font-weight: bold; text-align: center; font-family: Arial;}
To link a web page to this style sheet we need to include the <link> element within the <head> of
the element.

⬥Ex: <html>

<head>
<title> External Stylesheet example</title>
<link rel = “stylesheet” type = “text/css” href = “sample.css”>
</head>
<body>
<h1>Welcome</h1>
<a href = “one.html”>clickone</a>
</body>
</html>
To use more than one style sheet the following procedure is adopted.
<style type = “text/css”>
<!-@import URL(URL); -> </style>
The lines are both needed. The first sheet is included as if it were only one. Any further
stylesheets have to be imported @import is enclosed within a comment so that it can be ignored
by older browsers.
Ex: <link rel = “stylesheet”
href = “URL”
type= “text/css”
media= “screen”>
<style type= “text/css”>
<! --@import URL (“style.css”)
</style>
Creating an Inline Stylesheet block: An Inline style sheet block enables to define a look for a
section of a web page. The section or division of page is divided by the <div> </div> tags with a
<style> attribute. The following examples demonstrate how to change the color of a heading and
paragraph section in a document

Ex: <div style = “font-style: italic; color: blue”>

<h3>this is a style heading</h3>

<p>this is a blocked marked by a style</p>

</div>

Creating an Inline Stylesheet Element: An inline style sheet element enables to define a look
for a specific element of a web page. Adding a style attribute to the relevant element tag does
this

Ex: <p style = “color: red; font-style: italic”>this is an inline element style sheet </p>

Q. What is the purpose of <link> element? Explain.


The <link> element is used in web pages to describe the relationship between two documents.
For example, it can be used in an XHTML page to specify a style sheet that should be used to
style a page .We see the <link> element used in XHTML pages for other purposes, for example
to specify an RSS feed that corresponds with a page. The < link > element is always an empty
element, and when used with style sheets it must carry three attributes: type, rel , and href.
Eg. <link rel=”stylesheet” type=”text/css” href=”../CSS/interface.css” />

//<link> element can also take the following attributes:


charset dir href hreflang media rel rev style target type
The rel attribute is required and specifies the relationship between the document containing the
link and the document being linked to
Eg. rel=”stylesheet”
The type attribute specifies the MIME type of the document being linked to
Eg. type=”text/css”
The href attribute specifies the URL for the document being linked to.
Eg. href=”../stylesheets/interface.css”
The hreflang attribute specifies the language that the resource specified is written in
Eg. hreflang=”en-US”
The media attribute specifies the output device that is intended for use with the document
Eg. media=”screen”//

Q. Explain the <style> element.

The <style> element is used inside the <head> element to contain style sheet rules within a web
page. It is also sometimes used when a single page needs to contain just a few extra rules that do
not apply to the other pages of the site which all share the same style sheet. For example, here is
a style sheet attached to the XHTML document using the <link> element as well as a <style>
element containing an additional rule for <h1> elements:
<head>
<title>
<link rel=”stylesheet” type=”text/css” href=”../styles/mySite.css”/>
<style type=”text/css”>
h1 {color:#FF0000;}
</style>
</head>
dir lang media title type are attributes of <style> element.
Q. What are the advantages of External Style Sheets?

If two or more documents are going to use a style sheet, we should use an external style sheet.
There are several reasons for this, including:

● It saves us repeating the same style rules in each page.


● We can change the appearance of several pages by altering just the style sheet rather than
each individual page. This means it is easier to update our site.
● The style sheet can act as a style template to help different authors achieve the same style
of document without learning all of the individual style settings
● . A style sheet can import and use styles from other style sheets, allowing for modular
development and good reuse.
● If we remove the style sheet, we can make the site more accessible for those with visual
impairments, because we are no longer controlling the fonts and color schemes.
● Because the web pages do not contain the style rules, different style sheets can be attached to the
same document. So we can use the same XHTML document with one style sheet when the viewer
is on a desktop computer, another style sheet when the user has a handheld device, another style
sheet when the page is being printed, and another style sheet when the page is being viewed on a
TV, and so on. We can reuse the same document with different style sheets for different visitors’
needs.

Q. Write about the different font properties?

Several properties allow us to control the appearance of text in our documents. These can
be split into two groups:

● Those that directly affect the font and its appearance (including the typeface used,
whether it is regular, bold or italic, and the size of the text)
● Those that would have the same effect on the text irrespective of the font used (these
include color of the text and the spacing between words or letters)

✔ A typeface is a family of fonts, such as the Arial family. A font is a specific member of
that family, such as Arial 12 - point bold.

font property- Allows us to combine several of the following properties into one.

font – family property - Specifies the typeface or family of font that should be used.

Eg. p.one {font-family:arial, verdana, sans-serif;}

font – size property - Specifies the size of a font.


Eg. p.twelve {font-size:12px;}

There are many other ways you can provide a value:

Length: px , em ,ex ,pt, in ,cm, pc, mm

Absolute size: xx-small, x-small, small, medium, large, x-large, xx-large

Relative size: smaller, larger

Percentage: a percentage is calculated as a proportion of the element that contains the text, 2%
10% 25% 50% 100%

font - weight property -Specifies whether the font should be normal or bold.

The possible values for font - weight are: normal bold bolder lighter 100 200 300 400 500 600
700 800 900

Eg. p.one {font-weight: normal;}

font - style property -Specifies whether the font should be normal, italic, or oblique.

Eg. p.three {font-style:oblique;}

font – stretch property -Allows you to control the width of the actual characters in a font.
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded
extra-expanded ultra-expanded are the values.
Eg. p {font-family:arial; font-stretch:condensed;}

font - variant property -Specifies whether the font should be normal or small caps.

Eg. span.smallcaps {font-variant:small-caps;}

font - size - adjust property- Allows you to alter the aspect ratio of the size of the font's
characters

Q. Write about the different text properties?

There are several properties to affect the appearance or formatting of your text.
color: Specifies the color of the text

eg. p {color:#ff0000;}

text - align :Specifies the horizontal alignment of the text within its containing element

eg. . leftAlign{text-align:left;}

vertical - align :Specifies the vertical alignment of text within containing element

eg. span.footnote {vertical-align:sub;}

text – decoration: Specifies whether the text should be underlined, overlined, strikethrough, or
blinking text

eg. p.underline {text-decoration:underline;}

text – indent: Specifies an indent from the left border for the text

eg. .indent {text-indent:3em;}

text – transform: Specifies that the content of the element should all be uppercase, lowercase,
or capitalized

eg. p.capitalize {text-transform:capitalize;}

text - shadow :Specifies that the text should have a drop shadow

eg. . dropShadow {text-shadow: #999999 10px 10px 3px;}

letter - spacing :Controls the width between letters

eg. .two {letter-spacing:3px;}

word – spacing: Controls the amount of space between each word

eg .two {word-spacing:20px;}

white – space: Specifies whether the white space should be collapsed, preserved, or prevented
from wrapping
eg. .pre {white-space:pre;}

.nowrap {white-space:nowrap;}

direction: Specifies the direction of text

eg. p.ltr {direction:ltr;}

p.rtl {direction:rtl;}

Q. Write about Text Pseudo - Classes.

The first - letter Pseudo -Class: The first - letter pseudo - class allows you to specify a rule just
for the first letter of an element. This is most commonly used on the first character of a new
page, either in some magazine articles or in books. Here is an example of the first - letter pseudo
- class applied to a < p > element that has a class attribute whose value is introduction.

Eg. p.introduction:first-letter{font-size: 42px;}

The first - line Pseudo – Class: The first - line pseudo - class should allow you to render the
first line of any paragraph differently from the rest of the paragraph.

Eg. p.introduction:first-line{font-weight:bold;}

Q. Write about Selectors in CSS.

Universal Selector

The universal selector is an asterisk; it is like a wildcard and matches all element types in the
document. *{}.If we want a rule to apply to all elements, we can use this selector.

The Type Selector

The type selector matches all of the elements specified in the comma - delimited list. It allows us
to apply the same rules to several elements.

Eg. h1, h2, h3 {}

The Class Selector


The class selector allows you to match a rule with an element (or elements) carrying a class
attribute whose value matches the one you specify in the class selector.

Eg. p.BackgroundNote {}

<p class=”BackgroundNote” > This paragraph contains an aside. </p>

The ID Selector

The id selector works just like a class selector, but works on the value of id attributes.

So an element with an id attribute whose value is abstract can be identified with this selector.

Eg. #abstract

The Child Selector

The child selector matches an element that is a direct child of another. In this case it matches any
< b > elements that are direct children of < td > elements. The names of the two elements are
separated by a greater - than symbol to indicate that b is a child of td ( > ) which is referred to as
a combinator.

Eg. td > b {}

The Descendant Selector

The descendant selector matches an element type that is a descendant of another specified
element, not just a direct child. While the greater - than symbol is the combinator for the child
selector, for the descendent selector the combinator is the space.

Eg. table b {}

The Adjacent Sibling Selector

An adjacent sibling selector matches an element type that is the next sibling of another. For
example, if we want to make the first paragraph after any level 1 heading a different style from
other <p> elements we can use the adjacent sibling selector like so to specify rules for just the
first <p> element to come after any <h1> element.
h1+p {}

The General Sibling Selector

The general sibling selector matches an element type that is a sibling of another, although it does
not have to be the directly preceding element. So, if we had two <p> elements that are siblings of
an <h1> element, they would both use the rules of this selector.

h1~p {}

Q. Write about different units in CSS.

The values of some CSS properties are given as length. Three ways lengths can be specified
in CSS-

● Relative units
● Absolute units
● Percentages

Relative Units: There are three types of relative units: pixels, which relate to the resolution of
the screen, and em’s and ex’s both of which relate to the size of fonts.

o The pixel, referred to in code as px, is by far the most commonly used unit of length in
CSS. A pixel is the smallest unit of resolution on a screen.1 pixel would correspond to
about 0.28 mm or 1 90 of an inch.
o An em is equivalent to the height of the current font, and because the size of fonts can
vary throughout a document, the height of the em unit can be different in different parts
of the document. Furthermore, because users can change the size of text in their browser,
the em unit is capable of varying in relation to the size of the text that the user has
selected. This means that the em unit is most commonly used for measurements of elements that
contain text and for controlling spacing between text. While the em unit is equivalent to the
height of a font, it is often thought to have derived from the width of a lowercase m ; you
may also hear the term en , which equates to half an em .
o The ex should be the height of a lowercase x. Because different fonts have different
proportions, the ex is related to the font size and the type of font.
Absolute Units

Absolute units are used far less than relative unit .The following table shows the absolute units
that are used in some CSS properties-

Unit Full Name


pt A point
pc A pica
in An inch
cm A centimeter
mm A millimeter
Percentages

Percentages give a value in relation to another value.

Q. Explain the span tag.

Span tag applies to a word, few words or a line.


<span [id = “ ”] [class= “ ”/style = “ ”]…………</span>
can be applied. Each can have an id so that it can be identified by other elements on the page.
Styles are applied either through the class or style parameters.
Eg:<span style=”font-size: 20pt; font-style: oblique; font-color: magent”> WELCOME</span>
Q. What are class selectors?
The benefit of classes is that they can provide a lot of variety. They are good if we want to
redefine the style to look different from the content. The following is the syntax
selector.classname {property: value; property: value …}
<selector class = “classname”>
Eg: h1.display {color:#eeebd2
background-color: #d8a294
font-family: Times, Serif
border: thin-groove
}
<h1 class = “display”>A simple heading</h1>

Q. Explain the Box Model.

The box model is a very important concept in CSS because it determines how elements are
positioned within the browser window. It gets its name because CSS treats every element as if it
were in a box. Every box has three properties
border - Even if we cannot see it, every box has a border. This separates the edge of one box
from other surrounding boxes.
margin-The margin is the distance between the border of a box and the box next to it.
padding -This padding is the space between the content of the box and its border
We can use CSS to individually control the border, margin, and padding on each side of a box.
We can specify a different width, line - style and color for each side of the boxes’ border. The
padding and. margin properties are especially important in creating what designers refer to as
white space .this is the space between the various parts of the page.Many items can be encased in
boxes. This can give some very good effects.
o margin: length/percentage/auto{1,4}
o border-width: thin/thick/medium/length{1,4}
o padding: length/percentage{1,4}
Any of the margins of a box can be changed. We can specify 1, 2 or 4 margin values. If 4 are
specified they get applied in the order top, right, bottom and left. If one value is specified it is
applied to all four margins. If two values are specified then first will be then first will be
applied to top and bottom, the second will be applied to left and right margins. Padding and
border width are applied in the same way.
o border-color: value{1,4}
o border-style: none/dashed/solid/dotted/double/groove/ridge{1,4}
Color and style can be applied similarly
o width: length/percentage/auto{1,4}
o height: length/auto
Height and width can be specified to the box
Eg.
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>Understanding the Box Model</title>
<link rel=”stylesheet” type=”text/css” href=”ch07_eg19.css” />
</head>
<body>
<h1>Thinking Inside the Box</h1>
<p class=”description”>When you are styling a web page with CSS you
must start to think in terms of <b>boxes</b>.</p>
<p>Each element is treated as if it generates a new box. Each box can have
new rules associated with it.</p>
<img src=”images/boxmodel.gif” alt=”How CSS treats a box” />
<p>As you can see from the diagram above, each box has a <b>border</b>.
Between the content and the border you can have <b>padding</b>, and
outside of the border you can have a <b>margin</b> to separate this box
from any neighboring boxes.</p>
</body>
</html>

CSS rule
body, h1, p, img, b
{
border-style:solid;
border-width:2px;
border-color:#000000;
padding:2px;
}
--------------------------------------------------------------------------------------------------------------------
h1, b {background-color:#cccccc;}
Q. Write about Box related properties.
The Border Properties: The border properties allow to specify how the border of the box
representing an element should look.
The border - color property allows to change the color of the border surrounding a box. The
value can be a color name or a hex code for the color.
Eg. p {border-color:#ff0000;}
We can individually change the color of the bottom, left, top, and right sides of a box ’ s border
using the following properties:
border - bottom - color
border - right -color
border - top - color
border - left – color
The border - style property allows you to specify the line style of the border:
Eg. p {border-style:solid;}
none No border.
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.
groove Border looks as though it is carved into the page.
ridge Border looks the opposite of groove .
Inset Border makes the box look like it is embedded in the page.
outset Border makes the box look like it is coming out of the canvas.
hidden Same as none , except in terms of border - conflict resolution for table elements.
We can individually change the style of the bottom, left, top, and right borders of a box using the
following properties:
border - bottom – style
border - right - style
,border - top – style
border - left - style
The border - width Property allows setting the width of our borders; usually the width is
specified in pixels. The value of the border - width property cannot be given as a percentage,
although we could use any absolute unit or relative unit, or one of the following values:

thin, medium, thick

Eg. p {border-style: solid; border-width:4px;}

We can individually change the width of the bottom, top, left, and right borders of a box using
the following properties:

border - bottom - width

border - right - width

border - top - width

border - left – width

The border property allows you to specify color, style, and width of lines in one property:

p {border: 4px solid red;}

Padding property-

The padding property allows you to specify how much space should appear between the
content of an element and its border:

Eg. td {padding:5px;}

The value of this property is most often specified in pixels, although it can use any of the units of
length we met earlier, a percentage, or the word inherit. We can specify different amounts of
padding inside each side of a box using the following properties:

padding – bottom

padding – top
padding – left

padding - right

The margin Property

The margin property controls the gap between boxes, and its value is either a length, a
percentage, or inherit.

p {margin:20px;}

We can also set different values for the margin on each side of the box using the following
properties:

margin-bottom

margin-top

margin-left

margin-right

Dimensions of a Box:

height Sets the height of a box

width Sets the width of a box

line - height Sets the height of a line of text

max -height Sets the maximum height for a box

min - height Sets the minimum height for a box

max - width Sets the maximum width for a box

min - width Sets the minimum width for a box

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 .The default value being auto, which means
the box is just large enough to house its contents.

The line - height Property

The line - height property is one of the most important properties when laying out text. It allows
to increase the space between lines of text. The value of the line - height property can be a length
or a percentage

The max - width and min - width Properties

The max-width and min-width properties allow us to specify a maximum and a minimum width
for a box. This should be particularly useful if we want to create parts of pages that stretch and
shrink to fit the size of users’ screens. The max - width property will stop a box from being so
wide that it is hard to read and min - width will help prevent boxes from being so narrow that
they are unreadable.

Eg. div {min-width:200px; max-width:500px; padding:5px; border:1px solid #000000;}

The min - height and max - height Properties

The min - height and max - height properties correspond with the min - width and max - width
properties, but specify a minimum height and maximum height for the box,.These properties are
very useful in creating layouts that can be resized depending upon the size of the user’s browser
window.

The overflow Property

When we control the size of a box, the content weu want to fit in the box might require more
space than we have allowed for it. The overflow property was designed to deal with these
situations and can take one of the values
hidden The overflowing content is hidden.
scroll The box is given scrollbars to allow users to scroll to see the content
eg.

div {max-height:75px; max-width:250px; padding:5px; margin:10px; border:1px solid


#000000;}

div.one {overflow:hidden;}

div.two {overflow:scroll;}

-----------------------------------------------------------------------------------------------------------

You might also like