S - 4 , U - 2 , CSS Notes A_C

Unit 2 :
CSS introduction, <link> and <style> elements, CSS properties, Controlling Fonts, Text
formatting, Text- pseudo classes, Selectors, Links, Backgrounds, lists

CSS
What is CSS?
HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process. To solve this problem, the World Wide Web
Consortium (W3C) created CSS.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language

intended to simplify the process of making web pages presentable. CSS handles the
look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, as well as a variety of other effects.

CSS removed the style formatting from the HTML page! The author or
designer of a web page has no way of knowing how it will be accessed. The page may
be viewed on a television screen, a computer screen or a mobile phone, any of which
may show images, text tables or a mixture of them all. HTML does not have the
facilities that are needed to cope with this diversity, but stylesheets provide them.

CSS saves a lot of work. It can control the layout of multiple web pages all at
once. External stylesheets are stored in CSS files. CSS is used to define styles for your
web pages, including the design, layout and variations in display for different devices
and screen sizes. The style definitions are normally saved in external .css files. With
an external stylesheet file, you can change the look of an entire website by changing
just one file!

CSS is easy to learn and understand but it provides a powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.

Page 1 of 35
S - 4 , U - 2 , CSS Notes A_C

Advantages of CSS

 CSS saves time - You can write CSS once and then reuse the same sheet in
multiple HTML pages. You can define a style for each HTML element and apply
it to as many web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So, less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all
the elements in all the web pages will be updated automatically.

 Superior styles to HTML - CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such as
PDAs and cell phones or for printing.
 Global web standards – Now HTML attributes are being deprecated and it is
being recommended to use CSS. So it’s a good idea to start using CSS in all the
HTML pages to make them compatible with future browsers.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the
CSS Working Group. The CSS Working Group creates documents called specifications. When
a specification has been discussed and officially ratified by the W3C members, it becomes a
recommendation.
These ratified specifications are called recommendations because the W3C has no
control over the actual implementation of the language. Independent companies and
organizations create that software.

NOTE: The World Wide Web Consortium or W3C is a group that makes recommendations
about how the Internet works and how it should evolve.

CSS Versions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in
December 1996. This version describes the CSS language as well as a simple visual
formatting model for all the HTML tags.

Page 2 of 35
S - 4 , U - 2 , CSS Notes A_C

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version
adds support for media-specific style sheets e.g. printers and aural devices, downloadable
fonts, element positioning and tables.

CSS Syntax

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.

A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document. A style rule is made of three parts:

 Selector: A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.

 Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border, etc.

 Value: Values are assigned to properties. For example, color property can have
the value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows:

selector { property : value }

