0% found this document useful (0 votes)

23 views191 pages

What Is CSS?: Body (Background-Color: Lightblue ) h1 (

CSS, or Cascading Style Sheets, is used to style web pages by controlling the layout and appearance of HTML elements. It allows for the separation of content and design, making it easier to manage styles across multiple pages. The document covers various aspects of CSS, including syntax, selectors, methods of adding CSS, and color specifications.

Uploaded by

Ramesh Vankara

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

23 views191 pages

What Is CSS?: Body (Background-Color: Lightblue ) h1 (

Uploaded by

Ramesh Vankara

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

CSS-1

CSS Introduction
CSS is the language we use to style a Web page.

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 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 Demo - One HTML Page - Multiple Styles!

Here we will show one HTML page displayed with four different stylesheets. Click on the "Stylesheet 1",
"Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different styles:

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
CSS-2

color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Solved a Big Problem

 HTML was NEVER intended to contain tags for formatting a web page!
 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.
 CSS removed the style formatting from the HTML page!
CSS-3

CSS Syntax
A CSS rule consists of a selector and a declaration block.

CSS Syntax

 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.
 Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.

Example
In this example all <p> elements will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
CSS-4

CSS Selectors
A CSS selector selects the HTML element(s) you want to style.

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
CSS-5

The CSS id Selector

 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element is unique within a page, so the id selector is used to select one unique
element!
 To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

Example
The CSS rule below will be applied to the HTML element with id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Note: An id name cannot start with a number!

The CSS class Selector

 The class selector selects HTML elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the class name.
CSS-6

Example
In this example all HTML elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

You can also specify that only specific HTML elements should be affected by a class.

Example
In this example only <p> elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
text-align: center;
color: red;
}
</style>
</head>
CSS-7

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>

HTML elements can also refer to more than one class.

Example
In this example the <p> element will be styled according to class="center" and to class="large":

<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
text-align: center;
color: red;
}
[Link] {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large
font-size.</p>
</body>
</html>
CSS-8

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
CSS-9

The CSS Grouping Selector

 The grouping selector selects all the HTML elements with the same style definitions.
 Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

 It will be better to group the selectors, to minimize the code.

 To group selectors, separate each selector with a comma.

Example
In this example we have grouped the selectors from the code above:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS-10

How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to the information in
the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS

External CSS
 With an external style sheet, you can change the look of an entire website by changing just one
file!
 Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.

Example
External styles are defined within the <link> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS-11

 An external style sheet can be written in any text editor, and must be saved with a .css extension.
 The external .css file should not contain any HTML tags.
 Here is how the "[Link]" file looks:

"[Link]"

Internal CSS
 An internal style sheet may be used if one single HTML page has a unique style.
 The internal style is defined inside the <style> element, inside the head section.

Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS-12

Inline CSS
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.

Example
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS-13

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation).
Use this method sparingly.

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value
from the last read style sheet will be used.

Example
If the internal style is defined after the link to the external style sheet, the <h1> elements will be
"orange":

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
CSS-14

Example
However, if the internal style is defined before the link to the external style sheet, the <h1> elements will
be "navy":

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
CSS-15

Cascading Order
What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where
number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external and internal styles and browser
defaults.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS,
and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try
removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>
CSS-16

CSS Comments

CSS comments are not displayed in the browser, but they can help document your source code.

CSS Comments
 Comments are used to explain the code, and may help when you edit the source code at a later
date.
 Comments are ignored by browsers.
 A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

Example

<!DOCTYPE html>

<html>

<head>

<style>

/* This is a single-line comment */

color: red;

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>
CSS-17

You can add comments wherever you want in the code:

Example

<!DOCTYPE html>

<html>

<head>

<style>

color: red; /* Set text color to red */

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>
CSS-18

Even in the middle of a code line:

Example

<!DOCTYPE html>

<html>

<head>

<style>

color: /*red*/blue;

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>
CSS-19

Comments can also span multiple lines:

Example

<!DOCTYPE html>

<html>

<head>

<style>

/* This is

a multi-line

comment */

color: red;

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

CSS-20

</body>

</html>

HTML and CSS Comments

From the HTML tutorial, you learned that you can add comments to your HTML source by using
the  syntax.

In the following example, we use a combination of HTML and CSS comments:

Example

<!DOCTYPE html>

<html>

<head>

<style>

color: red; /* Set text color to red */

</style>

</head>

<body>

<h2>My Heading</h2>
CSS-21

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>HTML and CSS comments are not shown in the output.</p>

</body>

</html>
CSS-22

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>
CSS-23

CSS Background Color

You can set the background color for HTML elements:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

CSS Text Color

You can set the color of text:

<!DOCTYPE html>

<html>
CSS-24

<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>

CSS Border Color

You can set the color of borders:

<!DOCTYPE html>

<html>

<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
CSS-25

</html>

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
HSLA values:

<!DOCTYPE html>

<html>

<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or
even transparent colors using RGBA or HSLA color values.</p>

</body>

</html>
CSS-26
CSS-27

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

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

Example

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>

</html>
CSS-28

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)"

Look at CSS Color Values for a complete list of possible color values.

Other Elements
You can set the background color for any HTML elements:

Example

Here, the <h1>, <p>, and <div> elements will have different background colors:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

background-color: green;

