ARBA MINCH UNIVERSITY

Web
Programming
FCSE / Computer Science

Instructor:
• Chala Simon

Web Programming 1
<q> Talk is cheap. Show me the code.</q> …...... Linus Torvalds (Founder of Linux kernel)
Chapter Three Cascading Style Sheets (CSS)

Web Programming 2
Contents

• What is CSS?
• Why use style sheets?
• Anatomy of a CSS Rule
• CSS Selectors
• The Combinators Selector
• Linking HTML and CSS
• Common CSS Properties
• CSS Units
Web Programming 3
What is CSS?
• CSS stands for Cascading Style Sheets
• Describes the appearance, layout, and presentation of information on a web page
• Describes how information is to be displayed, not what is being displayed
• To describe the presentation a document written in a ‘markup language’ like
HTML or XML
• Markup encoding: <p>My paragraph here.</p>
• Defines the style of how things in <p> tags appear.
• Font, color, size, margins, etc.
• Cascading
• Rules to determine how to apply markup that contains
other markup

Web Programming 4
 Why CSS?
• Separate Content from Form
• Content is the text and images, marked up to define regions of specific types
• Form defines the “style” for the content
<font size=“14px”> <p class=“header”>My First Header</p>

Content
My First Header <p class=“info”>My Information 1 goes here</p>
</font> <p class=“header”>My Second Header</p>
<font size=“12px” color=“red” face=“Verdana”> <p class=“info”>Different Information goes here</p>
The Old way

My information 1 goes here.

</font>
<font size=“14px”>
My Second Header .header { font-size:14px;}

Form/style
</font> .info { font-family: verdana;
<font size=“12px” color=“red” face=“Verdana”> font-color: blue;
Different information goes here. font-size: 12px; }
</font>

Can be embedded in HTML document or placed into separate .css file 5

 Anatomy of a CSS Rule
• A CSS rule-set consists of a selector and a declaration block:

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.

Web Programming 6
… e.g.

• In the following example all <p> elements will be center-aligned,

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

CSS Comments - starts with /* and ends with */.

Web Programming 7
CSS Selectors
• CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more
• selects elements based on the element name
p {
The element Selector text-
align: center;
color: red;
}
You can select all <p> elements on a page like
this (in this case, all <p> elements will be
center-aligned, with a red text color):

Web Programming 8
CSS Selectors
• uses the id attribute of an HTML element to select a specific element
• The id of an element should be unique within a page
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.

The id Selector
#para1 {
text-
align: center;
color: red;
}
<p id=“para1”> Hello world
</p>
• The style rule above will be applied to the HTML element with
id="para1":
• Note: An id name cannot start with a number!
Web Programming 9
 CSS Selectors
• It selects the elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the name of the class.
• HTML elements can also refer to more than one class.

.center {
The Class Selector text-align:
center; <p class=“center”> Hello world
color: red; </p>
}

• In the above example, all HTML elements with class="center" will be red and center-
aligned.
• A class name cannot start with a number!
Web Programming 10
 CSS Selectors
• If you have elements with the same style definitions, like this:

h1 {
text-
align: center;
color: red;
}
h1, h2, p {
The Grouping Selector text-
h2 {
align: center;
text-
color: red;
align: center;
}
color: red;
}

