Module I – Introduction to HTML & CSS
Location of Styles (Levels of Stylesheets)
CSS style rules can be located in three different locations, in order from lowest level to highest
level, are inline, document level, and external.
Inline Styles
Inline styles are style rules placed within an HTML element using the style attribute, as shown
below. An inline style only affects the element it is defined within and overrides any other style
definitions. Selector is not necessary with inline styles and that semicolons are only required for
separating multiple rules.
Disadvantages of using inline style-
Style is applied to an element only
Maintaining the inline style is difficult
The advantage of using inline style is that it can be quickly tested for a style change.
Eg: <h2 style = “font-size:24pt;”> Description</h2>
<h2 style = “font-size:24pt; font-weight:bold;”> Reviews </h2>
Embedded Style Sheet (Document Level/Internal )
Embedded style sheets (also called internal styles or document level styles) are style rules
placed within the <style> element (inside the <head> element of an HTML document) and apply
to the whole body of the document.
The disadvantage of using embedded styles is that it is difficult to consistently style multiple
documents when using embedded styles. But it is helpful when quickly testing out a style that is
used in multiple places within a single HTML document. Spaces are ignored in <style> element.
<head>
<title>Student Data</title>
<style>
h1 { font-size: 24pt; }
h2 {
font-size: 18pt;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Student count</h1>
<h2>CSE/ISE Department</h2>
……..
</body>
Page 21
Module I – Introduction to HTML & CSS
External Style Sheet
External style sheets are style rules placed within an external text file with the .css extension.
This style provides the best maintainability. When you make a change to an external style sheet,
all HTML documents that reference that style sheet will automatically use the updated version.
To reference an external style sheet, you must use a <link> element (within the <head> element).
Several style sheets can be linked at a same time. Each linked style sheet will require its own
<link> element.
<head >
<title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="[Link]" />
</head>
Selectors
The selector identifies which element or elements in the HTML document will be affected by the
declarations in the rule. They are a pattern that is used by the browser to select the HTML
elements that will receive the style.
Element Selectors
Class Selectors
Id Selectors
Attribute Selectors
Pseudo-Element and Pseudo-Class Selectors
Contextual Selectors
Element Selectors
Element selectors select an element or group of elements of the HTML document, and the
properties are applied on it.
The group of elements are separated using commas is called grouped selector.
Universal element selector - All elements of the document can be selected by using the *
(asterisk) character.
Eg of element selector -
<head>
<title>Student details </title>
<style>
*{ color:blue;}
h1 {
Output:
Page 22
Module I – Introduction to HTML & CSS
color: red;
}
</style>
</head>
<body>
<h1 >Student Info</h1>
<div>
<p >Amith</p>
<p>Easy to learn.</p>
</div>
<hr/>
<div>
<p >Bhushan</p>
<p>Very much special.</p>
</div>
<hr/>
</body>
Eg of grouped selector
p, div, h3 {
margin: 0;
padding: 0;
}
Eg of universal element selector
*{
color : red;
}
Class Selectors
A class selector allows to simultaneously target different HTML elements. The HTML elements
with the same class attribute value, can be styled by using a class selector.
Syntax: period (.)classname{ styles}
Eg:
<head>
<title>Student details </title>
<style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body> Output:
<h1 class="first">Student Info</h1>
<div>
<p class="first">Amith</p>
Page 23
Module I – Introduction to HTML & CSS
<p>Easy to learn.</p>
</div>
<hr/>
<div>
<p class="first">Bhushan</p>
<p>Very much special.</p>
</div>
<hr/>
</body>
Id Selectors
An id selector allows to assign style to a specific element by its id attribute.
Syntax: hash (#)id name
Eg:
<head>
<title>Student details </title>
<style>
#first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 id="first">Student Info</h1>
<div>
<p id="first">Amith</p> Output:
<p>Easy to learn.</p>
</div>
<hr/>
<div>
<p >Bhushan</p>
<p>Very much special.</p>
</div>
<hr/>
</body>
Attribute Selectors
An attribute selector provides a way to select HTML elements either by the presence of an
element attribute or by the value of an attribute.
Eg: [src], [src$=”.jpg”] , a[href*=”gala”] etc.
[src] – selects all the elements which have ‘src’ as an attribute
[src$=”.jpg”] – selects all the elements with ‘src’ value ending with .jpg
a[href*=”gala”] – selects <a> tag with ‘href’ value having text ‘gala’.
Page 24
Module I – Introduction to HTML & CSS
Attribute selectors is very helpful technique in the styling of hyperlinks and images.
Suppose, we want special attention of user when a pop-up tooltip is available for a link or image.
This can be done by using the following attribute selector:
[title] { … }
Eg:
<head >
<title>Student activities</title>
<style>
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
}
</style>
</head>
<body>
<div>
<img src="[Link]" title="Cycle" />
<a href = “[Link]” title= “link to photo”> click </a>
</div>
</body>
Output:
Page 25
Module I – Introduction to HTML & CSS
Pseudo-Element and Pseudo-Class Selectors
A pseudo-element selector is a way to select something that does not exist explicitly as an
element in the HTML document but which is still a recognizable selectable object.
For instance, first line or first letter of any HTML element.
A pseudo-class selector does apply to an HTML element, but targets a particular state.
Page 26
Module I – Introduction to HTML & CSS
The most common use of this type of selectors is for targeting link states. By default, the browser
displays link text blue and visited text links purple.
Contextual Selectors
A contextual selector (in CSS3 also called combinators) allows to select elements based on
their ancestors, descendants, or siblings. It selects elements based on their context or relation to
other elements in the document tree.
As shown in below table, descendant selector matches all elements that are contained within
another element. The character used to indicate descendant selection is the space character.
<head>
<title>Student details </title>
<style> Output:
#first p{
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 id="first">Student Info
<div>
<p >Amith</p>
<p>Easy to learn.</p>
</div>
</h1>
<hr/>
<div>
<p >Bhushan</p>
Page 27
Module I – Introduction to HTML & CSS
<p>Very much special.</p>
</div>
<hr/>
</body>
The Cascade: How Styles Interact
Multiple CSS rules can be defined for the same HTML element, at different locations – inline,
embedded or external. The browser determines the style to be applied on an element, depending
on the location and hierarchy of the html element.
The “Cascade” in CSS refers to how conflicting rules are handled. CSS uses the following
cascade principles to help it deal with conflicts: inheritance, specificity, and location.
Inheritance
Inheritance is the first of these cascading principles. Many (but not all) CSS properties affect
not only themselves but their descendants as well. Font, color, list, and text properties are
inheritable; layout, sizing, border, background, and spacing properties are not inheritable.
If suppose, this is a document,
<head>
<style>
body {
font-family: Arial;
color: red;
border: 8pt solid green;
margin: 100px;
}
div {
font-weight: bold;
}
</style>
</head>
<body>
<div>Will be displayed in red, with arial font and bold</div>
</body>
The font settings are inherited from the parent tag, border and margin are not inheritable.
However it is possible to tell elements to inherit properties that are normally not inheritable, by
explicitly specifying as ‘inherit’.
div {
font-weight: bold;
border: inherit;
margin: inherit;
}
Page 28
Module I – Introduction to HTML & CSS
Specificity
Specificity is how the browser determines which style rule takes precedence when more than one
style rule could be applied to the same element. In CSS, the more specific the selector, the more
it takes precedence (i.e., overrides the previous definition)
<head>
<style>
body {
font-family: Arial;
color: red;
border: 8pt solid green;
margin: 100px;
}
div {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<div>Will be displayed in blue, with arial font and bold</div>
</body>
The content of <div> is displayed in blue, as the red color setting of <body> tag is overridden in
the specification of <div> tag.
Location
The principle of location is that when rules have the same specificity, then the latest are given
more weight. Ie., an inline style will override one defined in an embedded style sheet and
embedded style will override the external style sheet.
Styles defined in external style sheet X will override styles in external style sheet Y if X’s <link>
element is after Y’s in the HTML document.
<link rel= “stylesheet” href= “Y”>
<link rel= “stylesheet” href= “X”>
When the same style property is defined multiple times within a single declaration block, the last
one will take precedence.
Specificity algorithm:
■ First count 1 if the declaration is from a “style” attribute in the HTML, 0 otherwise (let that
value = a).
■ Count the number of ID attributes in the selector (let that value = b).
■ Count the number of class selectors, attribute selectors, and pseudo-classes in the selector (let
that value = c).
■ Count the number of element names and pseudo-elements in the selector (let that value = d).
■ Finally, concatenate the four numbers a+b+c+d together to calculate the selector’s specificity.
Page 29
Module I – Introduction to HTML & CSS
The following sample selectors are given along with their specificity value.
<tag style="color: red"> 1000
body .example 0011
body .example strong 0012
div#first 0101
div#first .error 0111
#footer .twitter a 0111
#footer .twitter a:hover 0121
body aside#left div#cart [Link] 0214
The Box Model
In CSS, all HTML elements exist within a rectangular element box shown in Figure.
The background color or image of an element fills an element within its border.
Some of the common background properties are –
Property Description
background A combined shorthand property that allows you to set multiple
background property.
background- Specifies whether the background image scrolls with the document
attachment (default) or remains fixed. values are: fixed, scroll
background-color Sets the background color of the element.
background-image Specifies the background image
background-position Specifies where background image will be placed. Possible values
include: bottom, center, left, and right. Pixel or percentage numeric
position value may also be specified.
background-repeat Determines whether the background image will be repeated – for a
tiled background.
Page 30
Module I – Introduction to HTML & CSS
Possible values are: repeat, repeat-x, repeat-y, and no-repeat
background-size To modify the size of the background image.
Borders
Borders are used to visually separate elements. Borders are put around all four sides of an
element, or just one, two, or three of the sides. Various border properties are –
Property Description
border A shorthand property that allows to set the style, width, and color
of a border in one property. The order is important and must be:
border-style border-width border-color
border-style Specifies the line type of the border. Possible values are: solid,
dotted, dashed, double, groove, ridge, inset, and outset.
border-width The width of the border in a unit( usually in px). A variety of
keywords (thin, medium, thick etc.) are also supported.
border-color The color of the border in a color unit.
border-radius The radius of a rounded corner.
border-image The URL of an image to use as a border
Eg: border-style: dotted;
Border-width: 15px;
Border-color:red;
Note: It is possible to set the properties for one or more sides of the element box in a single
property, or to set them individually (all sides separate settings) using separate properties.
Eg:
margin-top:30px;
margin-left:10px;
padding-top:10px;
border-top-width:5px;
border-buttom-width:20px;
border-top-style:dashed; etc.
For instance, we can set the side properties individually:
border-top-color: red; /* sets just the top side */
border-right-color: green; /* sets just the right side */
Page 31
Module I – Introduction to HTML & CSS
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */
Alternately, we can set all four sides to a single value via:
border-color: red; /* sets all four sides to red */
Or
border-color: red green orange blue; (mnemonic TRouBLe)
When using this multiple values shortcut, they are applied in clockwise order starting at the top.
Thus the order is: top right bottom left .
Another shortcut is to use just two values; in this case the first value sets top and bottom, while
the second sets the right and left.
border-color: red yellow; /* top+bottom=red, right+left=yellow */
Margins and Padding
Margins and padding are essential properties for adding space in between two elements, which
can help differentiate one element from another. Margins add spacing around an element’s
content, and padding adds spacing within elements. Borders divide the margin area from the
padding area.
The adjoining vertical margins collapse with each other, and the margin value of the highest
element is chosen between the two elements. Horizontal margins never collapse with each other.
If suppose, the margin of a <p> tag is set to 50px. Then the space between 2 paragraphs should
be (50px +50px) 100 px. But the vertical margins are collapsed and the space of 50px is
displayed.
Page 32
Module I – Introduction to HTML & CSS
Actual Display
50px
50px
50px
50px
50px
50px
50px
CSS Text Styling
CSS provides two types of properties that affect text – the font properties and the paragraph
properties.
Font Family
The first of these problems involves specifying the font family. A word processor on a
desktop machine can make use of any font that is installed on the computer; browsers are no
different. However, just because a given font is available on the web developer’s computer, it
does not mean that that same font will be available for all users who view the site. For this
reason, it is conventional to supply a so-called web
font stack, that is, a series of alternate fonts to use in case the original font choice is not on
the user’s computer.
One common approach is to make your font stack contain, in this order, the following: ideal,
alternative, common, and then generic. Take for instance, the following font stack:
font-family { "Hoefler Text", Cambria, "Times New Roman", serif; }
Font Sizes
Another potential problem with web fonts is font sizes. In a print-based program such as a word
processor, specifying a font size is unproblematic. Making some text 12 pt will mean that the
font’s bounding box (which in turn is roughly the size of its characters) will be 1/6 of an inch tall
when printed, while making it 72 pt will make it roughly one inch tall when printed.
Page 33
Module I – Introduction to HTML & CSS
Paragraph Properties
Page 34
Module I – Introduction to HTML & CSS
Page 35