Module-3

Cascading Style Sheets (CSS)

Dept of CSE, MITE

Contents
 Introduction
Cascading Style Sheets (CSS) concepts and CSS basic syntax.
• Cascading Style Sheets is a style sheet language used for describing
the presentation of a document written in a markup language such as
HTML or XML.
• The W3C’s philosophy in terms of how HTML and CSS should fit
together is (1) use HTML elements to specify a web page’s content, and
(2) use CSS to specify a web page’s appearance.
• There are lots and lots of CSS properties that enable you to determine
a web page’s appearance.
 CSS Rules
CSS Rule Sets

• A CSS rule set contains one or more selectors and one or more
declarations.
• The selector(s), which in this example is h1 , points to an HTML
element.
• The declaration(s), which in this example are color: blue and
text-align: center style the element with a property and value.
 CSS Rules
• The selector points to the HTML element to style (h1).
• The declaration block (in curly braces) contains one or more declarations separated
by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
 CSS Rules
Declaration of
Property: value

Selector
 CSS Rules
Example for Selector and Declaration: Tree Poem web page
 CSS Rules
Example for Selector and Declaration: Tree Poem web page
In the Tree Poem web page, the
• * {text-align: center;} rule causes the elements that contain text to be centered.
• The hr element does not contain text, so it’s not affected by the text-align
property and hr elements are centered by default.
• The hr {width: 50%;} rule causes the horizontal line to render with a width
that’s 50% of the web page body’s width.
• The h2, p {font-style: italic; color: blue;} rule causes the heading and paragraph
elements to be italicized and blue.
 CSS Syntax and style
CSS Syntax

The style container positioned at the bottom of the web page’s head
container. In the style start tag, it’s legal to include a type attribute with a
value of "text/css", like this
 CSS Syntax and style
CSS Syntax

In the Tree Poem web page, the type attribute is omitted. Currently, text/css is the
only legal value for the type attribute, and it’s the default value for the type
attribute.
Google’s Style Guide, which covers both HTML and CSS, recommends that you
reduce the size of your web page file by omitting the type attribute.
 CSS Syntax and style
CSS Style
Style is used to style and layout the web pages — for example, to alter
the font, color, size, and spacing of your content, split it into multiple
columns, or add animations and other decorative features.
 CSS Syntax and style
CSS Style
when there is block formatting for multi-line container elements, the start
tag and end tag are aligned at the left, and interior lines are indented.

If there is a long CSS (at least two or three

property-value pairs), use block formatting like
this
 CSS Class Selectors
Class selector
• A CSS class is an attribute used to define a group of HTML elements in order
to apply unique styling and formatting to those elements with CSS.

• Use a dot operator(.) followed by the class name in a style block.

• Use a bracket called a declaration block that contains the property to stylize
the element, such as text color or text size. CSS Classes will help to stylize
HTML elements quickly
• Example: .class name
 CSS Class Selectors
The two types of normal selectors are selectors and the universal selector.
The third type of CSS selector—a class selector

The dot thing (.red in this example) is called a class selector because its purpose is to select elements
that have a particular value for their class attribute. So the class selector rule would select/match the
following element because it has a class attribute with a value of red:
<p class= red> a class selector that select elements that have a particular value for their class
attribute</p> In applying the class selector rule to this element, the quote gets displayed with a
tomato background color
 CSS Class Selectors
Class selector: The three CSS rules with their class selectors .red, .white, and .blue

<q> tag defines a short

quotation
 CSS Class Selectors
Class selector: The three CSS rules with their class selectors .red, .white, and .blue
 CSS Class Selectors
Class Selectors with Element Type Prefixes

It is used apply a CSS rule to any element whose one of the classes matches specified prefix.
When the same class name is to be used for multiple elements, but each with a different style, yo
can prefix the dot with the HTML element name.
element-type.class-value {property1: value; property2: value;}
 CSS Class Selectors
Class Selectors with * Prefixes
• Instead of prefacing a class selector with an element type, as an alternative, you can
preface a class selector with an *. Because * is the universal selector, it matches all
elements. Therefore, the following CSS rule is equivalent to a standard class selector rule
(with no prefix) *.class-value {property1: value; property2: value;}