p {
text-
align: center;
Web Programming 11
color: red;
The Combinators Selector
• A combinator is something that explains the relationship between the
selectors
• There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

Web Programming 12
 …cont’d
Selector Example Example description

element element div p Selects all <p> elements inside <div> elements

element>element div > p Selects all <p> elements where the parent is a <div> element

element+element div + p Selects the first <p> element that are placed immediately after
<div> elements

element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p>

element

Web Programming 13
…examples
descendant selector (space) child selector (>)

div p { div > p {

background-color: yellow; background-color: yellow;
} }

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
<div> </div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p> <div>
</div> <span>
<p>I will not be styled.</p>
</span>
</div>

Web Programming 14
…examples

Adjacent sibling selector (+) General sibling selector (~)

div + p { div ~ p {
background-color: yellow; background-color: yellow;
} }

<div> <div>
<h2>My name is Donald</h2> <h2>My name is Donald</h2>
<p>I live in Duckburg.</p> <p>I live in Duckburg.</p>
</div> </div>

<p>My best friend is Mickey.</p> <p>My best friend is Mickey.</p>

<p>I will not be styled.</p> <p>I will not be styled.</p>

Web Programming 15
Linking HTML and CSS
• There are three ways of inserting a style sheet:
Inline style sheet
• used to apply a unique style for a single element, by adding the style attribute to the relevant element.

Internal style sheet

• Defined within the <style> element, inside the <head> section of an HTML page

External style sheet

• a separate file (.css) where you can declare all the styles that you want to use on your website

Web Programming 16
 … example
Inline style sheet

<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
<head>
Internal style sheet
<style>
h1{
color: orange;
margin-left: 30px;
}
</style>
External style sheet </head>

<head> h1{
<link rel="stylesheet" type="text/ color: orange;
css" href="mystyle.css"> margin-left: 30px;
</head> }
Web Programming 17
 Cascading Order
• What style will be used when there is more than one style specified for an
HTML element?
• Order:
• Inline style (inside an HTML element)
• External and internal style sheets (in the head section)
• Browser default

• So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in
an external style sheet, or a browser default value.
Web Programming 18
 Common CSS Properties
Text Background Positioning

color background-color position

:color|initial|inherit color|transparent|initial| static|absolute|

inherit fixed|relative|
font-size background-size init..
float
:length|initial| auto|length|cover|
inherit contain| none|left|right|
Text-align initial|inherit; init..
background-image clear
:left|right|center|
justify| url|none|initial| none|left|right|both|
initial|inherit inherit; init…
text-decoration background-repeat overflow
:Line|color|style| repeat|repeat-x|repeat-y| visible|hidden|scroll|
initial| no-repeat|initial|inherit; auto…
inherit Offset Properties
Web Programming 19
top|left|bottom|
CSS colors
• CSS uses color values to specify a color.

• Typically, these are used to set a color either for the foreground of an element
(i.e., its text) or else for the background of the element.

• They can also be used to affect the color of borders and other decorative effects.

• Colors can be specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values. (A- stands for alpha channel – to specify opacity)

• The first and easiest way to specify a color is using one of the 140 predefined
color keywords specified in CSS. [CSS Colors (w3schools.com)]
Web Programming 20
 With CSS, a color is most often specified by:

<h1 style="color:red;">Hello world</h1> Hello world

<h2 style="background-color:rgb(0, 0, 255);">Hello world</h1> Hello world

<h1 style="border:2px solid #00ff00;">Hello Hello world

World</h1> Web Programming 21
 CSS backgrounds
• The CSS background properties are used to add background effects for elements.
• css properties used for background effects:
 background-color - specifies the background color of an element

<h1 style="background-color:red">Hello world</h1> Hello world

 background-image - specifies an image to use as the background of an element

- By default, the image is repeated so it covers the entire element
P{ background-image: url(“dog.jpeg"); }

 background-repeat – repeats an image both horizontally and vertically

- (Some images should be repeated only horizontally or vertically)
 background-attachment – specifies whether the background image should scroll or be fixed (will not
scroll with the rest of the page)
 background-position - to specify the position of the background image
e.g. background-position: right top;
 background (shorthand property)
Web Programming 22
background: #ffffff url(“xyz.png") no-repeat right top;
CSS Borders
• The CSS border properties allow you to specify the style, width, and color of an element's
border.
Border Style
• The border-style property specifies what kind of border to display.
• The following values are allowed: p{ <p>Hello world.</p>
 dotted - Defines a dotted border border-style: solid;
 dashed - Defines a dashed border }
 solid - Defines a solid border
 double - Defines a double border Hello world Hello world Hello world

• The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border). s
p{ i u
• Border Color a d
border: 2px solid red;
r-r
• Border - Shorthand Property border-radius: 5px; de
or
} b
Web Programming 23
 CSS Box Model

 CSS box model is the foundation of design and layout of the web.
 It is simply box or a rectangular 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.
 The image below illustrates the box model:

Web Programming 24
 …cont’d

Explanation of the different parts:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

• The box-sizing property allows us to include the padding and border in an element's total width and height.
Web Programming 25
• box-sizing: border-box;
 CSS Margins

• The CSS margin properties are used to create space around elements, outside of any defined
borders.
Margin - Individual Sides
• CSS has properties for specifying the margin for each side of an element:
p{
• margin-top margin-top: 100px;
• margin-right margin-bottom: 100px;
• margin-bottom margin-right: 150px;
margin-left: 80px;
• margin-left }
• All the margin properties can have the following values:
• auto - the browser calculates the margin horizontally to center the element within its container
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element
• Tip: Negative values are allowed.
• Margin - Shorthand Property - it is possible to specify all the margin properties in one property.
 margin: Top Right Bottom Left;  margin: 25px 50px 75px 100px;
Web Programming 26
• Can also be given as two values  margin: Top|Bottom Right|Left;  margin: 20px 10px;
CSS Padding
• The CSS padding properties are used to generate space around an element's content, inside of any defined
borders.
• CSS has properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left
Padding - Shorthand Property
• To shorten the code, it is possible to specify all the padding properties in one property.
If the padding property has four values: padding: 25px 50px 75px 100px;  Top Right Bottom Left

Web Programming 27
 Setting height and width

• The height and width properties are used to set the height and width of an element.

div {
width: 500px;
height: 100px;
background-color: powderblue;
}

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

• Note: The height and width properties do not include padding, borders, or margins; they set the height/width
of the area inside the padding, border, and margin of the element!
Web Programming 28
 Minimum and Maximum Width and Heights

• The following properties define CSS minimum and maximum width and heights.
 min-width: sets the minimum width of an element
 max-width: sets the maximum width of an element
 min-height: sets the minimum height of an element
 max-height: sets the maximum height of an element
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

div {
min-width: 50px;
height: 100px;
background-color: powderblue;
}
• Note: The value of the max-width property overrides width. Resize the window to see the effect.
Web Programming 29
 CSS Outline

• An outline is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out".

CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
 outline-offset –space b/n border and outline
 outline – shorthand form

• Outline differs from borders! Unlike border, the outline is drawn outside the element's
border, and may overlap other content.

• Also, the outline is NOT a part of the element's dimensions; the element's total width and
height is not affected by the width of the outline.
Web Programming 30
 CSS Units
• CSS has several different units for expressing a length.
• There are two types of length units: absolute and relative.
absolute

• The absolute length units are fixed and a length expressed in any of these will appear as exactly
that size.

• Absolute length units are not recommended for use on screen, because screen sizes vary so much.
However, they can be used if the output medium is known, such as for print layout.

Unit Cm mm in px pt pc

centimeters Millimeters inches pixels (1px = points (1pt =

Description Web Programming picas (1pc
31 = 12 pt)
1cm =37.7px 1mm=3.77px (1in = 96px = 2.54cm) 1/96th of 1in) 1/72 of 1in)
CSS Units
relative

• Relative length units specify a length relative to another length property.

• Relative length units scales better between different rendering mediums.

Unit Description

em Relative to the font-size of the element (2em means 2 times the size of the current font)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
% Relative to the parent element
Web Programming 32
 CSS Text

• CSS has a lot of properties for formatting text.

CSS text properties:
• color: specifies the color of text.
• text-align: A text can be left or right aligned, centered, or justified.
• text-decoration: underline, overline, line-through, none
• text-transform: uppercase, lowercase, capitalize
• letter-spacing: property is used to specify the space between the characters in a text.
• line-height: property is used to specify the space between lines:
• word-spacing: property is used to specify the space between the words in a text.
• text-indent: property is used to specify the indentation of the first line of a text:
• text-shadow: property adds shadow to text.
h1{
text-shadow: 2px 2px 2px red;
}

Web Programming 33
CSS Fonts

• Choosing the right font for your website is important!

• In CSS there are five generic font families:

body{
font-family: Arial, Verdana, sans-serif;
}

• Applying a list of fonts - By defining multiple values for font-family, the browser will look for
available font family by the given order, if Web
it’sProgramming
not available either, it will use the browser’s34
default sans-serif font.
…cont’d

.p1 { The font property is a shorthand property for:

font-family: "Times New Roman", Times, serif;  font-style
font-style: italic;  font-variant
font-weight: bold;  font-weight
font-variant: normal;  font-size/line-height
font-size: 40px;  font-family
}
• The CSS Font Property
p{
Web Programming
font: italic small-caps bold 12px/30px Georgia, 35
serif;
}
CSS Pseudo-classes
• A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
• The syntax of pseudo-classes:
selector:pseudo-class
{
property:value;
}

Web Programming 36
Anchor Pseudo-classes
• With CSS, links can be styled in many different ways.
• Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
Text Decoration }
• The text-decoration property is mostly used to remove underlines from links: /* selected link */
a:active {
a:hover { color: blue;
text-decoration: underline;
} This is a link
Web Programming 37
 …cont’d
Pseudo-classes and CSS Classes a.highlight:hover {
• Pseudo-classes can be combined with CSS classes: color: #ff0000;
}
• When you hover over the link in the example, it will change color:

Hover on <div> div:hover {

background-color: blue;
• An example of using the :hover pseudo-class on a <div> element: }

CSS - The :first-child Pseudo-class

• The :first-child pseudo-class matches a specified element that is the first child of another
element.
This is some text.
p:first-child { <p>This is some text.</p>
color: blue; <p>This is some text.</p> This is some text.
}
Web Programming 38
…cont’d

CSS Pseudo Elements - used to style specified parts of an element.

selector::pseudo-element {
property: value;
}
p::after {
Selector Example Example description content: " - Remember this";
}
::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

<p>My name is Rodas</p>
::first-letter p::first-letter Selects the first letter of every <p> element <p>I live in Arba Minch</p>

::first-line p::first-line Selects the first line of every <p> element

My name is Rodas - Remember this
::selection p::selection Selects the portion of an element that is selected
I live in Arba Minch - Remember this
by a user

Web Programming 39
 CSS tables
• To specify table borders in CSS, use the border property.
• The example below specifies a solid border for <table>, <th>, and <td> elements:
Collapse Table Borders
• The border-collapse property sets whether the table borders should be collapsed into a single
border:

table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
th
{
background-color:green; tr:nth-child(even) { tr:first-child {
} background-color: yellow; background-color: red;
} }
Web Programming 40
 CSS Layout - The display Property

• The display property is the most important CSS property for controlling layout.
• The display property specifies how an element is displayed.

• Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.
Block-level Elements
• A block-level element always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).
Examples of block-level elements:
• <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>
Inline Elements
• An inline element does not start on a new line and only takes up as much width as necessary.
• Examples of inline elements:
• <span>, <a>, <img> Web Programming 41
 …cont’d

• every element has a default display value. However, you can override this.
• Changing an inline element to a block element, or vice versa, can be useful for making the
page look a specific way, and still follow the web standards.
• A common example is making inline <li> elements for horizontal menus:
<ul>
li { <li><a href="/html/default.asp" target="_blank">HTML</a></li>
display: inline; <li><a href="/css/default.asp" target="_blank">CSS</a></li>
} <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

• Note: Setting the display property of an element only changes how the element is displayed, NOT what kind
of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

<a href="/html/default.asp" target="_blank">HTML</a>

a{ <a href="/css/default.asp" target="_blank">CSS</a>
display: block; <a href="/js/default.asp" target="_blank">JavaScript</a>
}
Web Programming 42
CSS Layout - The position Property

• The position property specifies the type of positioning method used for an element.
• There are five different position values:
static relative fixed absolute sticky

• Elements are then positioned using the top, bottom, left, and right properties.

• However, these properties will not work unless the position property is set first. They also work differently
depending on the position value.

position: static
• HTML elements are positioned static by default.

• Static positioned elements are not affected by the top, bottom, left, and right properties.

• An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page: Web Programming 43
 …cont’d

position: relative
• An element with position: relative; is positioned relative to its normal position.

• Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position.

• Other content will not be adjusted to fit into any gap left by the element.

div.relative { <div class="relative">

position: relative; This div element has position: relative;
left: 30px; </div>
border: 3px solid #73AD21;
}

Web Programming 44
 …cont’d

position: fixed
• An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.

• A fixed element does not leave a gap in the page where it would normally have been
located.
div.fixed {
position: fixed;
<h2>position: fixed;</h2>
bottom: 0;
<div class="fixed">
right: 0; This div element has position: fixed;
width: 300px; </div>
border: 3px solid #73AD21;
}
Web Programming 45
 …cont’d

position: absolute
• An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).