div {

background-color: lightblue;

background-color: yellow;

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>
CSS-29

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0.
The lower value, the more transparent:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: green;

[Link] {

opacity: 0.1;
CSS-30

[Link] {

opacity: 0.3;

[Link] {

opacity: 0.6;

</style>

</head>

<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of
its child elements become transparent as well. This can make the text inside a fully transparent
element hard to read:</p>

<h1>opacity 0.1</h1>

</div>

<h1>opacity 0.3</h1>

</div>

<h1>opacity 0.6</h1>

</div>

<div>

<h1>opacity 1 (default)</h1>

</div>

</body>

</html>
CSS-31

Note: When using the opacity property to add transparency to the background of an element, all of its
child elements inherit the same transparency. This can make the text inside a fully transparent element
hard to read.

Transparency using RGBA

 If you do not want to apply opacity to child elements, like in our example above,
use RGBA color values. The following example sets the opacity for the background color and not
the text:
 You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to
RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the
opacity for a color.
 An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a
number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {
CSS-32

background: rgb(0, 128, 0);

[Link] {

background: rgba(0, 128, 0, 0.1);

[Link] {

background: rgba(0, 128, 0, 0.3);

[Link] {

background: rgba(0, 128, 0, 0.6);

</style>

</head>

<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<h1>10% opacity</h1>

</div>

<h1>30% opacity</h1>

</div>

<h1>60% opacity</h1>

</div>

<div>

<h1>opacity 1</h1>

</div>
CSS-33

<p>Result with rgba():</p>

<h1>10% opacity</h1>

</div>

<h1>30% opacity</h1>

</div>

<h1>60% opacity</h1>

</div>

<div>

<h1>default</h1>

</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity
property.</p>

</body>

</html>

CSS Background Image

CSS-34

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.

Example

Set the background image for a page:

<!DOCTYPE html>

<html>

<head>

<style>

body {

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

Example
CSS-35

This example shows a bad combination of text and background image. The text is hardly readable:

<!DOCTYPE html>

<html>

<head>

<style>

body {

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This text is not easy to read on this background image.</p>

</body>

</html>

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

The background image can also be set for specific elements, like the <p> element:
CSS-36

Example

<!DOCTYPE html>

<html>

<head>

<style>

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>

</html>

CSS Background Image Repeat

CSS-37

CSS background-repeat

 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:

Example

<!DOCTYPE html>

<html>

<head>

<style>

body {

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Strange background image...</p>

</body>

</html>

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look
better:
CSS-38

Example

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: repeat-x;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Here, a background image is repeated only horizontally!</p>

</body>

</html>

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

CSS background-repeat: no-repeat

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

Example

Show the background image only once:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>W3Schools background image example.</p>

<p>The background image only shows once, but it is disturbing the reader!</p>

</body>

</html>

In the example above, the background image is placed 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.
CSS-40

CSS background-position
The background-position property is used to specify the position of the background image.

Example

Position the background image in the top-right corner:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Here, the background image is only shown once. In addition it is positioned away from the
text.</p>

<p>In this example we have also added a margin on the right side, so that the background image
will not disturb the text.</p>

</body>

</html>
CSS-41

CSS Background Attachment

The background-attachment property specifies whether the background image should scroll or be fixed
(will not scroll with the rest of the page):

Example

Specify that the background image should be fixed:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: fixed;

</style>

</head>
CSS-42

<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll
or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser
window.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
CSS-43

</html>

Example

Specify that the background image should scroll with the rest of the page:

<!DOCTYPE html>

<html>

<head>

<style>

body {
CSS-44

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: scroll;

</style>

</head>

<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll
or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser
window.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

CSS-45

<p>The background-image scrolls. Try to scroll down the page.</p>

</body>

</html>

CSS Background Shorthand

CSS background - Shorthand property

CSS-46

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

Instead of writing:

You can use the shorthand property background:

Example

Use the shorthand property to set the background properties in one declaration:

<!DOCTYPE html>

<html>

<head>

<style>

body {

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

margin-right: 200px;

</style>

</head>

<body>

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all the background
properties in one declaration.</p>

<p>Here, the background image is only shown once, and it is also positioned in the top-right
corner.</p>

<p>We have also added a right margin, so that the text will not write over the background
image.</p>
CSS-47

</body>

</html>

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. Note
that we do not use the background-attachment property in the examples above, as it does not have a value.

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.
CSS-48

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border

 solid - Defines a solid border

 double - Defines a double border

 groove - Defines a 3D grooved border. The effect depends on the border-color value

 ridge - Defines a 3D ridged border. The effect depends on the border-color value

 inset - Defines a 3D inset border. The effect depends on the border-color value

 outset - Defines a 3D outset border. The effect depends on the border-color value

 none - Defines no border

 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom
border, and the left border).

Example

Demonstration of the different border styles:

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {border-style: dotted;}

[Link] {border-style: dashed;}

[Link] {border-style: solid;}

[Link] {border-style: double;}

[Link] {border-style: groove;}

[Link] {border-style: ridge;}

CSS-49

[Link] {border-style: inset;}

[Link] {border-style: outset;}

[Link] {border-style: none;}

[Link] {border-style: hidden;}

[Link] {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>
CSS-50

CSS Border Width

 The border-width property specifies the width of the four borders.

CSS-51

 The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:

Example

Demonstration of the different border widths:

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

border-style: solid;

border-width: 5px;

[Link] {

border-style: solid;

border-width: medium;

[Link] {

border-style: dotted;

border-width: 2px;

[Link] {

border-style: dotted;

border-width: thick;

[Link] {

border-style: double;

border-width: 15px;

}
CSS-52

[Link] {

border-style: double;

border-width: thick;

</style>

</head>

<body>

<h2>The border-width Property</h2>

<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>

<p class="two">Some text.</p>

<p class="three">Some text.</p>

<p class="four">Some text.</p>

<p class="five">Some text.</p>

<p class="six">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.

Always specify the "border-style" property to set the borders first.</p>

</body>

</html>
CSS-53

Specific Side Widths

The border-width property can have from one to four values (for the top border, right border, bottom
border, and the left border):

Example

<!DOCTYPE html>

<html>
CSS-54

<head>

<style>

[Link] {

border-style: solid;

border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */

[Link] {

border-style: solid;

border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */

[Link] {

border-style: solid;

border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

</style>

</head>

<body>

<h2>The border-width Property</h2>

<p>The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border):</p>

<p class="one">Some text.</p>

<p class="two">Some text.</p>

<p class="three">Some text.</p>

</body>

</html>
CSS-55

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

 name - specify a color name, like "red"

 HEX - specify a HEX value, like "#ff0000"

 RGB - specify a RGB value, like "rgb(255,0,0)"

 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"

 transparent

Note: If border-color is not set, it inherits the color of the element.

Example

Demonstration of the different border colors:

<!DOCTYPE html>
CSS-56

<html>

<head>

<style>

[Link] {

border-style: solid;

border-color: red;

[Link] {

border-style: solid;

border-color: green;

[Link] {

border-style: dotted;

border-color: blue;

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>

<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>

</body>

</html>
CSS-57

Specific Side Colors

The border-color property can have from one to four values (for the top border, right border, bottom
border, and the left border).

Example

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

border-style: solid;

border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left
*/

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border):</p>

<p class="one">A solid multicolor border</p>

</body>

</html>
CSS-58

HEX Values
The color of the border can also be specified using a hexadecimal value (HEX):

Example

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

border-style: solid;

border-color: #ff0000; /* red */

[Link] {

border-style: solid;

border-color: #0000ff; /* blue */

[Link] {

border-style: solid;

border-color: #bbbbbb; /* grey */

</style>
CSS-59

</head>

<body>

<h2>The border-color Property</h2>

<p>The color of the border can also be specified using a hexadecimal value (HEX):</p>

<p class="one">A solid red border</p>

<p class="two">A solid blue border</p>

<p class="three">A solid grey border</p>

</body>

</html>

RGB Values
Or by using RGB values:

Example

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

border-style: solid;

border-color: rgb(255, 0, 0); /* red */

}
CSS-60

[Link] {

border-style: solid;

border-color: rgb(0, 0, 255); /* blue */

[Link] {

border-style: solid;

border-color: rgb(187, 187, 187); /* grey */

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>The color of the border can also be specified using RGB values:</p>

<p class="one">A solid red border</p>

<p class="two">A solid blue border</p>

<p class="three">A solid grey border</p>

</body>

</html>

HSL Values
You can also use HSL values:

Example
CSS-61

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

border-style: solid;

border-color: hsl(0, 100%, 50%); /* red */

[Link] {

border-style: solid;

border-color: hsl(240, 100%, 50%); /* blue */

[Link] {

border-style: solid;

border-color: hsl(0, 0%, 73%); /* grey */

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>The color of the border can also be specified using HSL values:</p>

<p class="one">A solid red border</p>

<p class="two">A solid blue border</p>

<p class="three">A solid grey border</p>

</body>

</html>
CSS-62

CSS Border Sides

CSS Border - Individual Sides

From the examples on the previous pages, you have seen that it is possible to specify a different border
for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Example

<!DOCTYPE html>

<html>

<head>

<style>

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

</style>

</head>
CSS-63

<body>

<h2>Individual Border Sides</h2>

<p>2 different border styles.</p>

</body>

</html>

The example above gives the same result as this:

Example

<!DOCTYPE html>

<html>

<head>

<style>

border-style: dotted solid;

</style>

</head>

<body>

<h2>Individual Border Sides</h2>

<p>2 different border styles.</p>

</body>
CSS-64

</html>

So, here is how it works:

If the border-style property has four values:

 border-style: dotted solid double dashed;

o top border is dotted

o right border is solid

o bottom border is double

o left border is dashed

If the border-style property has three values:

 border-style: dotted solid double;

o top border is dotted

o right and left borders are solid

o bottom border is double

If the border-style property has two values:

 border-style: dotted solid;

o top and bottom borders are dotted

o right and left borders are solid

If the border-style property has one value:

 border-style: dotted;

o all four borders are dotted

CSS-65

Example

<!DOCTYPE html>

<html>

<head>

<style>

body {

text-align: center;

/* Four values */

[Link] {

border-style: dotted solid double dashed;

/* Three values */

[Link] {

border-style: dotted solid double;

/* Two values */

[Link] {

border-style: dotted solid;

/* One value */

[Link] {

border-style: dotted;

</style>

</head>

<body>

<h2>Individual Border Sides</h2>

CSS-66

<p class="four">4 different border styles.</p>

<p class="three">3 different border styles.</p>

<p class="two">2 different border styles.</p>

<p class="one">1 border style.</p>

</body>

</html>

CSS Shorthand Border Property

CSS Border - Shorthand Property

Like you saw in the previous page, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

 border-width

 border-style (required)

 border-color

Example
CSS-67

<!DOCTYPE html>

<html>

<head>

<style>

border: 5px solid red;

</style>

</head>

<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>

</html>

You can also specify all the individual border properties for just one side:

Left Border
CSS-68

<!DOCTYPE html>

<html>

<head>

<style>

border-left: 6px solid red;

background-color: lightgrey;

</style>

</head>

<body>

<h2>The border-left Property</h2>

<p>This property is a shorthand property for border-left-width, border-left-style, and border-

left-color.</p>

</body>

</html>

Bottom Border

<!DOCTYPE html>
CSS-69

<html>

<head>

<style>

border-bottom: 6px solid red;

background-color: lightgrey;

</style>

</head>

<body>

<h2>The border-bottom Property</h2>

<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and

border-bottom-color.</p>

</body>

</html>

CSS Rounded Borders

CSS-70

The border-radius property is used to add rounded borders to an element:

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

border: 2px solid red;

padding: 5px;

p.round1 {

border: 2px solid red;

border-radius: 5px;

padding: 5px;

p.round2 {

border: 2px solid red;

border-radius: 8px;

padding: 5px;

p.round3 {

border: 2px solid red;

border-radius: 12px;

padding: 5px;

</style>

</head>

<body>

<h2>The border-radius Property</h2>

CSS-71

<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>

<p class="round1">Round border</p>

<p class="round2">Rounder border</p>

<p class="round3">Roundest border</p>

</body>

</html>

More Examples

All the top border properties in one declaration

This example demonstrates a shorthand property for setting all of the properties for the top border in one
declaration.

Set the style of the bottom border

This example demonstrates how to set the style of the bottom border.

Set the width of the left border

This example demonstrates how to set the width of the left border.

Set the color of the four borders

This example demonstrates how to set the color of the four borders. It can have from one to four colors.

Set the color of the right border

This example demonstrates how to set the color of the right border.

CSS Margins
Margins are used to create space around elements, outside of any defined borders.
CSS-72

<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 70px;

border: 1px solid #4CAF50;

</style>

</head>

<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>

</html>

CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.
CSS-73

With CSS, you have full control over the margins. There are properties for setting the margin for each
side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

 margin-top

 margin-right

 margin-bottom

 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin

 length - specifies a margin in px, pt, cm, etc.

 % - specifies a margin in % of the width of the containing element

 inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a <p> element:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;
CSS-74

</style>

</head>

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of
100px, and a left margin of 80px.</div>

</body>

</html>

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

 margin-top

 margin-right

 margin-bottom

 margin-left

So, here is how it works:

If the margin property has four values:

 margin: 25px 50px 75px 100px;

o top margin is 25px

o right margin is 50px

CSS-75

o bottom margin is 75px

o left margin is 100px

Example

Use the margin shorthand property with four values:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 25px 50px 75px 100px;

background-color: lightblue;

</style>

</head>

<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of
75px, and a left margin of 100px.</div>

<hr>

</body>

</html>

If the margin property has three values:

 margin: 25px 50px 75px;

CSS-76

o top margin is 25px

o right and left margins are 50px

o bottom margin is 75px

Example

Use the margin shorthand property with three values:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 25px 50px 75px;

background-color: lightblue;

</style>

</head>

<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom
margin of 75px.</div>

<hr>

</body>

</html>

If the margin property has two values:

 margin: 25px 50px;

CSS-77

o top and bottom margins are 25px

o right and left margins are 50px

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 25px 50px;

background-color: lightblue;

</style>

</head>

<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of
50px.</div>

<hr>

</body>

</html>

If the margin property has one value:

 margin: 25px;
CSS-78

o all four margins are 25px

Example

Use the margin shorthand property with one value:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 25px;

background-color: lightblue;

</style>

</head>

<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>

</html>

The auto Value

You can set the margin property to auto to horizontally center the element within its container.
CSS-79

The element will then take up the specified width, and the remaining space will be split equally between
the left and right margins.

Example

Use margin: auto:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

margin: auto;

border: 1px solid red;

</style>

</head>

<body>

<h2>Use of margin: auto</h2>

<p>You can set the margin property to auto to horizontally center the element within its container. The
element will then take up the specified width, and the remaining space will be split equally between the
left and right margins:</p>

<div>

This div will be horizontally centered because it has margin: auto;

</div>

</body>

</html>
CSS-80

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element
(<div>):

Example

Use of the inherit value:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid red;

margin-left: 100px;

p.ex1 {

margin-left: inherit;

</style>

</head>

<body>

<h2>Use of the inherit value</h2>

<p>Let the left margin be inherited from the parent element:</p>

<div>
CSS-81

<p class="ex1">This paragraph has an inherited left margin (from the div
element).</p>

</div>

</body>

</html>

CSS Margin Collapse

Sometimes two margins collapse into a single margin.

Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the
largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

Example
CSS-82

Demonstration of margin collapse:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

margin: 0 0 50px 0;

h2 {

margin: 20px 0 0 0;

</style>

</head>

<body>

<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top
margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px).
However, due to margin collapse, the actual margin ends up being 50px.</p>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

</body>

</html>

CSS Padding
CSS-83

Padding is used to create space around an element's content, inside of any defined borders.

<!DOCTYPE html>

<html>

<head>

<style>

div {

padding: 70px;

border: 1px solid #4CAF50;

</style>

</head>

<body>

<h2>CSS Padding</h2>

<div>This element has a padding of 70px.</div>

</body>

</html>

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined
borders.
CSS-84

With CSS, you have full control over the padding. There are properties for setting the padding for each
side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

 padding-top

 padding-right

 padding-bottom

 padding-left

All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.

 % - specifies a padding in % of the width of the containing element

 inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Example

Set different padding for all four sides of a <div> element:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

background-color: lightblue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}
CSS-85

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of
50px, and a left padding of 80px.</div>

</body>

</html>

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

 padding-top

 padding-right

 padding-bottom

 padding-left

So, here is how it works:

If the padding property has four values:

 padding: 25px 50px 75px 100px;

CSS-86

o top padding is 25px

o right padding is 50px

o bottom padding is 75px

o left padding is 100px

Example

Use the padding shorthand property with four values:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px 75px 100px;

background-color: lightblue;

</style>

</head>

<body>

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of
75px, and a left padding of 100px.</div>

</body>

</html>
CSS-87

If the padding property has three values:

 padding: 25px 50px 75px;

o top padding is 25px

o right and left paddings are 50px

o bottom padding is 75px

Example

Use the padding shorthand property with three values:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px 75px;

background-color: lightblue;

</style>

</head>

<body>

<h2>The padding shorthand property - 3 values</h2>

CSS-88

<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom
padding of 75px.</div>

</body>

</html>

If the padding property has two values:

 padding: 25px 50px;

o top and bottom paddings are 25px

o right and left paddings are 50px

Example

Use the padding shorthand property with two values:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px;

background-color: lightblue;

}
CSS-89

</style>

</head>

<body>

<h2>The padding shorthand property - 2 values</h2>

<div>This div element has a top and bottom padding of 25px, and a right and left padding of
50px.</div>

</body>

</html>

If the padding property has one value:

 padding: 25px;

o all four paddings are 25px

Example

Use the padding shorthand property with one value:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px;
CSS-90

background-color: lightblue;

</style>

</head>

<body>

<h2>The padding shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right padding of 25px.</div>

</body>

</html>

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion
inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width
of the element. This is often an undesirable result.

Example

Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will
be 350px (300px + 25px of left padding + 25px of right padding):
CSS-91

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

width: 300px;

background-color: yellow;

div.ex2 {

width: 300px;

padding: 25px;

background-color: lightblue;

</style>

</head>

<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>

<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the
CSS.</div>

</body>

</html>
CSS-92

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This
causes the element to maintain its actual width; if you increase the padding, the available content space
will decrease.

Example

Use the box-sizing property to keep the width at 300px, no matter the amount of padding:

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

width: 300px;

background-color: yellow;

div.ex2 {

width: 300px;

padding: 25px;

box-sizing: border-box;

background-color: lightblue;

</style>

</head>
CSS-93

<body>

<h2>Padding and element width - with box-sizing</h2>

<div class="ex1">This div is 300px wide.</div>

<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and
right padding, because of the box-sizing: border-box property.

</div>

</body>

</html>

CSS Height, Width and Max-width

 The CSS height and width properties are used to set the height and width of an element.
 The CSS max-width property is used to set the maximum width of an element.
CSS-94

<!DOCTYPE html>

<html>

<head>

<style>

div {

height: 50px;

width: 100%;

border: 1px solid #4CAF50;

</style>

</head>

<body>

<h2>CSS height and width properties</h2>

<div>This div element has a height of 50 pixels and a width of 100%.</div>

</body>

</html>

CSS Setting height and width

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

The height and width properties do not include padding, borders, or margins. It sets the height/width of
the area inside the padding, border, and margin of the element.
CSS-95

CSS height and width Values

The height and width properties may have the following values:

 auto - This is default. The browser calculates the height and width

 length - Defines the height/width in px, cm, etc.

 % - Defines the height/width in percent of the containing block

 initial - Sets the height/width to its default value

 inherit - The height/width will be inherited from its parent value

CSS height and width Examples

This element has a height of 200 pixels and a width of 50%

Example

Set the height and width of a <div> element:

<!DOCTYPE html>

<html>

<head>

<style>

div {

height: 200px;

width: 50%;

background-color: powderblue;

</style>

</head>

<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

CSS-96

</body>

</html>

This element has a height of 100 pixels and a width of 500 pixels.

Example

Set the height and width of another <div> element:

<!DOCTYPE html>

<html>

<head>

<style>

div {

height: 100px;

width: 500px;

background-color: powderblue;

</style>

</head>

<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 100px and a width of 500px.</div>

CSS-97

</body>

</html>

Note: Remember that the height and width properties do not include padding, borders, or margins! They
set the height/width of the area inside the padding, border, and margin of the element!

Setting max-width
 The max-width property is used to set the maximum width of an element.
 The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is default. Means that there is no maximum width).
 The problem with the <div> above occurs when the browser window is smaller than the width of
the element (500px). The browser then adds a horizontal scrollbar to the page.
 In this situation, using max-width will improve the browser's handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

Example

This <div> element has a height of 100 pixels and a max-width of 500 pixels:

<!DOCTYPE html>

<html>

<head>

<style>

div {

max-width: 500px;
CSS-98

height: 100px;

background-color: powderblue;

</style>

</head>

<body>

<h2>Set the max-width of an element</h2>

<div>This div element has a height of 100px and a max-width of 500px.</div>

<p>Resize the browser window to see the effect.</p>

</body>

</html>

CSS Box Model

CSS-99

All HTML elements can be considered as boxes.

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: content,
padding, borders and margins. The image below illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear

 Padding - Clears an area around the content. The padding is transparent

 Border - A border that goes around the padding and content

 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example

Demonstration of the box model:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

</style>

</head>

<body>
CSS-100

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px
green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</div>

</body>

</html>

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box
model works.

Important: When you set the width and height properties of an element with CSS, you just set the width
and height of the content area. To calculate the total width and height of an element, you must also
include the padding and borders.

Example

This <div> element will have a total width of 350px and a total height of 80px:
CSS-101

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 320px;

height: 50px;

padding: 10px;

border: 5px solid gray;

margin: 0;

</style>

</head>

<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">

<div>The picture above is 350px wide. The total width of this element is also 350px. The total
height of this element is 80px.</div>

</body>

</html>

Here is the calculation:

320px (width of content area) + 20px (left padding + right padding) + 10px (left border + right border)
= 350px (total width)
CSS-102

50px (height of content area) + 20px (top padding + bottom padding) + 10px (top border + bottom
border)
= 80px (total height)

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border

CSS Outline
CSS-103

An outline is a line drawn outside the element's border.

<!DOCTYPE html>

<html>

<head>

<style>

border: 2px solid black;

outline: #4CAF50 solid 10px;

margin: auto;

padding: 20px;

text-align: center;

</style>

</head>

<body>

<h2>CSS Outline</h2>

<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>

</html>

CSS Outline

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

CSS has the following outline properties:

 outline-style

 outline-color

 outline-width

 outline-offset

 outline

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and
may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total
width and height is not affected by the width of the outline.

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

 dotted - Defines a dotted outline

 dashed - Defines a dashed outline

 solid - Defines a solid outline

 double - Defines a double outline

 groove - Defines a 3D grooved outline

 ridge - Defines a 3D ridged outline

 inset - Defines a 3D inset outline

 outset - Defines a 3D outset outline

CSS-105

 none - Defines no outline

 hidden - Defines a hidden outline

The following example shows the different outline-style values:

Example

Demonstration of the different outline styles:

<!DOCTYPE html>

<html>

<head>

<style>

p {outline-color:red;}

[Link] {outline-style: dotted;}

[Link] {outline-style: dashed;}

[Link] {outline-style: solid;}

[Link] {outline-style: double;}

[Link] {outline-style: groove;}

[Link] {outline-style: ridge;}

[Link] {outline-style: inset;}

[Link] {outline-style: outset;}

</style>

</head>

<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline. The effect depends on the outline-color value.</p>

<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
CSS-106

<p class="inset">An inset outline. The effect depends on the outline-color value.</p>

<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>

</html>

CSS Outline Width

The outline-width property specifies the width of the outline, and can have one of the following values:

 thin (typically 1px)

 medium (typically 3px)

 thick (typically 5px)

 A specific size (in px, pt, cm, em, etc)

The following example shows some outlines with different widths:

<!DOCTYPE html>

<html>
CSS-107

<head>

<style>

p.ex1 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thin;

p.ex2 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: medium;

p.ex3 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thick;

p.ex4 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: 4px;

</style>

</head>
CSS-108

<body>

<h2>The outline-width Property</h2>

<p class="ex1">A thin outline.</p>

<p class="ex2">A medium outline.</p>

<p class="ex3">A thick outline.</p>

<p class="ex4">A 4px thick outline.</p>

</body>

</html>

CSS Outline Color

The outline-color property is used to set the color of the outline.
CSS-109

The color can be set by:

 name - specify a color name, like "red"

 HEX - specify a hex value, like "#ff0000"

 RGB - specify a RGB value, like "rgb(255,0,0)"

 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"

 invert - performs a color inversion (which ensures that the outline is visible, regardless of color
background)

The following example shows some different outlines with different colors. Also notice that these
elements also have a thin black border inside the outline:

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

border: 2px solid black;

outline-style: solid;

outline-color: red;

p.ex2 {

border: 2px solid black;

outline-style: dotted;

outline-color: blue;

p.ex3 {

border: 2px solid black;

outline-style: outset;

outline-color: grey;

</style>
CSS-110

</head>

<body>

<h2>The outline-color Property</h2>

<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>

<p class="ex3">An outset grey outline.</p>

</body>

</html>

HEX Values
The outline color can also be specified using a hexadecimal value (HEX):

<!DOCTYPE html>
CSS-111

<html>

<head>

<style>

p.ex1 {

border: 2px solid black;

outline-style: solid;

outline-color: #ff0000; /* red */

p.ex2 {

border: 2px solid black;

outline-style: dotted;

outline-color: #0000ff; /* blue */

p.ex3 {

border: 2px solid black;

outline-style: solid;

outline-color: #bbbbbb; /* grey */

</style>

</head>

<body>

<h2>The outline-color Property</h2>

<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>

<p class="ex3">A solid grey outline.</p>

</body>

</html>
CSS-112

RGB Values
Or by using RGB values:

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {

border: 2px solid black;

outline-style: solid;

outline-color: rgb(255, 0, 0); /* red */

p.ex2 {

border: 2px solid black;

CSS-113

outline-style: dotted;

outline-color: rgb(0, 0, 255); /* blue */

p.ex3 {

border: 2px solid black;

outline-style: solid;

outline-color: rgb(187, 187, 187); /* grey */

</style>

</head>

<body>

<h2>The outline-color Property</h2>

<p>The color of the outline can also be specified using RGB values:</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>

<p class="ex3">A solid grey outline.</p>

</body>

</html>

HSL Values
You can also use HSL values:

<!DOCTYPE html>
CSS-114

<html>

<head>

<style>

p.ex1 {

border: 2px solid black;

outline-style: solid;

outline-color: hsl(0, 100%, 50%); /* red */

p.ex2 {

border: 2px solid black;

outline-style: dotted;

outline-color: hsl(240, 100%, 50%); /* blue */

p.ex3 {

border: 2px solid black;

outline-style: solid;

outline-color: hsl(0, 0%, 73%); /* grey */

</style>

</head>

<body>

<h2>The outline-color Property</h2>

<p>The color of the outline can also be specified using HSL values:</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>

<p class="ex3">A solid grey outline.</p>

</body>

</html>
CSS-115

CSS Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

 outline-width

 outline-style (required)

 outline-color

The outline property is specified as one, two, or three values from the list above. The order of the values
does not matter.

The following example shows some outlines specified with the shorthand outline property:

<!DOCTYPE html>

<html>

<head>

<style>

p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}

p.ex3 {outline: 5px solid yellow;}

CSS-116

p.ex4 {outline: thick ridge pink;}

</style>

</head>

<body>

<h2>The outline Property</h2>

<p class="ex1">A dashed outline.</p>

<p class="ex2">A dotted red outline.</p>

<p class="ex3">A 5px solid yellow outline.</p>

<p class="ex4">A thick ridge pink outline.</p>

</body>

</html>

CSS Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space
between an element and its outline is transparent.
CSS-117

The following example specifies an outline 15px outside the border edge:

<!DOCTYPE html>

<html>

<head>

<style>

margin: 30px;

border: 1px solid black;

outline: 1px solid red;

outline-offset: 15px;

</style>

</head>

<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>

</html>

The following example shows that the space between an element and its outline is transparent:

<!DOCTYPE html>
CSS-118

<html>

<head>

<style>

margin: 30px;

background:yellow;

border: 1px solid black;

outline: 1px solid red;

outline-offset: 15px;

</style>

</head>

<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline of 15px outside the border edge.</p>

</body>

</html>

CSS Text
CSS-119

CSS has a lot of properties for formatting text.

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid gray;

padding: 8px;

h1 {

text-align: center;

text-transform: uppercase;

color: #4CAF50;

text-indent: 50px;

text-align: justify;

letter-spacing: 3px;

text-decoration: none;

color: #008CBA;

</style>

</head>

<body>

<div>

<h1>text formatting</h1>
CSS-120

<p>This text is styled with some of the text formatting properties. The heading uses the
text-align, text-transform, and color properties.

The paragraph is indented, aligned, and the space between characters is specified. The
underline is removed from this colored

<a target="_blank" href="[Link]?filename=trycss_text">"Try it Yourself"</a>

link.</p>

</div>

</body>

</html>

Text Color
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)"

Look at CSS Color Values for a complete list of possible color values.

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

<!DOCTYPE html>

<html>

<head>
CSS-121

<style>

body {

color: blue;

h1 {

color: green;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page
is defined in the body selector.</p>

<p>Another paragraph.</p>

</body>

</html>

Text Color and Background Color

In this example, we define both the background-color property and the color property:

<!DOCTYPE html>
CSS-122

<html>

<head>

<style>

body {

background-color: lightgrey;

color: blue;

h1 {

background-color: black;

color: white;

div {

background-color: blue;

color: white;

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>This page has a grey background color and a blue text.</p>

</body>

</html>
CSS-123

CSS Text Alignment

Text Alignment and Text Direction

In this chapter you will learn about the following properties:

 text-align

 text-align-last

 direction

 unicode-bidi

 vertical-align

Text Alignment
The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if
text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Example

<!DOCTYPE html>

<html>
CSS-124

<head>

<style>

h1 {

text-align: center;

h2 {

text-align: left;

h3 {

text-align: right;

</style>

</head>

<body>

<h1>Heading 1 (center)</h1>

<h2>Heading 2 (left)</h2>

<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>

</html>
CSS-125

When the text-align property is set to "justify", each line is stretched so that every line has equal width,
and the left and right margins are straight (like in magazines and newspapers):

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 10px;

width: 200px;

height: 200px;

text-align: justify;

</style>

</head>

<body>

<h1>Example text-align: justify</h1>

<p>The text-align: justify; value stretches the lines so that each line has equal width (like in
newspapers and magazines).</p>

<div>
CSS-126

In my younger and more vulnerable years my father gave me some advice that I've been
turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told
me, 'just remember that all the people in this world haven't had the advantages that
you've had.'

</div>

</body>

</html>

Text Align Last

The text-align-last property specifies how to align the last line of a text.

Example

Align the last line of text in three <p> elements:

<!DOCTYPE html>

<html>

<head>

<style>

p.a {

text-align-last: right;

p.b {

text-align-last: center;
CSS-127

p.c {

text-align-last: justify;

</style>

</head>

<body>

<h1>The text-align-last Property</h1>

<h2>text-align-last: right:</h2>

<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut.</p>

<h2>text-align-last: center:</h2>

<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut.</p>

<h2>text-align-last: justify:</h2>

<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut.</p>

</body>

</html>

Text Direction
The direction and unicode-bidi properties can be used to change the text direction of an element:

<!DOCTYPE html>

<html>
CSS-128

<head>

<style>

p.ex1 {

direction: rtl;

unicode-bidi: bidi-override;

</style>

</head>

<body>

<p>This is the default text direction.</p>

<p class="ex1">This is right-to-left text direction.</p>

</body>

</html>

Vertical Alignment
The vertical-align property sets the vertical alignment of an element.

<!DOCTYPE html>

<html>
CSS-129

<head>

<style>

img.a {

vertical-align: baseline;

img.b {

vertical-align: text-top;

img.c {

vertical-align: text-bottom;

img.d {

vertical-align: sub;

img.e {

vertical-align: super;

</style>

</head>

<body>

<h1>The vertical-align Property</h1>

<h2>vertical-align: baseline (default):</h2>

<p>An <img class="a" src="[Link]" width="9" height="9"> image with a default

alignment.</p>

<h2>vertical-align: text-top:</h2>

<p>An <img class="b" src="[Link]" width="9" height="9"> image with a text-top

alignment.</p>

<h2>vertical-align: text-bottom:</h2>
CSS-130

<p>An <img class="c" src="[Link]" width="9" height="9"> image with a text-bottom

alignment.</p>

<h2>vertical-align: sub:</h2>

<p>An <img class="d" src="[Link]" width="9" height="9"> image with a sub

alignment.</p>

<h2>vertical-align: sup:</h2>

<p>An <img class="e" src="[Link]" width="9" height="9"> image with a super

alignment.</p>

</body>

</html>

CSS Text Decoration

Text Decoration
In this chapter you will learn about the following properties:

 text-decoration-line
CSS-131

 text-decoration-color

 text-decoration-style

 text-decoration-thickness

 text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both over and
under a text.

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration: overline;

h2 {

text-decoration: line-through;

h3 {

text-decoration: underline;

[Link] {

text-decoration: overline underline;

</style>
CSS-132

</head>

<body>

<h1>Overline text decoration</h1>

<h2>Line-through text decoration</h2>

<h3>Underline text decoration</h3>

<p class="ex">Overline and underline text decoration.</p>

<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this

often confuses

the reader.</p>

</body>

</html>

Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.

Example

<!DOCTYPE html>
CSS-133

<html>

<head>

<style>

h1 {

text-decoration-line: overline;

text-decoration-color: red;

h2 {

text-decoration-line: line-through;

text-decoration-color: blue;

h3 {

text-decoration-line: underline;

text-decoration-color: green;

text-decoration-line: overline underline;

text-decoration-color: purple;

</style>

</head>

<body>

<h1>Overline text decoration</h1>

<h2>Line-through text decoration</h2>

<h3>Underline text decoration</h3>

<p>Overline and underline text decoration.</p>

</body>

</html>
CSS-134

Specify a Style for the Decoration Line

The text-decoration-style property is used to set the style of the decoration line.

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration-line: underline;

text-decoration-style: solid; /* this is default */

h2 {

text-decoration-line: underline;

text-decoration-style: double;

}
CSS-135

h3 {

text-decoration-line: underline;

text-decoration-style: dotted;

p.ex1 {

text-decoration-line: underline;

text-decoration-style: dashed;

p.ex2 {

text-decoration-line: underline;

text-decoration-style: wavy;

p.ex3 {

text-decoration-line: underline;

text-decoration-color: red;

text-decoration-style: wavy;

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<p class="ex1">A paragraph.</p>

<p class="ex2">Another paragraph.</p>

<p class="ex3">Another paragraph.</p>

</body>

</html>
CSS-136

Specify the Thickness for the Decoration Line

The text-decoration-thickness property is used to set the thickness of the decoration line.

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration-line: underline;

text-decoration-thickness: auto; /* this is default */

h2 {

text-decoration-line: underline;

text-decoration-thickness: 5px;

h3 {

text-decoration-line: underline;

text-decoration-thickness: 25%;
CSS-137

text-decoration-line: underline;

text-decoration-color: red;

text-decoration-style: double;

text-decoration-thickness: 5px;

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<p>A paragraph.</p>

</body>

</html>

The Shorthand Property

The text-decoration property is a shorthand property for:

 text-decoration-line (required)

 text-decoration-color (optional)
CSS-138

 text-decoration-style (optional)

 text-decoration-thickness (optional)

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration: underline;

h2 {

text-decoration: underline red;

h3 {

text-decoration: underline red double;

text-decoration: underline red double 5px;

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<p>A paragraph.</p>

</body>

</html>
CSS-139

CSS Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each
word:

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

text-transform: uppercase;

[Link] {

text-transform: lowercase;

[Link] {

text-transform: capitalize;
CSS-140

</style>

</head>

<body>

<h1>Using the text-transform property</h1>

<p class="uppercase">This text is transformed to uppercase.</p>

<p class="lowercase">This text is transformed to lowercase.</p>

<p class="capitalize">This text is capitalized.</p>

</body>

</html>

CSS Text Spacing

Text Spacing

In this chapter you will learn about the following properties:

 text-indent
CSS-141

 letter-spacing

 line-height

 word-spacing

 white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

<!DOCTYPE html>

<html>

<head>

<style>

text-indent: 50px;

</style>

</head>

<body>

<h1>Using text-indent</h1>

<p>In my younger and more vulnerable years my father gave me some advice that I've been
turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just
remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>

</html>

Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example
CSS-142

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

letter-spacing: 5px;

h3 {

letter-spacing: -2px;

</style>

</head>

<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>

<h3>This is heading 2</h3>

</body>

</html>

Line Height
The line-height property is used to specify the space between lines:

<!DOCTYPE html>
CSS-143

<html>

<head>

<style>

[Link] {

line-height: 0.7;

[Link] {

line-height: 1.8;

</style>

</head>

<body>

<h1>Using line-height</h1>

<p>

This is a paragraph with a standard line-height.<br>

The default line height in most browsers is about 110% to 120%.<br>

</p>

This is a paragraph with a smaller line-height.<br>

</p>

This is a paragraph with a bigger line-height.<br>

</p>

</body>

</html>
CSS-144

Word Spacing
The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

word-spacing: 10px;

[Link] {

word-spacing: -2px;

</style>

</head>

<body>

<h1>Using word-spacing</h1>

<p>This is a paragraph with normal word spacing.</p>

<p class="one">This is a paragraph with larger word spacing.</p>

CSS-145

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>

</html>

White Space
The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

<!DOCTYPE html>

<html>

<head>

<style>

white-space: nowrap;

</style>

</head>

<body>

<h1>Using white-space</h1>

<p>
CSS-146

This is some text that will not wrap.

</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>

</html>

CSS Text Shadow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Text shadow effect!

CSS-147

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

Next, add a color (red) to the shadow:

<!DOCTYPE html>

<html>

<head>
CSS-148

<style>

h1 {

text-shadow: 2px 2px red;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

Then, add a blur effect (5px) to the shadow:

<!DOCTYPE html>

<html>

<head>
CSS-149

<style>

h1 {

text-shadow: 2px 2px 5px red;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

More Text Shadow Examples

Example 1

Text-shadow on a white text:

<!DOCTYPE html>
CSS-150

<html>

<head>

<style>

h1 {

color: white;

text-shadow: 2px 2px 4px #000000;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

Example 2

Text-shadow with red neon glow:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 0 0 3px #FF0000;

</style>

</head>

<body>

<h1>Text-shadow with red neon glow!</h1>

</body>
CSS-151

</html>

Example 3

Text-shadow with red and blue neon glow:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

</style>

</head>

<body>

<h1>Text-shadow with red and blue neon glow!</h1>

</body>

</html>

Example 4

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

</style>
CSS-152

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

CSS Fonts
Choosing the right font for your website is important!

Font Selection is Important

 Choosing the right font has a huge impact on how the readers experience a website.
CSS-153

 The right font can create a strong identity for your brand.
 Using a font that is easy to read is important. The font adds value to your text. It is also important
to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.

2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.

3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.

4. Cursive fonts imitate human handwriting.

5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

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

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

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

Tip: The font-family property should hold several font names as a "fallback" system, to ensure maximum
compatibility between browsers/operating systems. 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). The
font names should be separated with a comma. Read more about fallback fonts in the next chapter.

Example

Specify some different fonts for three paragraphs:

<!DOCTYPE html>

<html>
CSS-154

<head>

<style>

.p1 {

font-family: "Times New Roman", Times, serif;

.p2 {

font-family: Arial, Helvetica, sans-serif;

.p3 {

font-family: "Lucida Console", "Courier New", monospace;

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>

<p class="p2">This is a paragraph, shown in the Arial font.</p>

<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>

</html>
CSS-155

CSS Web Safe Fonts

What are Web Safe Fonts?

Web safe fonts are fonts that are universally installed across all browsers and devices.

Fallback Fonts

 However, there are no 100% completely web safe fonts. There is always a chance that a font is
not found or is not installed properly.
 Therefore, it is very important to always use fallback fonts.
 This means that you should add a list of similar "backup fonts" in the font-family property. If the
first font does not work, the browser will try the next one, and the next one, and so on. Always
end the list with a generic font family name.

Example

Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups,
in case the first one is not found.

<!DOCTYPE html>

<html>

<head>

<style>

font-family: Tahoma, Verdana, sans-serif;

}
CSS-156

</style>

</head>

<body>

<h1>CSS Fallback Fonts</h1>

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

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

</body>

</html>

Best Web Safe Fonts for HTML and CSS

The following list are the best web safe fonts for HTML and CSS:

 Arial (sans-serif)

 Verdana (sans-serif)

 Tahoma (sans-serif)

 Trebuchet MS (sans-serif)

 Times New Roman (serif)

 Georgia (serif)

 Garamond (serif)
CSS-157

 Courier New (monospace)

 Brush Script MT (cursive)

Note: Before you publish your website, always check how your fonts appear on different browsers and
devices, and always use fallback fonts!

Arial (sans-serif)

Arial is the most widely used font for both online and printed media. Arial is also the default font in
Google Docs.

Arial is one of the safest web fonts, and it is available on all major operating systems.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

Verdana (sans-serif)

Verdana is a very popular font. Verdana is easily readable even for small font sizes.

<!DOCTYPE html>

<html>
CSS-158

<head>

<style>

body {

font-family: Verdana, sans-serif;

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

Tahoma (sans-serif)

The Tahoma font has less space between the characters.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Tahoma, sans-serif;

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

CSS-159

</body>

</html>

Trebuchet MS (sans-serif)

Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile
operating systems.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: 'Trebuchet MS', sans-serif;

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

Times New Roman (serif)

Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in
many newspapers and "news" websites. It is also the primary font for Windows devices and applications.

<!DOCTYPE html>
CSS-160

<html>

<head>

<style>

body {

font-family: 'Times New Roman', serif;

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

Georgia (serif)

Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for
mobile-responsive design.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Georgia, serif;

</style>

</head>

<body>
CSS-161

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

Garamond (serif)

Garamond is a classical font used for many printed books. It has a timeless look and good readability.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Garamond, serif;

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

Courier New (monospace)

Courier New is the most widely used monospace serif font. Courier New is often used with coding
displays, and many email providers use it as their default font. Courier New is also the standard font for
movie screenplays.
CSS-162

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: 'Courier New', monospace;

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

Brush Script MT (cursive)

The Brush Script MT font was designed to mimic handwriting. It is elegant and sophisticated, but can be
hard to read. Use it carefully.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: 'Brush Script MT', cursive;

</style>

</head>
CSS-163

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>

</body>

</html>

CSS Font Style

Font Style

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

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

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

font-style: normal;

[Link] {

font-style: italic;

[Link] {

font-style: oblique;

}
CSS-164

</style>

</head>

<body>

<h1>The font-style property</h1>

<p class="normal">This is a paragraph in normal style.</p>

<p class="italic">This is a paragraph in italic style.</p>

<p class="oblique">This is a paragraph in oblique style.</p>

</body>

</html>

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

Example

<!DOCTYPE html>
CSS-165

<html>

<head>

<style>

[Link] {

font-weight: normal;

[Link] {

font-weight: lighter;

[Link] {

font-weight: bold;

[Link] {

font-weight: 900;

</style>

</head>

<body>

<h1>The font-weight property</h1>

<p class="normal">This is a paragraph.</p>

<p class="light">This is a paragraph.</p>

<p class="thick">This is a paragraph.</p>

<p class="thicker">This is a paragraph.</p>

</body>

</html>
CSS-166

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.

Example

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {

font-variant: normal;

[Link] {

font-variant: small-caps;

</style>

</head>

<body>

<h1>The font-variant property</h1>

CSS-167

<p class="normal">My name is Hege Refsnes.</p>

<p class="small">My name is Hege Refsnes.</p>

</body>

</html>

CSS Font Size

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
CSS-168

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).

Set Font Size With Pixels

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

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

font-size: 40px;

h2 {

font-size: 30px;

font-size: 14px;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>
CSS-169

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

</body>

</html>

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

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

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

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

font-size: 2.5em; /* 40px/16=2.5em */

CSS-170

h2 {

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

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

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

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

<p>Specifying the font-size in em allows all major browsers to resize the text.

Unfortunately, there is still a problem with older versions of IE. When resizing the text, it
becomes larger/smaller than it should.</p>

</body>

</html>

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 Internet Explorer. The text becomes larger
than it should when made larger, and smaller than it should when made smaller.
CSS-171

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

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-size: 100%;

h1 {

font-size: 2.5em;

h2 {

font-size: 1.875em;

font-size: 0.875em;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

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

<p>Specifying the font-size in percent and em displays the same size in all major browsers, and
allows all browsers to resize the text!</p>

</body>
CSS-172

</html>

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

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:

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10%
of the viewport width.</p>

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

</body>

</html>
CSS-173

CSS Icons
Icons can easily be added to your HTML page, by using an icon library.

How To Add Icons

CSS-174

 The simplest way to add an icon to your HTML page, is with an icon library, such as Font
Awesome.
 Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
 All the icons in the icon libraries below, are scalable vectors that can be customized with CSS
(size, color, shadow, etc.)

Font Awesome Icons

To use the Font Awesome icons, go to [Link], sign in, and get a code to add in
the <head> section of your HTML page:

<script src="[Link] crossorigin="anonymous"></script>

Read more about how to get started with Font Awesome in our Font Awesome 5 tutorial.

Note: No downloading or installation is required!

Example

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="[Link] crossorigin="anonymous"></script>

</head>

<body>

<h1>Font Awesome icon library</h1>

<p>Some Font Awesome icons:</p>

<i class="fas fa-cloud"></i>

<i class="fas fa-heart"></i>

<i class="fas fa-car"></i>

<i class="fas fa-file"></i>

<i class="fas fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>

CSS-175

<i class="fas fa-cloud" style="font-size:24px;"></i>

<i class="fas fa-cloud" style="font-size:36px;"></i>

<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>

<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>

</html>

For a complete reference of all Font Awesome icons, visit our Icon Reference.

Bootstrap Icons

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="[Link]

Note: No downloading or installation is required!

Example
CSS-176

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="[Link]

</head>

<h1>Bootstrap icon library</h1>

<p>Some Bootstrap icons:</p>

<i class="glyphicon glyphicon-cloud"></i>

<i class="glyphicon glyphicon-remove"></i>

<i class="glyphicon glyphicon-user"></i>

<i class="glyphicon glyphicon-envelope"></i>

<i class="glyphicon glyphicon-thumbs-up"></i>

<p>Styled Bootstrap icons (size and color):</p>

<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>

<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>

<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>

<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>

</html>
CSS-177

Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="[Link]

Note: No downloading or installation is required!

Example

<!DOCTYPE html>

<html>

<head>

<title>Google Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="[Link]

</head>

<body>

<h1>Google icon library</h1>

<p>Some Google icons:</p>

<i class="material-icons">cloud</i>

<i class="material-icons">favorite</i>

<i class="material-icons">attachment</i>

<i class="material-icons">computer</i>

<i class="material-icons">traffic</i>
CSS-178

<p>Styled Google icons (size and color):</p>

<i class="material-icons" style="font-size:24px;">cloud</i>

<i class="material-icons" style="font-size:36px;">cloud</i>

<i class="material-icons" style="font-size:48px;color:red;">cloud</i>

<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>

</html>

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

Styling Links
CSS-179

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

Example

<!DOCTYPE html>

<html>

<head>

<style>

color: hotpink;

</style>

</head>

<body>

<h2>Style a link with a color</h2>

<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>

</body>

</html>
CSS-180

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

<!DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;

/* visited link */

a:visited {

color: green;

}
CSS-181

/* mouse over link */

a:hover {

color: hotpink;

/* selected link */

a:active {

color: blue;

</style>

</head>

<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>

</html>
CSS-182

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

Text Decoration

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

Example

<!DOCTYPE html>

<html>

<head>
CSS-183

<style>

a:link {

text-decoration: none;

a:visited {

text-decoration: none;

a:hover {

text-decoration: underline;

a:active {

text-decoration: underline;

</style>

</head>

<body>

<h2>Styling a link with text-decoration property</h2>

<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>

</html>
CSS-184

Background Color

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

Example

<!DOCTYPE html>

<html>

<head>

<style>
CSS-185

a:link {

background-color: yellow;

a:visited {

background-color: cyan;

a:hover {

background-color: lightgreen;

a:active {

background-color: hotpink;

</style>

</head>

<body>

<h2>Styling a link with background-color property</h2>

<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>

</html>
CSS-186

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to
display links as boxes/buttons:

Example

<!DOCTYPE html>

<html>

<head>

<style>
CSS-187

a:link, a:visited {

background-color: #f44336;

color: black;

padding: 14px 25px;

text-align: center;

text-decoration: none;

display: inline-block;

a:hover, a:active {

background-color: red;

</style>

</head>

<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>

<a href="[Link]" target="_blank">This is a link</a>

</body>

</html>
CSS-188

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

<!DOCTYPE html>

<html>

<head>

<style>

[Link]:link {color:#ff0000;}

[Link]:visited {color:#0000ff;}

[Link]:hover {color:#ffcc00;}

[Link]:link {color:#ff0000;}

[Link]:visited {color:#0000ff;}

[Link]:hover {font-size:150%;}

[Link]:link {color:#ff0000;}

[Link]:visited {color:#0000ff;}
CSS-189

[Link]:hover {background:#66ff66;}

[Link]:link {color:#ff0000;}

[Link]:visited {color:#0000ff;}

[Link]:hover {font-family:monospace;}

[Link]:link {color:#ff0000;text-decoration:none;}

[Link]:visited {color:#0000ff;text-decoration:none;}

[Link]:hover {text-decoration:underline;}

</style>

</head>

<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="[Link]" target="_blank">This link changes

color</a></b></p>

<p><b><a class="two" href="[Link]" target="_blank">This link changes

font-size</a></b></p>

<p><b><a class="three" href="[Link]" target="_blank">This link changes background-

color</a></b></p>

<p><b><a class="four" href="[Link]" target="_blank">This link changes

font-family</a></b></p>

<p><b><a class="five" href="[Link]" target="_blank">This link changes text-

decoration</a></b></p>

</body>

</html>

Example

Another example of how to create link boxes/buttons:

<!DOCTYPE html>

<html>

<head>

<style>
CSS-190

a:link, a:visited {

background-color: white;

color: black;

border: 2px solid green;

padding: 10px 20px;

text-align: center;

text-decoration: none;

display: inline-block;

a:hover, a:active {

background-color: green;

color: white;

</style>

</head>

<body>

<h2>Link Button</h2>

<a href="[Link]" target="_blank">This is a link</a>

</body>

</html>

Example

This example demonstrates the different types of cursors (can be useful for links):

<!DOCTYPE html>

<html>

<body>

<h2>The cursor Property</h2>

<p>Mouse over the words to change the cursor.</p>

<span style="cursor:auto">auto</span><br>
CSS-191

<span style="cursor:crosshair">crosshair</span><br>

<span style="cursor:default">default</span><br>

<span style="cursor:e-resize">e-resize</span><br>

<span style="cursor:n-resize">n-resize</span><br>

<span style="cursor:ne-resize">ne-resize</span><br>

<span style="cursor:nw-resize">nw-resize</span><br>

<span style="cursor:pointer">pointer</span><br>

<span style="cursor:progress">progress</span><br>

<span style="cursor:s-resize">s-resize</span><br>

<span style="cursor:se-resize">se-resize</span><br>

<span style="cursor:sw-resize">sw-resize</span><br>

<span style="cursor:w-resize">w-resize</span><br>

</body>

</html>

WD Unit 3 (A)
No ratings yet
WD Unit 3 (A)
39 pages
HTML Part 3 CSS
No ratings yet
HTML Part 3 CSS
59 pages
Unit Iii
No ratings yet
Unit Iii
46 pages
CSS
100% (1)
CSS
264 pages
CSSPDF
No ratings yet
CSSPDF
38 pages
Chapter Three CSS
No ratings yet
Chapter Three CSS
12 pages
CSS Basics for Beginners
No ratings yet
CSS Basics for Beginners
15 pages
Unit 3 CSS
No ratings yet
Unit 3 CSS
11 pages
CSS Introduction, Syntax, Selectors
No ratings yet
CSS Introduction, Syntax, Selectors
21 pages
What Is CSS
No ratings yet
What Is CSS
15 pages
What Is CSS
No ratings yet
What Is CSS
15 pages
CSS Types Properties
No ratings yet
CSS Types Properties
18 pages
Introduction to CSS Basics and Usage
No ratings yet
Introduction to CSS Basics and Usage
37 pages
Css Tutorial
No ratings yet
Css Tutorial
65 pages
What Is CSS?
No ratings yet
What Is CSS?
19 pages
Introduction To CSS
No ratings yet
Introduction To CSS
17 pages
CSS Notes
No ratings yet
CSS Notes
61 pages
Introduction To CSS
No ratings yet
Introduction To CSS
250 pages
CSS Introduction
No ratings yet
CSS Introduction
26 pages
Week 5
No ratings yet
Week 5
35 pages
CSS Notes
100% (2)
CSS Notes
38 pages
Introduction To CSS - Prelim
No ratings yet
Introduction To CSS - Prelim
9 pages
Cascading Stylesheet
No ratings yet
Cascading Stylesheet
30 pages
Css 1
No ratings yet
Css 1
108 pages
CSS Experiment
No ratings yet
CSS Experiment
18 pages
CSS Basics: Introduction and Usage
No ratings yet
CSS Basics: Introduction and Usage
101 pages
Comprehensive CSS Guide by W3Schools
No ratings yet
Comprehensive CSS Guide by W3Schools
566 pages
Understanding CSS Class Precedence
No ratings yet
Understanding CSS Class Precedence
49 pages
CSS Reading Material 2025
No ratings yet
CSS Reading Material 2025
30 pages
Cssnotes
No ratings yet
Cssnotes
24 pages
Css Part1 CHP 4 Hamid
No ratings yet
Css Part1 CHP 4 Hamid
56 pages
Web Tech (Third Unit)
No ratings yet
Web Tech (Third Unit)
72 pages
CSS JS 18 05 25
No ratings yet
CSS JS 18 05 25
75 pages
What Is CSS?
No ratings yet
What Is CSS?
4 pages
CSS Syntax
No ratings yet
CSS Syntax
8 pages
WP Unit 3 CSS
No ratings yet
WP Unit 3 CSS
49 pages
Introduction To Cascading Style Sheets (CSS)
No ratings yet
Introduction To Cascading Style Sheets (CSS)
37 pages
Understanding CSS: Benefits and Syntax
No ratings yet
Understanding CSS: Benefits and Syntax
94 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
25 pages
CSS Notes
No ratings yet
CSS Notes
20 pages
CSSSS
No ratings yet
CSSSS
28 pages
CSS Selectors & Style Methods Guide
No ratings yet
CSS Selectors & Style Methods Guide
11 pages
Cascading Style Sheets Lecture 1
No ratings yet
Cascading Style Sheets Lecture 1
20 pages
Unit2 CSS
No ratings yet
Unit2 CSS
74 pages
CSS Basics and Best Practices
No ratings yet
CSS Basics and Best Practices
113 pages
Styling HTML With CSS
No ratings yet
Styling HTML With CSS
6 pages
CSS Tutorial: CSS Example With CSS Editor
No ratings yet
CSS Tutorial: CSS Example With CSS Editor
39 pages
Grade 8 Revision
No ratings yet
Grade 8 Revision
11 pages
Unit 3
No ratings yet
Unit 3
75 pages
Css (Cascading Style Sheet)
No ratings yet
Css (Cascading Style Sheet)
18 pages
CSS Chapter 1
No ratings yet
CSS Chapter 1
45 pages
Comprehensive CSS Tutorial Guide
No ratings yet
Comprehensive CSS Tutorial Guide
22 pages
Chap 2 CSS
No ratings yet
Chap 2 CSS
61 pages
Web UNIT-1
No ratings yet
Web UNIT-1
27 pages
CSS Basics and Techniques Guide
No ratings yet
CSS Basics and Techniques Guide
84 pages
CSS Styling and Selectors Guide
No ratings yet
CSS Styling and Selectors Guide
9 pages
Css XML DTD
No ratings yet
Css XML DTD
23 pages
Understanding CSS: Basics and Usage
No ratings yet
Understanding CSS: Basics and Usage
45 pages
Course 679ff8632c9796.37609257
No ratings yet
Course 679ff8632c9796.37609257
54 pages
Mba 4th Sem Mbaiit1 - Sad - Unit - 1 Notes
No ratings yet
Mba 4th Sem Mbaiit1 - Sad - Unit - 1 Notes
19 pages
KODAK PANDORA 9.0 Step and Repeat Software v4
No ratings yet
KODAK PANDORA 9.0 Step and Repeat Software v4
191 pages
1.7 Tools We Use in DevOps
No ratings yet
1.7 Tools We Use in DevOps
22 pages
Web Technology Course Overview
No ratings yet
Web Technology Course Overview
3 pages
P4 Control Statements in C
No ratings yet
P4 Control Statements in C
59 pages
EPB364 入門首選 Python程式設計附範例檔課本PDF
No ratings yet
EPB364 入門首選 Python程式設計附範例檔課本PDF
230 pages
Introduction to Object-Oriented Programming
No ratings yet
Introduction to Object-Oriented Programming
18 pages
Education Portal PHP
No ratings yet
Education Portal PHP
47 pages
Senior Software Developer Profile
No ratings yet
Senior Software Developer Profile
2 pages
Rolando Maradiaga Resume1
No ratings yet
Rolando Maradiaga Resume1
2 pages
Testing Engineer Perfect Resume
No ratings yet
Testing Engineer Perfect Resume
2 pages
LAMP, Web Design, SEO & Development Roles
No ratings yet
LAMP, Web Design, SEO & Development Roles
2 pages
FortiEDR Fabric Integration Guide Rev2
No ratings yet
FortiEDR Fabric Integration Guide Rev2
15 pages
Automation Development Approach for College
No ratings yet
Automation Development Approach for College
2 pages
Sahil CV
No ratings yet
Sahil CV
1 page
Table Control in BDC
No ratings yet
Table Control in BDC
9 pages
Class 1+2
No ratings yet
Class 1+2
11 pages
Pcep 30-02 Practice Test2
No ratings yet
Pcep 30-02 Practice Test2
26 pages
Difference Between C and C++
No ratings yet
Difference Between C and C++
3 pages
Learn NLP With Python
No ratings yet
Learn NLP With Python
39 pages
Introduction To CSS: There Are 3 Ways To Apply CSS To HTML
No ratings yet
Introduction To CSS: There Are 3 Ways To Apply CSS To HTML
16 pages
PLCopen - Mapping of OMAC PackML State Diagram To IEC 61131-3 - v8
No ratings yet
PLCopen - Mapping of OMAC PackML State Diagram To IEC 61131-3 - v8
4 pages
SQL Injection: Description
No ratings yet
SQL Injection: Description
3 pages
OpenLayers Map Tool Integration Guide
No ratings yet
OpenLayers Map Tool Integration Guide
3 pages
Java Control Flow & String Handling
No ratings yet
Java Control Flow & String Handling
19 pages
CTFL at
No ratings yet
CTFL at
4 pages
Web Scraping Cheat Sheet (2021), Python For Web Scraping by Frank Andrade Geek Culture - Medium
100% (3)
Web Scraping Cheat Sheet (2021), Python For Web Scraping by Frank Andrade Geek Culture - Medium
26 pages
Selenium Interview Q&A Guide
No ratings yet
Selenium Interview Q&A Guide
75 pages
Types of Functions in C Programming
No ratings yet
Types of Functions in C Programming
35 pages
AdminLTE 3 DataTables Overview
No ratings yet
AdminLTE 3 DataTables Overview
2 pages