Example: *.big-warning {font-size: x-large; color: red;

• It would match all elements in the web page that have a class attribute value of
big-warning, and it would display those elements with extra-large red font.

• CSS property names follow the same coding convention as developer-defined class attribute
values—if there are multiple words, use hyphens to separate the words (e.g., font-size). CSS
property values usually follow the same use-hyphens-to-separate-multiple-words coding
convention.
 CSS ID Selectors
• An ID selector is similar to a class selector in that it relies on an element attribute
value in searching for element matches.
• An ID selector uses an element’s id attribute (as opposed to a class selector, which
uses an element’s class attribute).
• A significant feature of an id attribute is that its value must be unique within a
particular web page. That’s different from a class attribute’s value, which does not
have to be unique within a particular web page.
• The ID selector’s unique-value feature means that an ID selector’s CSS rule matches
only one element on a web page.
• ID selectors are an important part of CSS.
 CSS ID Selectors
To match an element with an id attribute, an ID selector rule iss needed, and the syntax is

The syntax is the same as for a class selector rule, except that you use a pound sign (#)
instead of a dot (.), and use an id attribute value instead of a class attribute value.

#lizards-lounge {color: green;}

<h1 id="lizards-lounge">Lizards Lounge</h1>

 CSS ID Selectors
To match an element with an id attribute, an ID selector rule iss needed, and the syntax is
 span and div Element
The HTML5 elements: usage of the text in a span element or a div element

Span tags used to style inline content like a word in a line of text.
Div tags, used to style larger sections of content or act as a container for child elements.

The div and span elements are nonspecific elements in that

they don’t provide any special meaning when they’re used
by themselves.
They are simply placeholders to which CSS is applied.
Think of div and span as vanilla ice cream and CSS as the
various toppings you can add to the ice cream, such as
chocolate chips, mint flavoring, and Oreos.
 span and div Element
The span element
 span and div Element
• In the Pumpkin Patch web page, there are competing CSS rules for the two costs,
$10 and $15. The div container surrounds the entire web page body, so it
surrounds both costs, and it attempts to apply its orange text rule to both costs.1.
• The first span container surrounds the first cost; consequently, the first span
container attempts to apply its white text rule to the first cost.
• Likewise, the second span container surrounds the second cost; consequently, the
second span container attempts to apply its black text rule to the second cost.
• The span rules are considered to be more local because their start and end tags
immediately surround the cost content. The div rule is considered to be more
global because its start and end tags do not immediately surround the cost content.
span and div Element
 Cascading
A “style sheet” is a collection of rules that assign appearance properties to
structural elements in a document.
For a web page, a style sheet “rule” refers to a value assigned to a particular display
property of a particular HTML element.

Places Where CSS Rules Can Be Defined, Highest to Lowest Priority

1. In an element’s style attribute.
2. In a style element in the web page’s head section.
3. In an external file.
4. In the settings defined by a user for a particular browser installation.
5. In the browser’s native default settings
 Cascading
Style Attribute
The style attribute is at the top of cascading CSS rules list; as such, when you use
the style attribute for CSS rules, those rules are given the highest priority. Here’s an
example element that uses a style attribute.

• In the style attribute insert CSS property-value pairs directly in the code for an
individual element. So the preceding h2 element—but no other h2 elements—would be
rendered with an underline.
• The style attribute is a global attribute, which means it can be used with any element.
• The style attribute used to be referred to as “inline styles,” but the W3C no longer uses
style.
 Cascading
Style Container
• The style element is a container for CSS rules that apply to the entire current web
page. The browser applies the CSS rules’ property values by matching the CSS
rules’ selectors with elements in the web page.
• You need one style container per page and it should be placed in the head container
of the web page. It's legal to put a style container in the body, but don't do it, as it
makes the CSS rules harder to find.
 Cascading
Style Container
• For example, if a style attribute designates a paragraph as blue, but a rule in a
style container designates paragraphs as red, then what color will the browser use
to render the paragraph?
• According to the Priority the style attribute’s blue color wins, and the browser
renders that particular paragraph with blue text. This principle of more specific
rules beating more general rules should sound familiar. It parallels the principle
introduced earlier that says local things override global things
 External CSS Files
• An external style sheet is a separate CSS file that can be accessed by creating a
link within the head section of the webpage. Multiple webpages can use the same
link to access the stylesheet.
• There are two steps necessary to tie a web page to an external file that contains
CSS rules. First, for the external file to be recognized as a CSS file, the external
file must be named with a .css extension.
• For example, in an upcoming web page, the filename pumpkinPatch.css. Second,
for the web page to access a CSS file’s CSS rules, the web page must use a link
element in the web page’s head container. The link element is comprised of just
one tag, with no end tag. Here’s the syntax:
 External CSS Files
• In the code fragment, the href="name-of-external-file" attribute-value pair.
• The href stands for, “hypertext reference.”
• The href attribute’s value specifies the name of the file that holds the CSS rules
(e.g., pumpkinPatch.css).
• Note the rel="stylesheet" attribute-value pair, rel stands for “relationship,” and
its value tells the browser engine what to do with the href file.
• Having a rel value of stylesheet tells the browser engine to look for CSS rules in
the href file and apply them to the current web page.
 External CSS Files
• Why is sharing an external CSS file helpful? With a shared external CSS file, it’s

easy to ensure that all the web pages on your site follow the same common CSS

rules. To change those rules, you change them in one place, in the external file, and

the change affects all the web pages that share the external file.

• External CSS files used to be referred to as “external style sheets,” but the W3C no

longer uses that term, and we won’t use it either. However, you should recognize the

term “external style sheets” because you’ll hear it being used every now and then.
 External CSS Files
Example
 External CSS Files
The comment syntax.
You must start with a /* and end with a */.
If you have a long comment, you should have the comment span several lines, like
this:
/* The following rules are for a CSS image sprite that enables hover effects for the
navigation bar at the left. */
 CSS Validation Service
CSS validation service tool for verifying that the code in an external CSS file comports with
the W3C’s CSS standard.
• You can find the CSS validation service at https://jigsaw.w3.org/css-validator.
In Figure 3.11, note the CSS validation service’s three tabs. With the first tab, By URI, the user
enters a web address for the external file that is to be checked.
 CSS Validation Service
CSS validation service tool
• With the second option, By file upload, the user selects a file on his or her local

computer. With the third option, By direct input, the user copies HTML code

directly into a large text box.

• The second option, By file upload, because it’s a good idea to test a file stored

locally before uploading it.

 CSS Properties
• A CSS property specifies one aspect of an HTML element’s appearance.
• The W3C’s CSS3 standard provides many CSS properties (more than a hundred), so
there is great flexibility in terms of specifying appearances.
• CSS properties introduced in this chapter module
 CSS Properties
Color Properties
• The two color properties—color and background-color.
• The color property specifies the color of an element’s text.
• The background-color property specifies the background color of an element.
• A color value uses one of five different formats.
• color name—for example, red
• red RGB value—specifies amounts of red, green, and blue
• RGBA value—specifies red, green, and blue, plus amount of opacity.
• HSL value—specifies amounts of hue, saturation, and lightness.
• HSLA value—specifies hue, saturation, and lightness, plus amount of opacity
 CSS Properties
Color Properties
1. Color Names:
• The CSS3 specification defines 147 color names, and the major browsers support all
those colors.
 CSS Properties
Color Properties
2. RGB Values for Color
• RGB stands for red, green, and blue.
• An RGB value specifies the amounts of red, green, and blue that mix together to
form the displayed color.
• To specify an amount of a color, you can use a percentage, an integer, or a
hexadecimal number.
• The allowable ranges for each technique: percentage—0% to 100% for each color
integer—0 to 255 for each color hexadecimal—00 to ff for each color.
 CSS Properties
Color Properties
2. RGB Values for Color
• RGB Values with Percentages To specify an RGB value with percentages

• RGB Values with Integers To specify an RGB value with integers, use this format:
rgb(red-integer,green-integer,blue-integer)
•
 CSS Properties
Color Properties
2. RGB Values for Color
• RGB Values with Hexadecimal- base 16 (for the hexadecimal number system) means
there are 16 unique symbols—0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F.
• rr = two hexadecimal digits that specify the amount of red
• gg = two hexadecimal digits that specify the amount of green
• bb = two hexadecimal digits that specify the amount of blue

The red portion of #0f42ba is 0f, The green portion of #0f42ba is 42, The blue
portion of #0f42ba is ba, and blue in the resulting color( out of red, green, blue, the
blue portion has larger number).
 CSS Properties
Color Properties
3. Opacity Values for Color
• It is used to produce a partially transparent color by using the rgba construct with
values for red, green, blue, and opacity. The fourth value, opacity, determines how
opaque the color is, where opaque refers to the inability to see through something.
• The A in RGBA stands for alpha.

• The opacity value must be in the form of a decimal number between 0 and 1,
with 0 being completely transparent, 1 being completely opaque, and .5 in
between.
 CSS Properties
Color Properties
3. Opacity Values for Color
 CSS Properties
Color Properties
4. HSL Values for Color :
• HSL stands for hue, saturation, and lightness.
• Hue is a degree on the color wheel shown in FIGURE.
• The wheel is a circle, so the wheel’s degrees go from 0 to 360. 0 degrees is for red, 120 degrees
is for green, and 240 degrees is for blue.
• The second value in the hsl construct is the color’s percentage of saturation.
• The W3C says 0% means a shade of gray, and 100% is the full color.
• Saturation is the extent to which something is dissolved or absorbed compared with the
maximum possible absorption.
• The third value in the hsl construct is the color’s percentage of lightness. A lightness value of
0% generates black, lightness value of 100% generates white
 CSS Properties
Color Properties
4. HSL and HSLA Values for Color
 CSS Properties
Color Properties
5. HSLA Values for Color

hsla(hue-integer,saturation-percent,lightness-percent,opacity-number-between-0-
and-1)
The fourth argument specifies the opacity. The opacity value must be in the form of
a decimal number between 0 and 1, with 0 being completely transparent and
1 being completely opaque. Here’s an example CSS rule with an HSLA color value
 Font Properties
• Font refers to the characteristics of text characters—height, width, thickness,
slantedness,7 body curvatures, and endpoint decorations.
• The font properties has the font-style, font-variant, font-weight, font-size, font-family,
and font shorthand properties.

1. font-style property
The font-style property specifies whether the text is to be displayed normally or
slanted. Here are the valid values for the font-style property
 Font Properties
1. font-style property

.italics {font-style: italic;}

.italics { font-style: normal}
To apply the default values for all CSS properties, and to force the default value to
be used for a particular property, you can specify initial.
.not-italicized {font-style: initial;}
 Font Properties
2. font-variant property

• The font-variant property specifies how lowercase letters are displayed. Here are the
valid values for the font-variant property:
 Font Properties
3. font-weight property
The font-weight property specifies the boldness of the text characters. Here are the valid
values for the font-weight property:
 Font Properties
4. font-size property
The font-size property specifies the size of the text characters. There are quite a few
values allowed for the font-size property.
 Font Properties
5. Absolute units
There are quite a few other techniques for specifying font size. For example, specify a
number along with an in, cm, mm, pt (point), or pc (pica) unit. The W3C refers to
those units rather disdainfully as “so-called absolute units.”

6. font-family Property
font-family, is more holistic in nature. The font-family property allows the web
developer to choose the set of characters that the browser uses when displaying the
element’s text.
 Font Properties
6. font-family Property

Generic font names use lowercase, and you can verify that for the five generic
fonts shown
 Font Properties
7. font- Shorthand Property

The font CSS shorthand property sets all the different properties of an element's font.
The font property can be used to specify all these more granular font properties—
font-style, font-variant, font-weight, font-size, line-height, and font-family
 Font Properties
8. line-height Property

The line-height CSS

property sets the height
of a line box. It's
commonly used to set the
distance between lines of
text.
 Font Properties
8. line-height Property

As an alternative to using an em(unit of measurement) value for the line-height

property, you can use a percentage value.
example: .proof-reading {line-height: 300%;}
 Text Properties
CSS text formatting properties is used to format text and style text.
1. text-align Property
The text-align property specifies the horizontal alignment for a block of text. Here are
the valid values for the text-align property
 Text Properties
CSS text formatting properties is used to format text and style text.
2. text-decoration Property
The text-decoration property specifies something decorative that is added to text.
Here are the valid values for the text-decoration property
 Text Properties
CSS text formatting properties is used to format text and style text.
3. text-transform Property
The text-transform property controls the text’s capitalization. Here are the valid values
for the text-transform property:
 Text Properties
CSS text formatting properties is used to format text and style text.
4. text-indent Property
The text-indent property specifies the size of the indentation of the first line in a block
of text. The block’s second and third lines (and so on) are unchanged; that is, they do
not get indented
 Border Properties
The border properties allow you to specify the appearance of borders that surround
elements.
Example for border properties are:
border-style,
border-width,
border-color properties.
 Border Properties
1. Border-style: The border-style property specifies the type of border that
surrounds the matched element. Here are the valid values for the border-style
property:

example class selector rule that uses the border-style property to draw a dashed
border .coupon {border-style: dashed;}
 Border Properties
2. Border- width property: The border-width property specifies the width of the
border that surrounds the matched element.
 Border Properties
2. Border- width property:

If you specify three values, then the first value applies to the top side, the second
value applies to the left and right sides, and the third value applies to the bottom
side. Thus, the preceding border-width property value pair could have been written
as follows and the result would be the same:
(border-top-width, border-right-width, border-bottom-width, and
border-left-width)

border-width: 4px 2px 0px;

 Border Properties
3. Border- color property: The border-color property specifies the color of the
border that surrounds the matched element. There’s no new syntax to learn for the
border-color property because it uses the same values as the color property and the
background-color property.
 Border Properties
4. Border- Shorthand property: If you want to apply more than one of the prior
border-related properties to an element, then the border property is a shorthand
notation used for specifying a border’s width, style, and color in that order.
Element Box, padding Property, margin
Property
1. Element Box
• The CSS box model is essentially a box that wraps around every HTML element.
• It consists of: margins, borders, padding, and the actual content. Every web page
element has an element box associated with it. An element box has a border,
padding inside the border, and a margin outside the border.
• For most elements, but not all, the default border, padding, and margin widths
are zero.
• Adjust the widths of element box with the border-width, padding, and margin
properties.
 Element Box, padding Property, margin
Property
1. Element Box

The dashed lines indicate the perimeters of the margin and padding areas. When a
web page is displayed, only the border can be made visible; the dashed lines shown
in the figure are only for illustration purposes.
 Element Box, padding Property, margin
Property
2. padding and margin Properties
• The padding property specifies the width of the area on the interior of an
element’s border, whereas the margin property specifies the width of the area
on the exterior of an element’s border.
• Usually, the most appropriate type of value for the padding and margin properties
is a CSS pixel value.

.label {border: solid; padding: 20px; margin: 20px;}

• The margin and padding properties allow negative values. While a positive
value forces two elements to be separated by a specified amount, a negative
value causes two elements to overlap by a specified amount.
 Element Box, padding Property, margin
Property
2. padding and margin Properties
 Element Box, padding Property, margin
Property
2. padding and margin Properties
Padding Property, margin Property

• inline-block is to display list items

horizontally instead of vertically.
• The border-radius CSS property
rounds the corners of an element's
outer border edge.
Padding Property, margin Property
 Using a Percentage for a Web Page’s Margin
To change the body’s margin from the default, a CSS rule for the body element’s
margin property is used. A CSS pixel value is used for margin, but if you want to have
the web page’s margin shrink and grow when the user resizes the browser window
by dragging a corner, use a percentage value.

body {margin: 10%;} margin: 10px;

 Using the Different Length Units
The em, px, %, and several absolute units such as pc, in, cm, and so forth. All
those units are called length units.
• Use em for font-related properties (like font-size).
• Use px for properties that should be fixed for a given resolution, even if the
element’s font size changes or even if the containing element’s size changes.
• Use % for properties that should grow and shrink with the size of the containing
element (like margins for the body element).
• Use absolute units sparingly—only when a fixed size is essential and the target
device has a high resolution.
Case Study: Description of a Small City’s Core Area

Check Google class room for the case

study example

Case Study_Description of a Small

City’s Core Area.htm