Example: You can define a table border as follows:
table { border : 1px solid #C00; }

Here, table is a selector and border is a property and the given value 1px solid #C00 is
the value of that property.

Page 3 of 35
S - 4 , U - 2 , CSS Notes A_C

Adding CSS to HTML document

There are four ways to associate styles with your HTML document. CSS can be added
to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files & Most
commonly used methods are inline CSS and External CSS.

1. Inline CSS - The style Attribute

An inline CSS is used to apply a unique style to a single HTML element. You can use
style attribute of any HTML element to define style rules. These rules will be applied to
that element only.

Here is the generic syntax:

<element style="...style rules....">

Attribute Value Description

style style rules The value of style attribute is a

combination of style
declarations separated by
semicolon (;).

Example : Following is the example of inline CSS based on the above syntax:

<h1 style ="color:#36C;"> This is inline CSS </h1>

It will produce the following result:

This is inline CSS

2. Internal CSS - The <style> Element

An internal CSS is used to define a style for a single HTML page. You can put your CSS
rules into an HTML document using the <style> element. This tag is placed inside the
<head>...</head> tags. Rules defined using this syntax will be applied to all the elements
available in the document.

Here is the generic syntax:

<head>

Page 4 of 35
S - 4 , U - 2 , CSS Notes A_C

<style type="text/css" media="...">

Style Rules ............
</style>
</head>

Attributes

Attributes associated with <style> elements are:

Attribute Value Description

Type text/css Specifies the style sheet language as a content-

type (MIME type). This is a required attribute.

Media screen Specifies the device, the document will be

tty
displayed on. Default value is all. This is an
tv
projection optional attribute.
handheld
print
braille
aural
all

Example : Following is an example of embed CSS based on the above syntax:

<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>

3. External CSS - The <link> Element

An external style sheet is used to define the style for many HTML pages. With an
external style sheet, you can change the look of an entire web site, by changing one file!

The <link> element can be used to include an external stylesheet file in your HTML
document. An external style sheet is a separate text file with .css extension. You define all
the Style rules within this text file and then you can include this file in any HTML document
using <link> element.

Here is the generic syntax of including external CSS file:

<head>
<link rel="stylesheet" type="text/css" href="..." media="..." />

Page 5 of 35
S - 4 , U - 2 , CSS Notes A_C

</head>

Attribute Value Description

type text/css Specifies the style sheet language as a content-

type (MIME type). This is a required attribute.

href URL Specifies the style sheet file having Style rules.
This attribute is a required.

media screen Specifies the device, the document will be

tty displayed on. Default value is all. This is an
tv optional attribute.
projection
handheld
print
braille
aural
all

CSS Rules Overriding

We have discussed four ways to include style sheet rules in an HTML document.
Here is the rule to override any Style Sheet Rule.
 Any inline style sheet takes the highest priority. So, it will override any rule defined
in <style>...</style> tags or the rules defined in any external style sheet file.

 Any rule defined in <style>...</style> tags will override the rules defined in any
external style sheet file.

 Any rule defined in the external style sheet file takes the lowest priority, and the
rules defined in this file will be applied only when the above two rules are not
applicable.

CSS Comments
CSS comments are generally written to explain our code. Comments are ignored by
the browsers. Many times, you may need to put additional comments in your style sheet
blocks. So, it is very easy to comment any part in the style sheet. You can simply put your
comments inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.

Example

Page 6 of 35
S - 4 , U - 2 , CSS Notes A_C

/* This is an external style sheet file */

h1, h2, h3 {
color: #36C;
/* font-weight: normal;
Letter-spacing: .4em; */
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */

CSS ─ MEASUREMENT UNITS

Before we start the actual exercise, we would like to give a brief idea about the CSS
Measurement Units. CSS supports a number of measurements including absolute units such
as inches, centimeters, points, and so on, as well as relative measures such as percentages
and em units. You need these values while specifying various measurements in your Style
rules e.g. border="1px solid red".
We have listed out all the CSS Measurement Units along with proper Examples:

Unit Description Example

% Defines a measurement as a percentage relative to p {font-size: 16pt; line-height:

another value, typically an enclosing element. 125%;}

cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}

em A relative measurement for the height of a font in em p {letter-spacing: 7em;}

spaces. Because an em unit is equivalent to the size
of a given font, if you assign a font to 12pt, each "em"
unit would be 12pt; thus, 2em would be 24pt.

ex This value defines a measurement relative to a font's p {font-size: 24pt; line-height:

x-height. The x-height is determined by the height of 3ex;}
the font's lowercase letter x.

in Defines a measurement in inches. p {word-spacing: .15in;}

mm Defines a measurement in millimeters. p {word-spacing: 15mm;}

pc Defines a measurement in picas. A pica is equivalent p {font-size: 20pc;}

to 12 points; thus, there are 6 picas per inch.

pt Defines a measurement in points. A point is defined body {font-size: 18pt;}

as 1/72nd of an inch.

px Defines a measurement in screen pixels. p {padding: 25px;}

Page 7 of 35
S - 4 , U - 2 , CSS Notes A_C

Pseudo-classes
Pseudo-classes are keywords which allow selection based on information that lies
outside of the document tree or that cannot be expressed by other selectors or
combinators. This information can be associated to a certain state (state and dynamic
pseudo-classes), to locations (structural and target pseudo-classes), to negations of the
former (negation pseudo-class) or to languages (lang pseudo-class). Examples include
whether or not a link has been followed (:visited), the mouse is over an element (:hover), a
checkbox is checked (:checked), etc.

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

CSS pseudo-classes are used to add special effects to some selectors. You do not
need to use JavaScript or any other script to use those effects. A simple syntax of pseudo-
classes is as follows :

Syntax :
selector:pseudo-class {
property:value;
}

The most commonly used pseudo-classes are as follows :

Sr.No. Value & Description

1 :link

Use this class to add special style to an unvisited link.

2 :visited

Use this class to add special style to a visited link.

3 :hover

Use this class to add special style to an element when you mouse over it.

4 :active

Page 8 of 35
S - 4 , U - 2 , CSS Notes A_C