• However; if an absolute positioned element has no positioned ancestors, it uses the

document body, and moves along with page scrolling.

• Note: Absolute positioned elements are removed from the normal flow, and can overlap
elements.

Web Programming 46
 …cont’d

position: absolute
div.relative {
<h2>position: absolute;</h2>
position: relative; <div class="relative">This div element has position: relative;
width: 400px; <div class="absolute">This div element has position:
height: 200px; absolute;</div>
border: 3px solid #73AD21; </div>
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
} Web Programming 47
 …cont’d

position: sticky
• An element with position: sticky; is positioned based on the user's scroll position.
• A sticky element toggles between relative and fixed, depending on the scroll position.
• It is positioned relative until a given offset position is met in the viewport - then it "sticks"
in place (like position:fixed).
• You must also specify at least one of top, right, bottom or left for sticky positioning to work.

<p>Try to <b>scroll</b> inside this frame to

div.sticky { understand how sticky positioning works.</p>
position: -webkit-sticky;
position: sticky; <div class="sticky">I am sticky!</div>
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
Web Programming 48
CSS Layout - The z-index

• When elements are positioned, they can overlap other elements.

• The z-index property specifies the stack order of an element (which element should be placed in front
of, or behind, the others).

• An element can have a positive or negative stack order:

img {
position: absolute;
left: 0px;
top: 0px; <h1>This is a heading</h1>
z-index: -1; <img src="img_tree.png">
} <p>Because the image has a z-index of -1, it will be placed behind the
text.</p>

• Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or
Web Programming 49
position: sticky) and flex items (elements that are direct children of display: flex elements).
CSS Overflow

