CSS Manual
CSS Manual
CSS Tutorial
CSS is the key presentational technology that is used in website design.
CSS stands for Cascading Style Sheets. CSS is a standard style sheet language
used for describing the presentation (i.e. the layout and formatting) of the web
pages.
Prior to CSS, nearly all of the presentational attributes of HTML documents were
contained within the HTML markup (specifically inside the HTML tags); all the
font colors, background styles, element alignments, borders and sizes had to be
explicitly described within the HTML.
CSS3 is the latest version of the CSS specification. CSS3 adds several new styling
features and improvements to enhance the web presentation capabilities.
Note: Our CSS tutorial will help you to learn the fundamentals of the latest CSS3
language, from the basic to advanced topics step-by-step. If you're a beginner,
start with the basic section and gradually move forward by learning a little bit
every day.
The list does not end here, there are many other interesting things that you can
do with CSS. You will learn about all of them in detail in upcoming chapters.
Advantages of Using CSS
The biggest advantage of CSS is that it allows the separation of style and layout
from the content of the document. Here are some more advantages, why one
should start using CSS?
CSS Save Lots of Time — CSS gives lots of flexibility to set the style properties of
an element. You can write CSS once; and then the same code can be applied to
the groups of HTML elements, and can also be reused in multiple HTML pages.
Easy Maintenance — CSS provides an easy means to update the formatting of
the documents, and to maintain the consistency across multiple documents.
Because the content of the entire set of web pages can be easily controlled using
one or more style sheets.
Pages Load Faster — CSS enables multiple pages to share the formatting
information, which reduces complexity and repetition in the structural contents of
the documents. It significantly reduces the file transfer size, which results in a
faster page loading.
Superior Styles to HTML — CSS has much wider presentation capabilities than
HTML and provide much better control over the layout of your web pages. So
you can give far better look to your web pages in comparison to the HTML
presentational elements and attributes.
Multiple Device Compatibility — CSS also allows web pages to be optimized
for more than one type of device or media. Using CSS the same HTML document
can be presented in different viewing styles for different rendering devices such
as desktop, cell phones, etc.
Tip: Now most of the HTML attributes are being deprecated and it's not
recommended to use. So it's a good idea to use as much CSS as possible to
increase the adaptability your website and make them compatible to future
browsers, as well.
What This Tutorial Covers
This CSS tutorial series covers all the fundamentals of CSS, including the idea of
selectors, methods of setting colors and backgrounds, way of formatting fonts
and text, styling UI elements such as hyperlinks, lists, tables, etc. as well as the
concept of CSS box model, and so on.
Once you're comfortable with the basics, you'll move on to next level that
explains the way of setting dimension and alignment of elements, methods for
positioning elements on a web page, using image sprites, as well as the concept
of relative and absolute units, visual formatting model, display and visibility,
layers, pseudo classes and elements, media dependent style sheets, and so on.
Finally, you'll explore some advanced features introduced in CSS3 like gradient
colors, drop shadow effect, 2D and 3D transforms, alpha transparency, as well as
the method of creating transition and animation effect, flex layouts, filter effect,
the concept of media queries, and more.
Tip: Every chapter in this tutorial contains lots of real-world examples that you
can try and test using an online editor. These examples will help you to better
understand the concept or topic. It also contains smart workarounds as well as
useful tips and important notes.
Chapter 2
If you're just starting out in the world of web development, start learning from
here »
Without further ado, let's get started with the Cascading Style Sheets (CSS).
Inline styles — Using the style attribute in the HTML start tag.
Embedded styles — Using the <style> element in the head section of a
document.
External style sheets — Using the <link> element, pointing to an external CSS
file.
In this tutorial we will cover all these three methods for inserting CSS one by one.
Note: The inline styles have the highest priority, and the external style sheets
have the lowest. It means if you specify styles for an element in
both embedded and external style sheets, the conflicting style rules in the
embedded style sheet would override the external style sheet.
Inline Styles
Inline styles are used to apply the unique style rules to an element by putting the
CSS rules directly into the start tag. It can be attached to an element using
the style attribute.
The style attribute includes a series of CSS property and value pairs.
Each "property: value" pair is separated by a semicolon (;), just as you would write
into an embedded or external style sheets. But it needs to be all in one line i.e. no
line break after the semicolon, as shown here:
Example
Try this code »
Using the inline styles are generally considered as a bad practice. As style rules
are embedded directly inside the HTML tag, it causes the presentation to become
mixed with the content of the document; which makes the code hard to maintain
and negates the purpose of using CSS.
Embedded style sheets are defined in the <head> section of an HTML document
using the <style> element. You can define any number of <style> elements in an
HTML document but they must appear between the <head> and </head> tags. Let's
take a look at an example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body{background-color: YellowGreen;}
p{color: #fff;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Tip: The type attribute of the <style> and <link> tag (i.e. type="text/css") defines
the language of the style sheet. This attribute is purely informative. You can omit
this since CSS is the standard and default style sheet language in HTML5.
An external style sheet holds all the style rules in a separate document that you
can link from any HTML file on your site. External style sheets are the most
flexible because with an external style sheet, you can change the look of an entire
website by changing just one file.
You can attach external style sheets in two ways — linking and importing.
Linking External Style Sheets
Before linking, we need to create a style sheet first. Let's open your favorite code
editor and create a new file. Now type the following CSS code inside this file and
save it as "style.css".
Example
Try this code »
body{
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1{
color: orange;
}
An external style sheet can be linked to an HTML document using the <link> tag.
The <link> tag goes inside the <head> section, as you can see in the following
example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet"href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Tip: Among all the three methods, using external style sheet is the best method
for defining and applying styles to the HTML documents. As you can clearly see
with external style sheets, the affected HTML file require minimal changes in the
markup.
Importing External Style Sheets
The @import rule is another way of loading an external style sheet.
The @import statement instructs the browser to load an external style sheet and
use its styles.
You can use it in two ways. The simplest is within the header of your document.
Note that, other CSS rules may still be included in the <style> element. Here's an
example:
Example
Try this code »
<style>
@import url("css/style.css");
p{
color: blue;
font-size: 16px;
}
</style>
Similarly, you can use the @import rule to import a style sheet within another style
sheet.
Example
Try this code »
@import url("css/layout.css");
@import url("css/color.css");
body{
color: blue;
font-size: 14px;
}
Note: All @import rules must occur at the start of the style sheet. Any style rule
defined in the style sheet itself override the conflicting rules in the imported style
sheets. However, importing a style sheet within another style sheet is not
recommended due to performance issue.
Chapter 3
CSS Syntax
In this tutorial you will learn how to define CSS rules in your stylesheet.
A CSS rule have two main parts, a selector and one or more declarations:
The selector specifies which element or elements in the HTML page the CSS rule
applies to.
Whereas, the declarations within the block determines how the elements are
formatted on a webpage. Each declaration consists of a property and a value
separated by a colon (:) and ending with a semicolon (;), and the declaration
groups are surrounded by curly braces {}.
The property is the style attribute you want to change; they could be font, color,
background, etc. Each property has a value, for example color property can have
value either blue or #0000FF etc.
h1 {color:blue; text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like
this:
Example
Try this code »
h1{
color: blue;
text-align: center;
}
In the example above h1 is a selector, color and text-align are the CSS properties,
and the given blue and center are the corresponding values of these properties.
Note: A CSS declaration always ends with a semicolon ";", and the declaration
groups are always surrounded by the curly brackets "{}".
A CSS comment begins with /*, and ends with */, as shown in the example below:
Example
Try this code »
You can also comment out part of your CSS code for debugging purpose, as
shown here:
Example
Try this code »
h1{
color: blue;
text-align: center;
}
/*
p {
font-size: 18px;
text-transform: uppercase;
}
*/
Therefore, to be on safer side, you should assume that all components of CSS
rules are case-sensitive.
You will learn about the various types of CSS selectors in the next chapter.
Chapter 4
CSS Selectors
In this tutorial you will learn how to use CSS selectors for applying style rules to
elements.
What is Selector?
A CSS selector is a pattern to match the elements on a web page. The style rules
associated with that selector will be applied to the elements that match the
selector pattern.
Selectors are one of the most important aspects of CSS as they allow you to
target specific elements on your web page in various ways so that they can be
styled.
Several types of selectors are available in CSS, let's take a closer look at them:
Universal Selector
The universal selector, denoted by an asterisk (*), matches every single element
on the page.
The universal selector may be omitted if other conditions exist on the element.
This selector is often used to remove the default margins and paddings from the
elements for quick testing purpose.
Let's try out the following example to understand how it basically works:
Example
Try this code »
*{
margin: 0;
padding: 0;
}
The style rules inside the * selector will be applied to every element in a
document.
Note: It is recommended not to use the universal selector (*) too often in a
production environment, since this selector matches every element on a web
page that puts too much of unnecessary pressure on the browsers. Use element
type or class selector instead.
Example
Try this code »
p{
color: blue;
}
The style rules inside the p selector will be applied on every <p> element (or
paragraph) in the document and color it blue, regardless of their position in the
document tree.
Id Selectors
The id selector is used to define style rules for a single or unique element.
The id selector is defined with a hash sign (#) immediately followed by the id
value.
Example
Try this code »
#error{
color: red;
}
This style rule renders the text of an element in red, whose id attribute is set
to error.
Class Selectors
The class selectors can be used to select any HTML element that has
a class attribute. All the elements having that class will be formatted according to
the defined rule.
The class selector is defined with a period sign (.) immediately followed by the
class value.
Example
Try this code »
.blue{
color: blue;
}
The above style rules renders the text in blue of every element in the document
that has class attribute set to blue. You can make it a bit more particular. For
example:
Example
Try this code »
p.blue{
color: blue;
}
The style rule inside the selector p.blue renders the text in blue of only
those <p> elements that has class attribute set to blue, and has no effect on other
paragraphs.
Descendant Selectors
You can use these selectors when you need to select an element that is the
descendant of another element, for example, if you want to target only those
anchors that are contained within an unordered list, rather than targeting all
anchor elements. Let's see how it works:
Example
Try this code »
ul.menu li a{
text-decoration: none;
}
h1 em{
color: green;
}
The style rules inside the selector ul.menu li a applied to only those <a> elements
that contained inside an <ul> element having the class .menu, and has no effect on
other links inside the document.
Similarly, the style rules inside the h1 em selector will be applied to only
those <em> elements that contained inside the <h1> element and has not effect on
other <em> elements.
Child Selectors
A child selector is used to select only those elements that are the direct children
of some element.
Example
Try this code »
ul > li{
list-style: square;
}
ul > li ol{
list-style: none;
}
The style rule inside the selector ul > li applied to only those <li> elements that
are direct children of the <ul> elements, and has no effect on other list elements.
The selector h1 + p in the following example will select the <p> elements only if
both the <h1> and <p> elements share the same parent in the document tree
and <h1> is immediately precedes the <p> element. That means only those
paragraphs that come immediately after each <h1> heading will have the
associated style rules. Let's see how this selector actually works:
Example
Try this code »
h1 + p{
color: blue;
font-size: 18px;
}
ul.task + p{
color: #f0f;
text-indent: 30px;
}
The selector h1 ∼ p in the example below will select all the <p> elements that
preceded by the <h1> element, where all the elements share the same parent in
the document tree.
Example
Try this code »
h1 ∼ p{
color: blue;
font-size: 18px;
}
ul.task ∼ p{
color: #f0f;
text-indent: 30px;
}
Example
Try this code »
h1{
font-size: 36px;
font-weight: normal;
}
h2{
font-size: 28px;
font-weight: normal;
}
h3{
font-size: 22px;
font-weight: normal;
}
As you can see in the above example, the same style rule font-weight: normal; is
shared by the selectors h1, h2 and h3, so it can be grouped in a comma-separated
list, like this:
Example
Try this code »
CSS Color
In this tutorial you will learn the different methods of defining color values in CSS.
For instance, the color property specified in the body selector defines the default
text color for the whole page. Let's try out the following example to see how it
works:
Example
Try this code »
body{
color: #ff5722;
}
Note: The color property normally inherits the color value from their parent
element, except the case of anchor elements. For example, if you specify color for
the body element it will automatically be passed down to the headings,
paragraphs, etc.
CSS3 has introduced several other color formats such as HSL, HSLA and RGBA
that also support alpha transparency. We'll learn about them in greater detail
in CSS3 color chapter.
For now, let's stick to the basic methods of defining the color values:
Color Keywords
CSS defines the few color keywords which lets you specify color values in an easy
way.
These basic color keywords are: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names
are case-insensitive.
Example
Try this code »
h1{
color: red;
}
p{
color: purple;
}
Modern web browsers however practically support many more color names than
what are defined in the CSS standard, but to be on the safer side you should use
hex color values instead.
See the reference on CSS color names, for a complete list of possible color
names.
HEX Color Values
Hex (short for Hexadecimal) is by far the most commonly used method of
defining color on the web.
The value of each component can vary from 00 (no color) and FF (full color) in
hexadecimal notation, or 0 and 255 in decimal equivalent notation.
Thus #ffffff represents white color and #000000 represents black color. Let's take a
look the following example:
Example
Try this code »
h1{
color: #ffa500;
}
p{
color: #00ff00;
}
Tip: If hexadecimal code of a color has value pairs, it can also be written in
shorthand notation to avoid extra typing, for example, the hex color value #ffffff
can be also be written as #fff, #000000 as #000, #00ff00 as #0f0, #ffcc00 as #fc0,
and so on.
The following example specifies the same color as in the previous example but in
RGB notation.
Example
Try this code »
h1{
color:rgb(255, 165, 0);
}
p{
color:rgb(0, 255, 0);
}
Note: You can also specify RGB values inside the rgb() function in percentage,
where 100% represents full color, and 0% (not simply 0) represents no color. For
example, you can specify the red color either as rgb(255, 0, 0) or rgb(100%, 0%, 0%).
Tip: If R, G, and B are all set to 255, i.e. rgb(255, 255, 255), the color would be
white. Likewise, if all channels are set to 0, i.e. rgb(0, 0, 0), the color would be
black. Play with the RGB values in the following demonstration to understand
how it actually works.
p.one{
color: #0000ff;
border: 2px solid;
}
p.two{
color: #00ff00;
outline: 2px solid;
}
Chapter 6
CSS Background
In this tutorial you will learn how to define background styles for an element
using CSS.
In the following section we will discuss each of these properties in more detail.
Background Color
The background-color property is used to set the background color of an element.
The following example demonstrates how to set the background color of the
whole page.
Example
Try this code »
body{
background-color: #f0e68c;
}
Color values in CSS are most often specified in the following formats:
Please check out the tutorial on CSS color to learn more about specifying color
values.
Background Image
The background-image property set an image as a background of an HTML element.
Let's check out the following example which sets the background image for the
whole page.
Example
Try this code »
body{
background-image:url("images/tile.png");
}
Note: When applying the background image to an element, make sure that the
image you choose does not affect the readability of the element's text content.
Tip: By default browser repeats or tiles the background image both horizontally
and vertically to fill the entire area of an element. You can control this
with background-repeat property.
Background Repeat
The background-repeat property allows you to control how a background image is
repeated or tiled in the background of an element. You can set a background
image to repeat vertically (y-axis), horizontally (x-axis), in both directions, or in
neither direction.
Let's try out the following example which demonstrates how to set the gradient
background for a web page by repeating the sliced image horizontally along the
x-axis.
Example
Try this code »
body{
background-image:url("images/gradient.png");
background-repeat: repeat-x;
}
Similarly, you can use the value repeat-y to repeat the background image
vertically along the y-axis, or the value no-repeat to prevent the repetition
altogether.
Example
Try this code »
body{
background-image:url("images/texture.png");
background-repeat: no-repeat;
}
Let's take a look at the following illustration to understand how this property
actually works.
Background Position
The background-position property is used to control the position of the background
image.
Example
Try this code »
body{
background-image:url("images/robot.png");
background-repeat: no-repeat;
}
In the following example, the background image is positioned at top-right corner.
Example
Try this code »
body{
background-image:url("images/robot.png");
background-repeat: no-repeat;
background-position: right top;
}
Note: If two values are specified for the background-position property, the first
value represents the horizontal position, and the second represents the vertical
position. If only one value is specified, the second value is assumed to be center.
Besides keywords, you can also use percentage or length values, such
as px or em for this property.
Let's take a look at the following illustration to understand how this property
actually works.
Background Attachment
The background-attachment property determines whether the background image is
fixed with regard to the viewport or scrolls along with the containing block.
Let's try out the following example to understand how it basically works:
Example
Try this code »
body{
background-image:url("images/bell.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
The background property is a shorthand property for setting all the individual
background properties, i.e., background-color, background-image, background-
repeat, background-attachment and the background-position property at once. Let's see
how this works:
Example
Try this code »
body{
background-color: #f0e68c;
background-image:url("images/smiley.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 25px;
}
Using the shorthand notation the above example can be written as:
Example
Try this code »
body{
background: #f0e68c url("images/smiley.png") no-repeat fixed
250px 25px;
}
When using the background shorthand property the order of the property values
should be.
Note: The background properties do not inherit like the color property, but the
parent element's background will be visible through by default, because of the
initial or default transparent value of the background-color CSS property.
Chapter 7
CSS Fonts
In this tutorial you will learn how to style fonts on a web page using CSS.
CSS provide several properties for styling the font of the text, including changing
their face, controlling their size and boldness, managing variant, and so on.
The font properties are: font-family, font-style, font-weight, font-size, and font-
variant.
Let's discuss each of these font properties one by one in more detail.
Font Family
The font-family property is used to specify the font to be used to render the text.
This property can hold several comma-separated font names as a fallback system,
so that if the first font is not available on the user's system, browser tries to use
the second one, and so on.
Hence, list the font that you want first, then any fonts that might fill in for the first
if it is not available. You should end the list with a generic font family which are
five — serif, sans-serif, monospace, cursive and fantasy. A typical font family
declaration might look like this:
Example
Try this code »
body{
font-family: Arial, Helvetica, sans-serif;
}
Note: If the name of a font family contains more than one word, it must be
placed inside quotation marks, like "Times New Roman", "Courier New", "Segoe UI", etc.
The most common font families used in web design are serif and sans-serif,
because they are more suitable for reading. While monospace fonts are
commonly used to display code, because in this typeface each letter takes up the
same space which looks like typewritten text.
The cursive fonts look like cursive writing or handwriting. The fantasy font
represents artistic font, but they're not used widely because of poor availability
across the operating systems.
To learn about commonly used font combinations, please check out the
reference on web safe fonts.
Font Style
The font-style property is used to set the font face style for the text content of an
element.
The font style can be normal, italic or oblique. The default value is normal.
Let's try out the following example to understand how it basically works:
Example
Try this code »
p.normal{
font-style: normal;
}
p.italic{
font-style: italic;
}
p.oblique{
font-style: oblique;
}
Note: At first glance both oblique and italic font styles appear the same thing,
but there is a difference. The italic style uses an italic version of the font
while oblique style on the other hand is simply a slanted or sloped version of the
normal font.
Font Size
The font-size property is used to set the size of font for the text content of an
element.
There are several ways to specify the font size values e.g. with keywords,
percentage, pixels, ems, etc.
Setting Font Size with Pixels
Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when
you need the pixel accuracy. Pixel is an absolute unit of measurement which
specifies a fixed length.
Let's try out the following example to understand how it basically works:
Example
Try this code »
h1{
font-size: 24px;
}
p{
font-size: 14px;
}
Defining the font sizes in pixel is not considered very accessible, because the user
cannot change the font size from the browser settings. For instance, users with
limited or low vision may wish to set the font size much larger than the size
specified by you.
Therefore, you should avoid using the pixels values and use the values that are
relative to the user's default font size instead if you want to create an inclusive
design.
Tip: The text can also be resized in all browsers using the zoom feature. However,
this feature resizes the entire page, not just the text. The W3C recommends using
the em or percentage (%) values in order to create more robust and scalable
layouts.
Let's take a look at the following example to understand how it basically works:
Example
Try this code »
h1{
font-size: 2em;/* 32px/16px=2em */
}
p{
font-size: 0.875em;/* 14px/16px=0.875em */
}
Now you can set the font-size for any elements using em units, with an easy-to-
remember conversion, by dividing the px value by 10. This
way 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, and so on. Let's take a look
at the following example:
Example
Try this code »
body{
font-size: 62.5%;/* font-size 1em = 10px */
}
p{
font-size: 1.4em;/* 1.4em = 14px */
}
p span{
font-size: 2em;/* 2em = 28px */
}
Setting Font Size with Root EM
To make things even more simpler CSS3 has introduced rem unit (short for "root
em") which is always relative to the font-size of the root element (html), regardless
of where the element lies in the document (unlike em which is relative to parent
element's font size).
This means that 1rem is equivalent to the font size of the html element, which
is 16px by default in most browsers. Let's try out an example to understand how it
actually works:
Example
Try this code »
html{
font-size: 62.5%;/* font-size 1em = 10px */
}
p{
font-size: 1.4rem;/* 1.4rem = 14px */
}
p span{
font-size: 2rem;/* 2rem = 20px (not 28px) */
}
An absolute font size can be specified using one of the following keywords: xx-
small, x-small, small, medium, large, x-large, xx-large. Whereas, a relative font size can
be specified using the keywords: smaller or larger. Let's try out an example and
see how it works:
Example
Try this code »
body{
font-size: large;
}
h1{
font-size: larger;
}
p{
font-size: smaller;
}
Note: The keyword medium is equivalent to the browsers default font-size, which is
normally 16px. Likewise, xx-small is the equivalent of 9 pixels, x-small is 10 pixels,
small is 13 pixels, large is 18 pixels, x-large is 24 pixels, and xx-large is 32 pixels.
Tip: By setting a font size on the body element, you can set the relative font
sizing everywhere else on the page, giving you the ability to easily scale the font
size up or down accordingly.
Try out the following example by resizing the browser window and see how it
works:
Example
Try this code »
body{
font-size: 1vw;
}
h1{
font-size: 3vw;
}
However, there is a problem with the viewport units. On small screens fonts
become so small that they are hardly readable. To prevent this you can utilize
CSS calc() function, like this:
Example
Try this code »
html{
font-size:calc(1em + 1vw);
}
h1{
font-size: 3rem;
}
In this example, even if the viewport width becomes 0, the font-size would be at
least 1em or 16px.
You further utilize CSS media queries to create better responsive and fluid
typography.
Font Weight
The font-weight property specifies the weight or boldness of the font.
The numeric values 100-900 specify the font weights, where each number
represents a weight greater than its predecessor. 400 is same as normal & 700 is
same as bold.
The bolder and lighter values are relative to the inherited font weight, while the
other values such as normal and bold are absolute font weights.
Let's try out an example to understand how this property basically works:
Example
Try this code »
p{
font-weight: bold;
}
Note: Most of the fonts are only available in a limited number of weights; often
they are available only in normal and bold. In case, if a font is not available in the
specified weight, an alternate will be chosen that is the closest available weight.
Font Variant
The font-variant property allows the text to be displayed in a special small-caps
variation.
Small-caps or small capital letters are slightly different to normal capital letters, in
which lowercase letters appear as smaller versions of the corresponding
uppercase letters.
Try out the following example to understand how this property actually works:
Example
Try this code »
p{
font-variant: small-caps;
}
The value normal removes small caps from the text which is already formatted that
way.
Chapter 8
CSS Text
In this tutorial you will learn how to style text on your web pages using CSS.
Let's see how to set these text properties for an element in more detail.
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
Example
Try this code »
body{
color: #434343;
}
Although, the color property seems like it would be a part of the CSS text, but it
is actually a standalone property in CSS. See the tutorial on CSS color to learn
more about the color property.
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.
Example
Try this code »
h1{
text-align: center;
}
p{
text-align: justify;
}
Note: When text-align is set to justify, each line is stretched so that every line
has equal width (except the last line), and the left and right margins are straight.
This alignment is generally used in publications such as magazines and
newspapers.
Let's take a look at the following illustration to understand what these values
actually mean.
Text Decoration
The text-decoration property is used to set or remove decorations from text.
Let's try out the following example to understand how it basically works:
Example
Try this code »
h1{
text-decoration: overline;
}
h2{
text-decoration: line-through;
}
h3{
text-decoration: underline;
}
Let's take a look at the following example to understand how it basically works:
Example
Try this code »
a{
text-decoration: none;
border-bottom: 1px dotted;
}
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 this 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.
Let's try out the following example to understand how it basically works:
Example
Try this code »
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.
Example
Try this code »
p{
text-indent: 100px;
}
Note: Whether the text is indented from the left or from the right depends on the
direction of text inside the element, defined by the CSS direction property.
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.
Let's check out the following example to understand how it really works:
Example
Try this code »
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.
Let's try out the following example to understand how this property works:
Example
Try this code »
p.normal{
word-spacing: 20px;
}
p.justified{
word-spacing: 20px;
text-align: justify;
}
p.preformatted{
word-spacing: 20px;
white-space: pre;
}
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.
Example
Try this code »
p{
line-height: 1.2;
}
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.
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. Let's check out an example:
Example
Try this code »
p{
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}
See the tutorial on CSS3 text overflow in the advanced section to learn how to
handle overflowed text. Also see the CSS3 text shadow section to learn how to
apply shadow effect on text.
Chapter 9
CSS Links
In this tutorial you will learn how to style different states of a link using CSS.
You can specify any CSS property you'd like e.g. color, font, background, border, etc. to each
of these selectors to customize the style of links, just like you do with the normal text.
Example
Try this code »
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.
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.
Example
Try this code »
a:link{
color: #1ebba3;
}
a:visited{
color: #ff00f4;
}
a:hover{
color: #a766ff;
}
a:active{
color: #ff9800;
}
Example
Try this code »
a:link, a:visited{
text-decoration: none;
}
a:hover, a:active{
text-decoration: underline;
}
Example
Try this code »
a:link, a:visited{
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
a:hover, a:active{
background-color: #9c6ae1;
border-color: #7443b6;
}
Chapter 10
CSS Lists
In this tutorial you will learn how to format HTML lists using CSS.
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.
See the tutorial on HTML lists to learn more about the lists and how to create
them.
In the following section we will discuss the properties that can be used to style
HTML lists.
But, you can change this default list marker type to any other type such as roman
numerals, latin letters, circle, square, and so on using the list-style-type property.
Let's try out the following example to understand how this property actually
works:
Example
Try this code »
ul{
list-style-type: square;
}
ol{
list-style-type: upper-roman;
}
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. Here's an example:
Example
Try this code »
ol.in li{
list-style-position: inside;
}
ol.out li{
list-style-position: outside;
}
Let's take a look at the following illustration to understand how markers or
bullets are positioned.
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:
Example
Try this code »
ul li{
list-style-image:url("images/bullet.png");
}
Sometimes, the list-style-image property may not produce the expected output.
Alternatively, you can use the following solution for better control over the
positioning of image markers.
As a work-around, you can also 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.
The following example displays the image markers equally in all browsers:
Example
Try this code »
ul{
list-style-type: none;
}
ul li{
background-image:url("images/bullet.png");
background-position: 0px 5px;/* X-pos Y-pos (from top-left) */
background-repeat: no-repeat;
padding-left: 20px;
}
The following style rule sets all the list properties in a single declaration.
Example
Try this code »
ul{
list-style: square inside url("images/bullet.png");
}
Note: When using the list-style shorthand property, the orders of the values
are: list-style-type | list-style-position | list-style-image. It does not matter if one
of the values above is missing as long as the rest are in the specified order.
Creating Navigation Menus Using Lists
HTML lists are frequently used to create horizontal navigation bar or menu that
typically appear at the top of a website. But since the list items are block
elements, so to display them inline we need to use the CSS display property. Let's
try out an example to see how it really works:
Example
Try this code »
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
}
ul li a{
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
You will learn about the CSS display and padding properties in detail in
upcoming chapters.
Chapter 11
CSS Tables
In this tutorial you will learn how to style HTML tables with CSS.
But when you create an HTML table without any styles or attributes, browsers
display them without any border. With CSS you can greatly improve the
appearance your tables.
CSS provides several properties that allow you to control the layout and
presentation of the table elements. In the following section you will see how to
use CSS to create elegant and consistent tables.
The following example will set a black border for the <table>, <th>,
and <td> elements.
Example
Try this code »
By default, browser draws a border around the table, as well as around all the
cells, with some space in-between, which results in double border. To get rid of
this double border problem you can simply collapse the adjoining table cell
borders and create clean single line borders.
In the separate border model, which is the default, each table cell has its own
distinct borders, whereas in the collapsed border model, adjacent table cells
share a common border. You can set the border model for an HTML table by
using the CSS border-collapse property.
The following style rules will collapse the table cell borders and apply one pixel
black border.
Example
Try this code »
table{
border-collapse: collapse;
}
th, td{
border: 1px solid black;
}
Note: You can also remove the space between the table cell borders through
setting the value of CSS border-spacing property to 0. However, it only removes
the space but do not merge the borders like when you set the border-
collapse to collapse.
To add more space between the table cell contents and the cell borders, you can
simply use the CSS padding property. Let's try out the following example and see
how it works:
Example
Try this code »
th, td{
padding: 15px;
}
You can also adjust the spacing between the borders of the cells using the
CSS border-spacing property, if the borders of your table are separated (which is
default).
The following style rules apply the spacing of 10 pixels between all borders within
a table:
Example
Try this code »
table{
border-spacing: 10px;
}
However, you can also set the width and height of the table as well as its cells
explicitly using the width and height CSS property. The style rules in the
following example will sets the width of the table to 100%, and the height of the
table header cells to 40px.
Example
Try this code »
table{
width: 100%;
}
th{
height: 40px;
}
You can do this with the help of CSS table-layout property. This property
defines the algorithm to be used to layout the table cells, rows, and columns. This
property takes one of two values:
auto — Uses an automatic table layout algorithm. With this algorithm, the widths
of the table and its cells are adjusted to fit the content. This is the default value.
fixed — Uses the fixed table layout algorithm. With this algorithm, the horizontal
layout of the table does not depend on the contents of the cells; it only depends
on the table's width, the width of the columns, and borders or cell spacing. It is
normally faster than auto.
The style rules in the following example specify that the HTML table is laid out
using the fixed layout algorithm and has a fixed width of 300 pixels. Let's try it
out and see how it works:
Example
Try this code »
table{
width: 300px;
table-layout: fixed;
}
Tip: You can optimize the table rendering performance by specifying the
value fixed for the table-layout property. Fixed value of this property causes
the table to be rendered one row at a time, providing users with information at a
faster pace.
Note: Without fixed value of the table-layout property on large tables, users
won't see any part of the table until the browser has rendered the whole table.
Example
Try this code »
th{
text-align: left;
}
Note: Text inside the <td> elements are left-aligned by default, whereas the text
inside the <th> elements are center-aligned and rendered in bold font by default.
The following style rules will vertically bottom-align the text inside
the <th> elements.
Example
Try this code »
th{
height: 40px;
vertical-align: bottom;
}
The caption can be placed either at the top or bottom of the table. The default
position is top.
Example
Try this code »
caption{
caption-side: bottom;
}
Tip: To change the horizontal alignment of the table's caption text (e.g. left or
right), you can simply use the CSS text-align property, like you do with normal
text.
This property accepts a value of either show or hide. The default value is show,
which renders empty cells like normal cells, but if the value hide is specified no
borders or backgrounds are drawn around the empty cells. Let's try out an
example to understand how it really works:
Example
Try this code »
table{
border-collapse: separate;
empty-cells: hide;
}
Note: Placing a non-breaking space ( ) inside a table cell make it non-
empty. Therefore, even if that cell looks empty the hide value will not hide the
borders and backgrounds.
Creating Zebra-striped Tables
Setting different background colors for alternate rows is a popular technique to
improve the readability of tables that has large amount of data. This is commonly
known as zebra-striping a table.
You can simply achieve this effect by using the CSS :nth-child() pseudo-
class selector.
The following style rules will highlight every odd rows within the table body.
Example
Try this code »
tbody tr:nth-child(odd){
background-color: #f2f2f2;
}
Example
Try this code »
The following diagram demonstrates how the width, height, padding, border, and
margin CSS properties determines how much space an element can take on a
web page.
Padding is the transparent space between the element's content and its border
(or edge of the box, if it has no border), whereas margin is the transparent space
around the border.
Also, if an element has the background color it will be visible through its padding
area. The margin area is always remain transparent, it is not affected by the
element's background color, however, it causes the background color of the
parent element to be seen through it.
The actual space that an element's box might take on a web page is calculated
like this:
You will learn about each of these CSS properties in detail in upcoming chapters.
Now let's try out the following example to understand how the box model
actually works:
Example
Try this code »
div{
width: 300px;
height: 200px;
padding: 15px;/* set padding for all four sides */
border: 10px solid black;/* set border for all four sides */
margin: 20px auto;/* set top and bottom margin to 20 pixels, and
left and right margin to auto */
}
Note: In CSS box model; the content area of an element's box is the area where
its content, e.g., text, image, video, etc. appears. It may also contain descendant
elements boxes.
Chapter 13
CSS Dimension
In this tutorial you will learn how to set width and height of an element using
CSS.
This width and height does not include paddings, borders, or margins. See
the CSS box model to know how the effective width and height of an element's
box is calculated.
Let's try out the following example and see how it actually works:
Example
Try this code »
div{
width: 300px;
height: 200px;
}
The above style rules assigns a fixed width of 300 pixels and height of 200px to
the <div> element.
The width and height properties can take the following values:
You can not specify negative values to the width and height properties.
Tip: Typically when you create a block element, such as <div>, <p>, etc. browser
automatically set their width to 100% of the available width, and height to
whatever is needed to show all the content. You should avoid setting a fixed
width and height unless it is necessary.
An element cannot be wider than the max-width value, even if the width property
value is set to something larger. For instance, if the width is set to 300px and
the max-width is set to 200px, the actual width of the element will be 200px. Let's
check out an example:
Example
Try this code »
div{
width: 300px;
max-width: 200px;
}
Note: If the min-width property is specified with a value greater than that of max-
width property, in this case the min-width value will in fact be the one that's
applied.
Likewise, an element that has max-height applied will never be taller than the value
specified, even if the height property is set to something larger. For example, if
the height is set to 200px and the max-height set to 100px, the actual height of the
element will be 100px.
Example
Try this code »
div{
height: 200px;
max-height: 100px;
}
Note: If the min-height property is specified with a value greater than that of max-
height property, in this case the min-height value will in fact be the one that's
applied.
Example
Try this code »
div{
width: 200px;
min-width: 300px;
}
Note: The min-width property is usually used to ensure that an element has at
least a minimum width even if no content is present. However the element will be
allowed to grow normally if its content exceeds the minimum width set.
Similarly, an element to which min-height is applied will never be smaller than the
value specified, even if the height property is set to something lesser. For
example, if the height is set to 200px, and the min-height is set to 300px, the actual
height of the element will be 300px.
Example
Try this code »
div{
height: 100px;
min-height: 200px;
}
Note: The min-height property is usually used to ensure that an element has at
least a minimum height even if no content is present. However the element will
be allowed to grow normally if the content exceeds the minimum height set.
This can be very useful for creating flexible design. In the following example the
minimum width of the <div> element would be 300px and it can stretches
horizontally up to a maximum 500px.
Example
Try this code »
div{
min-width: 300px;
max-width: 500px;
}
Similarly, you can define a height range for an element. In the example below the
minimum height of the <div> element would be 300px and it can stretches
vertically up to a maximum 500px.
Example
Try this code »
div{
min-height: 300px;
max-height: 500px;
}
Chapter 14
CSS Padding
In this tutorial you will learn how to adjust the padding area of an element using
CSS.
Example
Try this code »
h1{
padding-top: 50px;
padding-bottom: 100px;
}
p{
padding-left: 75px;
padding-right: 75px;
}
Let's take a look at the following example to understand how it basically works:
Example
Try this code »
h1{
padding: 50px;/* apply to all four sides */
}
p{
padding: 25px 75px;/* vertical | horizontal */
}
div{
padding: 25px 50px 75px;/* top | horizontal | bottom */
}
pre{
padding: 25px 50px 75px 100px;/* top | right | bottom | left */
}
This shorthand notation can take one, two, three, or four whitespace separated
values.
For instance, if you set the width of a <div> element to 100% and also apply left
right padding or border on it, the horizontal scrollbar will appear. Let's see an
example:
Example
Try this code »
div{
width: 100%;
padding: 25px;
}
To prevent padding and border from changing element's box width and height,
you can use the CSS box-sizing property. In the following example the width
and height of the <div> box will remain unchanged, however, its content area will
decrease with increasing padding or border.
Example
Try this code »
div{
width: 100%;
padding: 25px;
box-sizing: border-box;
}
You will learn about the CSS box sizing feature in detail in the upcoming
chapters.
Chapter 15
CSS Border
In this tutorial you will learn how to define border around an element using CSS.
Borders appear directly between the margin and padding of an element. The
border can either be a predefined style like, solid line, dotted line, double line,
etc. or an image.
The following section describes how to set the style, color, and width of the
border.
The values inset, outset, groove, and ridge creates a 3D like effect which
essentially depends on the border-color value. This is typically achieved by
creating a "shadow" from two colors that are slightly lighter and darker than the
border color. Let's check out an example:
Example
Try this code »
h1{
border-style: dotted;
}
p{
border-style: ridge;
}
Note: You must specify a border style in order to make the border appear
around an element, because the default border style is none. Whereas, the default
border width or thickness is medium, and the default border color is the same as
the text color.
Example
Try this code »
p{
border-style: dashed;
border-width: 10px;
}
Tip: The border width can be specified using any length value, such as px, em,
rem, and so on. In addition to length units, the border width may also be
specified using one of three keywords: thin, medium, and thick. Percentage
values are not allowed.
The following style rules adds a solid border of red color around the paragraphs.
Example
Try this code »
p{
border-style: solid;
border-color: #ff0000;
}
Example
Try this code »
p{
border: 5px solid #00ff00;
}
If the value for an individual border property is omitted or not specified while
setting the border shorthand property, the default value for that property will be
used instead, if any.
For instance, if the value for the border-color property is missing or not
specified when setting the border, the element's color property will be used as
the value for the border color.
In the example below, the border will be a solid red line of 5 pixels width:
Example
Try this code »
p{
color: red;
border: 5px solid;
}
But, in the case of border-style, omitting the value will cause no border to show
at all, because the default value for this property is none. In the following
example, there will be no border:
Example
Try this code »
p{
border: 5px #00ff00;
}
Chapter 16
CSS Margin
In this tutorial you will learn how to adjust space around an element using CSS.
Example
Try this code »
h1{
margin-top: 50px;
margin-bottom: 100px;
}
p{
margin-left: 75px;
margin-right: 75px;
}
Let's take a look at the following example to understand how it basically works:
Example
Try this code »
h1{
margin: 50px;/* apply to all four sides */
}
p{
margin: 25px 75px;/* vertical | horizontal */
}
div{
margin: 25px 50px 75px;/* top | horizontal | bottom */
}
hr{
margin: 25px 50px 75px 100px;/* top | right | bottom | left */
}
This shorthand notation can take one, two, three, or four whitespace separated
values.
It is recommended to use the shorthand properties, it will help you to save some
time by avoiding the extra typing and make your CSS code easier to follow and
maintain.
Example
Try this code »
div{
width: 300px;
background: gray;
margin: 0 auto;
}
The above style rules lets the <div> element take up 300 pixels of all the
horizontal space available, and the remaining space will be equally divided
between left and right margins.