Use this class to add special style to an active element.

5 :focus

Use this class to add special style to an element while the element has focus.

6 :first-child

Use this class to add special style to an element that is the first child of some
other element.

7 :lang

Use this class to specify a language to use in a specified element.

While defining pseudo-classes in a <style>...</style> block, following points should be

noted −
 a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective.
 a:active MUST come after a:hover in the CSS definition in order to be effective.
 Pseudo-class names are not case-sensitive.
 Pseudo-class are different from CSS classes but they can be combined.

LoVe before HAte

By default, most browsers apply a special color value to visited links. Thus, the links in
this example will probably have special font colors only before you visit them. (After that,
you'll need to clear your browser history to see them again.) However, the background-
color values are likely to remain, as most browsers do not set that property on visited links by
default.
The :active CSS pseudo-class represents an element (such as a button) that is being
activated by the user. When using a mouse, "activation" typically starts when the user
presses down the primary mouse button.
The :active pseudo-class is commonly used on <a> and <button> elements. Other
common targets of this pseudo-class include elements that contain an activated element,
and form elements that are being activated through their associated <label>.
Styles defined by the :active pseudo-class will be overridden by any subsequent link-related
pseudo-class (:link, :hover, or :visited) that has at least equal specificity. To style links
appropriately, put the :active rule after all other link-related rules, as defined by the LVHA-
order: :link — :visited — :hover — :active.

Page 9 of 35
S - 4 , U - 2 , CSS Notes A_C

Note: On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must
only apply to the primary button; on right-handed mice, this is typically the leftmost button.
The :focus CSS pseudo-class represents an element (such as a form input) that has
received focus. It is generally triggered when the user clicks or taps on an element or selects
it with the keyboard's "tab" key.
Note: This pseudo-class applies only to the focused element itself. Use :focus-within if you
want to select an element that contains a focused element.

HTML FILE
<input class="red-input"value="I'll be red when focused."><br>
<input class="blue-input"value="I'll be blue when focused.">

CSS FILE
.red-input:focus{
background: yellow;
color: red;
}

.blue-input:focus{
background: yellow;
color: blue;
}

List of pseudo-classes:
Name Description
:active Applies to any element being activated (i.e. clicked) by the user.
:any Allows you to build sets of related selectors by creating groups that the
included items will match. This is an alternative to repeating an entire
selector.
:target Selects the current active #news element (clicked on a URL containing that
anchor name)
:checked Applies to radio, checkbox, or option elements that are checked or toggled
into an "on" state.
:default Represents any user interface element that is the default among a group of
similar elements.
:disabled Applies to any UI element which is in a disabled state.
:empty Applies to any element which has no children.
:enabled Applies to any UI element which is in an enabled state.
:first Used in conjunction with the @page rule, this selects the first page in a
printed document.
:first-child Represents any element that is the first child element of its parent.
:first-of-type Applies when an element is the first of the selected element type inside its
parent. This may or may not be the first-child.
:focus Applies to any element which has the user's focus. This can be given by the
user's keyboard, mouse events, or other forms of input.

Page 10 of 35
S - 4 , U - 2 , CSS Notes A_C

