Scribd
Upload
30 views

WD Unit 3 (A)

CSS (Cascading Style Sheets) is a language for styling web pages. It allows separation of document content from document presentation, including elements layout, variations for different devices/screens, and control styles for multiple pages from one stylesheet. CSS works by using selectors to point to HTML elements and declaration blocks to set properties that control the element's display.

Uploaded by

Nitish Chandra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

WD Unit 3 (A)

CSS (Cascading Style Sheets) is a language for styling web pages. It allows separation of document content from document presentation, including elements layout, variations for different devices/screens, and control styles for multiple pages from one stylesheet. CSS works by using selectors to point to HTML elements and declaration blocks to set properties that control the element's display.

Uploaded by

Nitish Chandra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

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.

<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
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 Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by
changing just one file!

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

 p is a selector in CSS (it points to the HTML element you want to style:
<p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

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:

p {
text-align: center;
color: red;
}

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.

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

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

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</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>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}

p.large {
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>

The CSS Universal Selector

The universal selector (*) selects all HTML elements 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>

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):
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

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

To group selectors, separate each selector with a comma.

h1, h2, p {
text-align: center;
color: red;
}

How To Add CSS


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.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

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

</body>
</html>

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 "mystyle.css" file looks:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

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.

<!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>

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.

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>

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.

Assume that an external style sheet has the following style for the <h1>
element:

h1 {
color: navy;
}

Then, assume that an internal style sheet also has the following style for the
<h1> element:
h1 {
color: orange;
}

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

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.

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<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 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 */:

You can add comments wherever you want in the code:

<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
p{
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>

You can add comments wherever you want in the code:

Example
p {
color: red; /* Set text color to red */
}

Comments can also span multiple lines:

Example
/* This is
a multi-line
comment */

p {
color: red;
}

CSS Backgrounds
CSS background-color

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

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

 a valid color name - like "red"


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

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;
}
div.first {
opacity: 0.1;
}

div.second {
opacity: 0.3;
}

div.third {
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>

<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>

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.

CSS Backgrounds
The CSS background properties are used to add background effects for
elements.
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

CSS Background Image


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

By default, the image is repeated so it covers the entire element.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("abc.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</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:

p {
background-image: url("xyz.gif");
}
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:

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


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

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("ab.png");
background-repeat: repeat-y;
}
</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-position
The background-position property is used to specify the position of the
background image.

body {
background-image: url("abc.png");
background-repeat: no-repeat;
background-position: right top;
}
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):

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
/* background-attachment: fixed; */
}
</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 is fixed. Try to scroll down the page.</p>


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

</body>
</html>

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

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

CSS background - Shorthand property


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

Instead of writing:

body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Use the shorthand property to set the background properties in one
declaration:

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

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

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

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

CSS Border Width


The border-width property specifies the width of the four borders.
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:

Demonstration of the different border widths:

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

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

p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom
and 35px left */
}
CSS Border Color
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}

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

p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue
bottom and yellow left */
}

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

Example
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}

RGB Values
Or by using RGB values:
Example
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}

HSL Values

You can also use HSL values:

Example
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}

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

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

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

p {
border: 5px solid red;
}

CSS Rounded Borders


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

p {
border: 2px solid red;
border-radius: 5px;
}
CSS Margins
The CSS margin properties are used to create space around elements, outside of
any defined borders.

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.

<!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;
}
</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


p {
margin: 25px 50px 75px 100px;
}

If the margin property has three values:

 margin: 25px 50px 75px;


o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

The auto Value


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.

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

The inherit Value


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

div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}

CSS Padding

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

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.


div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

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;


o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

div {
padding: 25px 50px 75px 100px;
}

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

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

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.

Using max-width instead, in this situation, 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!

Note: If you for some reason use both the width property and the max-
width property on the same element, and the value of the width property is
larger than the max-width property; the max-width property will be used (and
the width property will be ignored).

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: margins, borders, padding, and the actual content. 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.

This <div> element will have a total width of 350px:

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to


make the element "stand out".

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
 none - Defines no outline
 hidden - Defines a hidden outline

The following example shows the different outline-style values:

p.dotted {outline-style: dotted;}


p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
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:

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;
}
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.

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

p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

CSS Text
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.

body {
color: blue;
}

h1 {
color: green;
}

Text Color and Background Color

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


the color property:
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}

CSS 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):

h1 {
text-align: center;
}

h2 {
text-align: left;
}
h3 {
text-align: right;
}

div {
text-align: justify;
}

Text Align Last


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

p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}

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

p {
direction: rtl;
unicode-bidi: bidi-override;
}

Vertical Alignment

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

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;
}

CSS Text Decoration


In this chapter you will learn about the following properties:

 text-decoration-line
 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.

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}

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.

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;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}

The Shorthand Property

The text-decoration property is a shorthand property for:

 text-decoration-line (required)
 text-decoration-color (optional)
 text-decoration-style (optional)
 text-decoration-thickness (optional)
A Small Tip
All links in HTML are underlined by default. Sometimes you see that links are
styled with no underline. The text-decoration: none; is used to remove the
underline from links, like this:

a {
text-decoration: none;
}

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:

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

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

 text-indent
 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:
p {
text-indent: 50px;
}

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:

h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}

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

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

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:

p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}

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:

p {
white-space: nowrap;
}

<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>
<p>Try to remove the white-space property to see the difference!</p>
</body>
</html>

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!


h1 {
text-shadow: 2px 2px;
}

add a color (red) to the shadow:


h1 {
text-shadow: 2px 2px red;
}

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

h1 {
text-shadow: 2px 2px 5px red;
}

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

You might also like