WEB DESIGN

CSS – Styling Texts, Links, Lists and Tables

 Styling Texts in CSS
• CSS provides several properties that allows you to
define various text styles such as color, alignment,
spacing, decoration, transformation, etc. very easily
and effectively.
• The commonly used text properties are: text-align,
text-decoration, text-transform, text-indent, line-
height, letter-spacing, word-spacing, and more.
• These properties give you precise control over the visual
appearance of the characters, words, spaces, and so
on.
 Text Color
• The color of the text is defined by the CSS color
property.
• The style rule in the following example will define
the default text color for the page
body {
color: #434343;
}
 Text Alignment
• The text-align property is used to set the horizontal alignment of the
text.
• Text can be aligned in four ways: to the left, right, centre or justified
(straight left and right margins).
• Let's take a look at an example to understand how this property
basically works.
h1 {
text-align: center;
}
p {
text-align: justify;
}
Text Alignment
 Text Decoration
• The text-decoration property is used to set or
remove decorations from text.
• This property typically accepts one of the following
values: underline, overline, line-through, and none.
• You should avoid underline text that is not a link,
as it might confuse the visitor.
• See the following example to understand how it
basically works:
 Text Decoration
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}
 Removing the Default Underline from Links
• The text-decoration property is extensively used to
remove the default underline from the HTML
hyperlinks.
• Let's take a look at the following example to
understand how it basically works:
a {
text-decoration: none;
}
 Removing the Default Underline from Links
• Note: When you create an HTML link, browsers
built in style sheet automatically underline it and
applies a blue color, so that the readers can clearly
see which text is clickable.
 Text Transformation
• The text-transform property is used to set the cases
for a text.
• Text are often written in mixed case.
• However, in certain situations you may want to
display your text in entirely different case.
• Using text transform property you can change an
element's text content into uppercase or lowercase
letters, or capitalize the first letter of each word
without modifying the original text.
Text Transformation
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}
 Text Indentation
• The text-indent property is used to set the indentation of the
first line of text within a block of text.
• It is typically done by inserting the empty space before the first
line of text.
• The size of the indentation can be specified using percentage (%),
length values in pixels, ems, etc.
• The following style rule will indent the first line of the paragraphs
by 100 pixels.
p {
text-indent: 100px;
}
 Letter spacing
• The letter-spacing property is used to set extra spacing between the
characters of text.
• This property can take a length value in pixels, ems, etc.
• It may also accept negative values.
• When setting letter spacing, a length value indicates spacing in addition
to the default inter-character space.
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}
 Word Spacing
• The word-spacing property is used to specify
additional spacing between the words.
• This property can accept a length value in pixels,
ems, etc.
• Negative values are also allowed.
Word Spacing
p.normal {
word-spacing: 20px;
}
p.justified {
word-spacing: 20px;
text-align: justify;
}
 Word Spacing
• Note: Word spacing can be affected by text
justification.
• Also, even though whitespace is preserved, spaces
between words are affected by the word-spacing
property.
 Line Height
• The line-height property is used to set the height of
the text line.
• It is also called leading and commonly used to set the
distance between lines of text.
• The value of this property can be a number, a
percentage (%), or a length in pixels, ems, etc.
p {
line-height: 1.2;
}
 Line Height
• Note: When the value is a number, the line height is
calculated by multiplying the element's font size by
the number.
• While, percentage values are relative to the element's
font size.
• Note: Negative values for the line-height property
are not allowed.
• This property is also a component of the CSS font
shorthand property.
 Line Height
• If the value of the line-height property is greater
than the value of the font-size for an element, this
difference (called the "leading") is cut in half (called
the "half-leading") and distributed evenly on the top
and bottom of the in-line box.
p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}
Styling Links
 Styling links
• Hyperlinks are an essential part of a website as it
allows visitors to navigate through the site.
• Styling the links properly is an important aspect of
building a user-friendly website.
• A link has four different states — link, visited,
active and hover.
 Styling links
• These four states of a link can be styled differently using the
following anchor pseudo-class selectors.
a:link — define styles for normal or unvisited links.
a:visited — define styles for links that the user has already visited.
a:hover — define styles for a link when the user places the mouse
pointer over it.
a:active — define styles for links when they are being clicked.
• You can specify any CSS property e.g. color, font, etc. to
each of these selectors to customize the style of links, just
like you do with the normal text.
 Styling links