:focus-within Can be used to highlight a whole section when one element inside it is
focused. It matches any element that the :focus pseudo-class matches or that
has a descendant focused.
:full-screen Applies to any element displayed in full-screen mode. It selects the whole
stack of elements and not just the top level element.
:hover Applies to any element being hovered by the user's pointing device, but not
activated.
:indeterminate Applies radio or checkbox UI elements which are neither checked nor
unchecked, but are in an indeterminate state. This can be due to an
element's attribute or DOM manipulation.
:in-range The :in-range CSS pseudo-class matches when an element has its value
attribute inside the specified range limitations for this element. It allows the
page to give a feedback that the value currently defined using the element is
inside the range limits.
:invalid Applies to <input> elements whose values are invalid according to the type
specified in the type= attribute.
:lang Applies to any element who's wrapping <body> element has a properly
designated lang= attribute. For the pseudo-class to be valid, it must contain a
valid two or three letter language code.
:last-child Represents any element that is the last child element of its parent.
:last-of-type Applies when an element is the last of the selected element type inside its
parent. This may or may not be the last-child.
:left Used in conjunction with the @page rule, this selects all the left pages in a
printed document.
:link Applies to any links which haven't been visited by the user.
:not() Applies to all elements which do not match the value passed to (:not(p) or
:not(.class-name) for example. It must have a value to be valid and it can only
contain one selector. However, you can chain multiple :not selectors
together.
:nth-child Applies when an element is the n-th element of its parent, where n can be an
integer, a mathematical expression (e.g n+3) or the keywords odd or even.
:nth-of-type Applies when an element is the n-th element of its parent of the same
element type, where n can be an integer, a mathematical expression (e.g
n+3) or the keywords odd or even.
:only-child The :only-child CSS pseudo-class represents any element which is the only
child of its parent. This is the same as :first-child:last-child or :nth-
child(1):nth-last-child(1), but with a lower specificity.
:optional The :optional CSS pseudo-class represents any element that does not have
the required attribute set on it. This allows forms to easily indicate optional
fields and to style them accordingly.
:out-of-range The :out-of-range CSS pseudo-class matches when an element has its value
attribute outside the specified range limitations for this element. It allows the
page to give a feedback that the value currently defined using the element is
outside the range limits. A value can be outside of a range if it is either
smaller or larger than maximum and minimum set values.
:placeholder-shown Experimental. Applies to any form element currently displaying
placeholder text.

Page 11 of 35
S - 4 , U - 2 , CSS Notes A_C

:read-only Applies to any element which is not editable by the user.

:read-write Applies to any element that is editable by a user, such as <input> elements.
:right Used in conjunction with the @page rule, this selects all the right pages in a
printed document.
:root matches the root element of a tree representing the document.
:scope CSS pseudo-class matches the elements that are a reference point for
selectors to match against.
:target Selects the current active #news element (clicked on a URL containing that
anchor name)
:visited Applies to any links which have has been visited by the user. The :visited
pseudoclass can't be used for most styling in a lot of modern browsers
anymore because it's a security hole.

CSS Selectors
CSS selectors are used to select the contents you want to style. Selectors are the
part of CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc. You can define selectors in various simple ways based on your comfort. Let me
put these selectors one by one.

1. The Type Selectors [Element Selectors]

This is the same selector we have seen above. Again, one more example to give a
color to all level 1 headings:
h1 {
color: #36CFFF;
}

2. The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type:

* {
color: #000000;
}

This rule renders the content of every element in our document in black.

3. The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies
inside a particular element. As given in the following example, the style rule will apply to
<em> element only when it lies inside the <ul> tag.

Page 12 of 35
S - 4 , U - 2 , CSS Notes A_C

ul em {
color: #000000;
}

4. The Class Selectors

You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.
.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute set to
black in our document. You can make it a bit more particular. For example:
h1.black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with class attribute set
to black.
You can apply more than one class selectors to a given element. Consider the
following example:

<p class="center bold">

This para will be styled by the classes center and bold.
</p>

5. The ID Selectors

You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.
#black {
color: #000000;
}

This rule renders the content in black for every element with id attribute set to black
in our document. You can make it a bit more particular. For example:
h1 #black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with id attribute set to
black.
The true power of id selectors is when they are used as the foundation for descendant
selectors. For example:
#black h2 {
color: #000000;
}

Page 13 of 35
S - 4 , U - 2 , CSS Notes A_C

In this example, all level 2 headings will be displayed in black color when those
headings will lie within tags having id attribute set to black.

6. The Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is
very similar to descendants but have different functionality. Consider the following
example:
body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are a direct child of the
<body> element. Other paragraphs put inside other elements like <div> or <td> would not
have any effect of this rule.

7. The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule
below will match all the input elements having a type attribute with a value of text:

input[type="text"]{
color: #000000;
}

The advantage to this method is that the <input type="submit" /> element is
unaffected, and the color applied only to the desired text fields.
There are following rules applied to attribute selector.

 p[lang] - Selects all paragraph elements with a lang attribute.

 p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of
exactly "fr".

 p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the
word "fr".

 p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values
that are exactly "en", or begin with "en-".

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define
these rules to combine multiple properties and corresponding values into a single block as
defined in the following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: 0.4em;
margin-bottom: 1em;

Page 14 of 35
S - 4 , U - 2 , CSS Notes A_C

text-transform: lowercase;
}

Here all the property and value pairs are separated by a semicolon (;). You can keep
them in a single line or multiple lines. For better readability, we keep them in separate lines.

For a while, don't bother about the properties mentioned in the above block. These
properties will be explained in the coming chapters and you can find the complete detail
about properties in CSS References.

8. Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a
comma, as given in the following example:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: 0.4em;
margin-bottom: 1em;
text-transform: lowercase;
}

This define style rule will be applicable to h1, h2 and h3 element as well. The order
of the list is irrelevant. All the elements in the selector will have the corresponding
declarations applied to them.

CSS Basic Properties

Here are some basic CSS properties to work with.

 Text Properties
 List Properties
 Border Properties
 Font Properties

I. Text Properties
The color property is used to set the color of the text. The color is specified by:

 a color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Page 15 of 35
S - 4 , U - 2 , CSS Notes A_C

The default text color for a page is defined in the body selector.

Property Description Values

color Sets the color of a text RGB, hex, keyword

line-height Sets the distance between lines normal, number, length, %

letter- Increase or decrease the space

normal, length
spacing between characters

text-align Aligns the text in an element left, right, center, justify

text- none, underline, overline,

Adds decoration to text
decoration line-through

Indents the first line of text in an

text-indent length, %
element

text- none, capitalize, uppercase,

Controls the letters in an element
transform lowercase

<html lang="en">
<head>
<title>Example of CSS text transformation</title>
<style type="text/css">
p.up {
text-transform: uppercase;
}
p.cap {
text-transform: capitalize;
}
p.low {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>Text-transform Effect</h1>
<p class="up">All characters of each word of this paragraph is
transformed in uppercase.</p>
<p class="cap">The first character of each word of this paragraph is
transformed in uppercase.</p>

Page 16 of 35
S - 4 , U - 2 , CSS Notes A_C

<p class="low">All characters of each word of this paragraph is

transformed in lowercase.</p>
<p>This is a normal paragraph.</p>
</body>
</html>

ALL CSS Text Properties

Property Description

color Sets the color of text

direction Specifies the text direction/writing direction

letter-spacing Increases or decreases the space between characters in

a text

line-height Sets the line height

text-align Specifies the horizontal alignment of text

text- Specifies the decoration added to text

decoration

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text

Page 17 of 35
S - 4 , U - 2 , CSS Notes A_C

text-transform Controls the capitalization of text

text-overflow Specifies how overflowed content that is not displayed

should be signaled to the user

unicode-bidi Used together with the direction property to set or return

whether the text should be overridden to support
multiple languages in the same document

vertical-align Sets the vertical alignment of an element

white-space Specifies how white-space inside an element is handled

word-spacing Increases or decreases the space between words in a

text

II. CSS Font Families

In CSS, there are two types of font family names:

 generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")

Generic Font family Description

family

Page 18 of 35
S - 4 , U - 2 , CSS Notes A_C

Serif Times New Roman Serif fonts have small lines at the ends on
Georgia some characters

Sans-serif Arial "Sans" means without - these fonts do not

Verdana have the lines at the ends of characters

Monospace Courier New All monospace characters have the same

Lucida Console width

Note: On computer screens, sans-serif fonts are considered easier to read than serif
fonts.

II.1. Font Family

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar
font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks,
like: "Times New Roman".

More than one font family is specified in a comma-separated list:

Example
p {
font-family: "Times New Roman", Times, serif;
}

For commonly used font combinations, look at our Web Safe Font Combinations.

II.2. Font Style

The font-style property is mostly used to specify italic text.

Page 19 of 35
S - 4 , U - 2 , CSS Notes A_C

This property has three values:

 normal - The text is shown normally

 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

II.3. Font Size

The font-size property sets the size of the text. Being able to manage the text size
is important in web design. However, you should not use font size adjustments to make
paragraphs look like headings, or headings look like paragraphs. Always use the proper
HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. The font-size value can be
an absolute or relative size.

Absolute size:

 Sets the text to a specified size

 Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
 Absolute size is useful when the physical size of the output is known

Relative size:

 Sets the size relative to surrounding elements

 Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs,
is 16px (16px=1em).

II.3.1. Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Page 20 of 35
S - 4 , U - 2 , CSS Notes A_C

Example
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

II.3.2. Set Font Size with Em

To allow users to resize the text (in the browser menu), many developers use em
instead of pixels. The em size unit is recommended by the W3C. 1em is equal to the current
font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The
size can be calculated from pixels to em using this formula: pixels/16=em

Example
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

In the example above, the text size in em is the same as the previous example in
pixels. However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with older versions of IE. The text becomes larger
than it should when made larger, and smaller than it should when made smaller.

II.3.3. Use a Combination of Percent and Em

The solution that works in all browsers is to set a default font-size in percent for the
<body> element:

Example
body {
font-size: 100%;
}

Page 21 of 35
S - 4 , U - 2 , CSS Notes A_C

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

Our code now works great! It shows the same text size in all browsers, and allows all
browsers to zoom or resize the text!

II.3.4. Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width". That way
the text size will follow the size of the browser window. Resize the browser window to see
how the font size scales.

Example
<h1 style="font-size:10vw">Hello World</h1>

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.

II.4. Font Weight

The font-weight property specifies the weight of a font:

Example
p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

II.5. Font Variant

The font-variant property specifies whether or not a text should be displayed in

a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase
letters. However, the converted uppercase letters appears in a smaller font size than the
original uppercase letters in the text.

Page 22 of 35
S - 4 , U - 2 , CSS Notes A_C

Example
p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

III. HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colours to lists and list items

Unordered Lists:
o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola

Page 23 of 35
S - 4 , U - 2 , CSS Notes A_C

Property Description Values

Sets all the properties for a list-style-type, list-style-position,

list-style
list in one declaration list-style-image,inherit

list-style- Specifies an image as the

URL, none, inherit
image list-item marker

list-style- Specifies where to place the

inside, outside, inherit
position list-item marker

none, disc, circle, square, decimal,

decimal-leading-zero,
list-style- Specifies the type of list- armenian, georgian, lower-alpha,
type item marker upper-alpha, lower-greek,
lower-latin, upper-latin, lower-
roman, upper-roman, inherit

Different List Item Markers

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

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

ol.d {
list-style-type: lower-alpha;
}

Note: Some of the values are for unordered lists, and some for ordered lists.

Page 24 of 35
S - 4 , U - 2 , CSS Notes A_C

An Image as the List Item Marker

The list-style-image property specifies an image as the list item marker:

Example
ul {
list-style-image: url('sqpurple.gif');
}

Position the List Item Markers

The list-style-position property specifies the position of the list-item markers
(bullet points).

"list-style-position: outside;" means that the bullet points will be

outside the list item. The start of each line of a list item will be aligned vertically. This is
default:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

"list-style-position: inside;" means that the bullet points will be

inside the list item. As it is part of the list item, it will be part of the text and
push the text at the start:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

Example
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

Remove Default Settings

The list-style-type: none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding. To remove this,
add margin: 0 and padding: 0 to <ul> or <ol>:

Example
ul {
list-style-type: none;

Page 25 of 35
S - 4 , U - 2 , CSS Notes A_C

margin: 0;
padding: 0;
}

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list
properties in one declaration:

Example
ul {
list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values is:

 list-style-type (if a list-style-image is specified, the value of this property will

be displayed if the image for some reason cannot be displayed)
 list-style-position (specifies whether the list-item markers should appear
inside or outside the content flow)
 list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property
will be inserted, if any.

Styling List with Colors

We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the
<li> tag will affect the individual list items:

Example
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}

Page 26 of 35
S - 4 , U - 2 , CSS Notes A_C

Result:

1. Coffee
2. Tea
3. Coca Cola

 Coffee
 Tea
 Coca Cola

IV. Border Properties

The border property is a shorthand property for:

 border-width
 border-style (required)
 border-color

If border-color is omitted, the color applied will be the color of the text.

CSS Syntax
border: border-width border-style border-color|initial|inherit;

Value Description

border- Specifies the width of the border. Default value is "medium"

width

border- Specifies the style of the border. Default value is "none"

style

border- Specifies the color of the border. Default value is the color of
color the text

Page 27 of 35
S - 4 , U - 2 , CSS Notes A_C

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about
inherit

<HTML>
<HEAD>
<STYLE>
h1 {
border: 5px solid red;
}
h2 {
border: 4px dotted blue;
}
div {
border: double;
}
</STYLE>
</HEAD>
<BODY>
<H1>A heading with a solid red border.</H1>

<H2>A heading with a dotted blue border.</H2>

<DIV>A div element with a double border.</DIV>

</BODY>
</HTML>

Property Description Values

Sets all the border
border properties in one border-width, border-style, border-color
declaration

Sets all the bottom

border-bottom-width, border-bottom-
border-bottom border properties in
style, border-bottom-color
one declaration

border- Sets the color of the

bottom-color
border-color
bottom border

border- Sets the style of the

bottom-style
border-style
bottom border

Page 28 of 35
S - 4 , U - 2 , CSS Notes A_C

border- Sets the width of the

bottom-width
border-width
bottom border

Sets the color of the color_name, hex_number,

border-color
four borders rgb_number, transparent, inherit

Sets all the left border

border-left-width, border-left-style,
border-left properties in one
border-left-color
declaration

border-left- Sets the color of the left

color
border-color
border

border-left- Sets the style of the left

style
border-style
border

border-left- Sets the width of the

width
border-width
left border

Sets all the right border

border-right-width, border-right-style,
border-right properties in one
border-right-color
declaration

border-right- Sets the color of the

color
border-color
right border

border-right- Sets the style of the

style
border-style
right border

border-right- Sets the width of the

width
border-width
right border

none, hidden, dotted, dashed, solid,

Sets the style of the
border-style double, groove, ridge, inset, outset,
four borders
inherit

Sets all the top border

border-top-width, border-top-style,
border-top properties in one
border-top-color
declaration

border-top- Sets the color of the top border-color

Page 29 of 35
S - 4 , U - 2 , CSS Notes A_C

color border

border-top- Sets the style of the top

style
border-style
border

border-top- Sets the width of the

width
border-width
top border

Sets the width of the

border-width thin, medium, thick, length, inherit
four borders

V. CSS Links
With CSS, links can be styled in different ways.

Text Link Text Link Link Button Link Button

V.1. Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).