• The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.

The overflow property has the following values: visible, hidden, scroll and auto.

• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
Note: The overflow property only works for block elements with a specified height.

div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: auto;
}
Web Programming 50
 CSS Layout - float and clear

• The CSS float property specifies how an element should float.

• The CSS clear property specifies what elements can float beside the cleared element and on
which side.
The float Property

• The float property is used for positioning and formatting content e.g. let an image float left
to the text in a container.
• The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is
default
inherit - The element inherits the float value of its parent
• In its simplest use, the float property can Web
beProgramming
used to wrap text around images. 51
…cont’d

img {
float: left;
}

img {
float: right;
}

Web Programming 52
 The clear Property

• When we use the float property, and we want the next element below (not on right or left), we will have to use the
clear property.

• The clear property specifies what should happen with the element that is next to a floating element.
div {
• The clear property can have one of the following values: float: left;
padding: 15px;
 none - The element is not pushed below left or right floated elements. This is default }
.div1 {
<div class="div1">Div 1</div> background: red;
 left - The element is pushed below left floated elements <div class="div2">Div 2</div> }
.div2 {
<div class="div3">Div 3</div> background: yellow;
 right - The element is pushed below right floated elements
}
.div3 {
 both - The element is pushed below both left and right floated elements background: green;
}
 inherit - The element inherits the clear value from its parent