• The order in which you are setting the style for
different states of links is important, because what
defines last takes precedence over the style rules
defined earlier.
• Note: In general, the order of the pseudo classes
should be the following — :link, :visited, :hover,
:active, :focus in order for these to work properly.
 Modifying Standard Link Styles
• In all major web browsers such as Chrome, Firefox,
Safari, etc. links on the web pages have underlines
and uses the browser's default link colors, if you do
not set the styles exclusively for them.
• By default, text links will appear as follow in most
of the browsers:
An unvisited link as underlined blue text.
A visited link as underlined purple text.
An active link as underlined red text.
 Modifying Standard Link Styles
• However, there is no change in the appearance of
link in case of the hover state.
• It remains blue, purple or red depending on which
state (i.e. unvisited, visited or active) they are in.
• Now let's see how to customize the links by
overriding its default styling.
 Setting Custom Color of Links
• Simply use the CSS color property to define the color of
your choice for different state of a link.
• But when choosing colors make sure that user can clearly
differentiate between normal text and links.
• a:link {
color: #1ebba3;
}
a:visited {
color: #ff00f4;
}
 Setting Custom Color of Links
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}
 Removing the Default Underline from Links
• If you don't like the default underline on links, you
can simply use the CSS text-decoration property to
get rid of it.
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
 Removing the Default Underline from Links
• You can also make your ordinary text links look
like button using CSS.
• To do this we need to utilize few more CSS
properties such as background-color, border,
display, padding, etc.
• You will learn about these properties in detail in
upcoming lectures.
 Making Text Links Look Like Buttons
a:link, a:visited { a:hover, a:active {
color: white;
background-color:
background-color: #1ebba3; #9c6ae1;
display: inline-block;
border-color: #7443b6;
padding: 10px 20px;
border: 2px solid #099983; }
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
Styling Lists
 Types of HTML Lists
• There are three different types of list in HTML:
• Unordered lists — A list of items, where every list
items are marked with bullets.
• Ordered lists — A list of items, where each list
items are marked with numbers.
• Definition list — A list of items, with a description
of each item.
 Styling Lists with CSS
• CSS provides the several properties for styling and
formatting the most commonly used unordered and
ordered lists.
• These CSS list properties typically allow you to:
Control the shape or appearance of the marker.
Specify an image for the marker rather than a bullet point or
number.
Set the distance between a marker and the text in the list.
Specify whether the marker would appear inside or outside of
the box containing the list items.
 Changing the Marker Type of Lists
• By default, items in an ordered list are numbered with Arabic
numerals (1, 2, 3, …), unordered list, items are marked with
round bullets (•).
• But, you can change this default list marker to either roman
numerals, latin letters, circle, square, e.t.c using the list-style-
type property.
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
 Changing the Position of List Markers
• By default, markers of each list items are positioned outside of their
display boxes.
• However, you can also position these markers or bullet points inside of the
list item's display boxes using the list-style-position property along with
the value inside.
• In this case the lines will wrap under the marker instead of being indented.
ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}
 Using Images as List Markers
• You can also set an image as a list marker using the
list-style-image property.
• The style rule in the following example assigns a
transparent PNG image "arrow.png" as the list
marker for all the items in the unordered list. Let's
try it out and see how it works:
ul li {
list-style-image: url("images/bullet.png");
}
 Using Images as List Markers
• Sometimes, the list-style-image property may not produce the
expected output. You can use the following solution for better control.
• Set image bullets via the background-image CSS property.
• First, set the list to have no bullets, then, define a non-repeating
background image for the list element.
ul li {
background-image: url("images/bullet.png");
ul {
background-position: 0px 5px;
list-style-type: none; background-repeat: no-repeat;
} padding-left: 20px;
}
 Setting All List Properties At Once
• The list-style property is a shorthand property for defining all the
three properties list-style-type, list-style-image, and list-style-
position of a list in one place.
• The following style rule sets all the list properties in a single
declaration.
ul {
list-style: square inside url("images/bullet.png");
}
• Note: the order of the values are: list-style-type | list-style-position
| list-style-image; and it does not matter if one of the values above
is missing as long as the rest are in the specified order.
Styling Tables
The end