a {
color: hotpink;
}

In addition, links can be styled differently depending on what state they are in. The
four links states are:

 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

Example
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}

Page 30 of 35
S - 4 , U - 2 , CSS Notes A_C

/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

When setting the style for several link states, there are some order rules:

 a:hover MUST come after a:link and a:visited

 a:active MUST come after a:hover

V.2. Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}

V.3. Background Color

The background-color property can be used to specify a background color for

links:

Example
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}

Page 31 of 35
S - 4 , U - 2 , CSS Notes A_C

V.4. Advanced - Link Buttons

This example demonstrates a more advanced example where we combine several

CSS properties to display links as boxes/buttons:

Example
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

VI. CSS - Backgrounds

The CSS background properties are used to define the background effects for
elements.

CSS background properties:

 background-color
 background-image
 background-repeat
 background-position
 background-attachment

VI.1. background-color

The background-color property specifies the background color of an element.

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

 a valid color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

In the example below, the <h1>, <p>, and <div> elements have different background colors:

Page 32 of 35
S - 4 , U - 2 , CSS Notes A_C

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

VI.2. background-image

The background-image property specifies an image to use as the background of

an element. By default, the image is repeated so it covers the entire element. The
background image for a page can be set like this:

body {
background-image: url("paper.gif");
}

Note: When using a background image, use an image that does not disturb the text.