• When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should
clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the
Web Programming 53
web page.
The clear Property

.div3 {
float: left;
padding: 10px;
<h2>With clear</h2>
border: 3px solid #73AD21;
<div class="div3">div3</div>
}
<div class="div4">div4 - Here, clear: left; moves div4 down
below the floating div3. The value "left" clears elements floated
.div4 {
to the left. You can also clear "right" and "both".</div>
padding: 10px;
border: 3px solid red;
clear: left;
}

Web Programming 54
 CSS Layout - display: inline-block

• display: inline-block allows to set a width and height on the element.

• with display: inline-block, the top and bottom margins/paddings are respected, but with
display: inline they are not.
• Compared to display: block, the major difference is that display: inline-block does not add a
line-break after the element, so the element can sit next to other elements.

.nav {
background-color: yellow; <ul class="nav">
list-style-type: none; <li><a href="#home">Home</a></li>
text-align: center; <li><a href="#about">About Us</a></li>
margin: 0; <li><a href="#clients">Our Clients</a></li>
padding: 0; <li><a href="#contact">Contact Us</a></li>
} </ul>
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
} Web Programming 55
 CSS Opacity / Transparency

• The opacity property specifies the opacity/transparency of an element.

Transparent Image
• The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

img {
opacity: 0.5;
filter: alpha(opacity=50); /*
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
For IE8 and earlier */
}
Web Programming 56
 CSS Specificity

What is Specificity?

• If there are two or more CSS rules that point to the same element, the selector with the
highest specificity value will "win", and its style declaration will be applied to that HTML
<html>
element.
<html>
<html>
<head>
<html> <head>
<head> <style>
<head> <style>
<style> #demo {color: blue;}
<style> #demo {color: blue;}
p{ .test {color: green;}
.test {color: green;} .test {color: green;}
color: red; p {color: red;}
p {color: red;} p {color: red;}
} </style>
</style> </style>
</style> </head>
</head> </head>
</head> <body>
<body> <body>
<body>
<p id="demo" class="test"
<p class="test">Hello!</p> <p id="demo"
<p>Hello!</p> style="color:
class="test">Hello!</p>
orange;">Hello!</p>
</body>
</body>
</html> </body>
</html> </body>
</html>
Web Programming 57
</html>
 …cont’d

<style>
Specificity Hierarchy h1 {background-color: yellow;}
h1 {background-color: red;}
• Every CSS selector has its place in the specificity hierarchy. </style>

• There are four categories which define the specificity level of a selector:
 Inline styles - Example: <h1 style="color: orange;">

 IDs - Example: #navbar

 Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]

 Elements and pseudo-elements - Example: h1, :before

• Equal specificity: the latest rule wins - If the same rule is written twice into the external
style sheet, then the latest rule wins: <h1>This is heading 1</h1>

Web Programming 58
EnD

Web Programming 59