By default, the background-image property repeats an image both horizontally

and vertically. Some images should be repeated only horizontally or vertically, or they will
look strange, like this:

body {
background-image: url("gradient_bg.png");
}

VI.3. background-repeat

Showing the background image only once is also specified by the background-
repeat property:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

If the image above is repeated only horizontally (background-repeat:

repeat-x;), the background will look better:

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Tip: To repeat an image vertically, set background-repeat: repeat-y;

Page 33 of 35
S - 4 , U - 2 , CSS Notes A_C

VI.4. background-position

In the example above, the background image is shown in the same place as the text. We
want to change the position of the image, so that it does not disturb the text too much. The position
of the image is specified by the background-position property:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

VI.5. background-attachment

To specify that the background image should be fixed (will not scroll with the rest of
the page), use the background-attachment property:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

VI.6. Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one
single property. This is called a shorthand property. The shorthand property for background
is background:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

It does not matter if one of the property values is missing, as long as the other ones are in
this order.

All CSS Background Properties

Property Description

Page 34 of 35
S - 4 , U - 2 , CSS Notes A_C

background Sets all the background properties in one declaration

Sets whether a background image is fixed or scrolls with the

background-attachment rest of the page

Specifies the painting area of the background

background-clip

background-color Sets the background color of an element

background-image Sets the background image for an element

background-origin Specifies where the background image(s) is/are positioned

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

background-size Specifies the size of the background image(s)

___________________________________________________________________________

T H E E N D
___________________________________________________________________________

Page 35 of 35