CSS Syntax: For Example, The Headline Color Can Be Defined As

CSS Syntax
CSS is composed of style rules that the browser interprets and then applies to the
corresponding elements in your document.
A style rule has three parts: selector, property, and value.
For example, the headline color can be defined as:

h1 { color: orange; }
CSS
Try it Yourself
Where: 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 property name and a value, separated by a colon.
Type Selectors
The most common and easy to understand selectors are type selectors. This selector targets
element types on the page.
For example, to target all the paragraphs on the page:

p{
color: red;
font-size:130%;
}
CSS
Try it Yourself
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly braces.
id and class Selectors
id selectors allow you to style an HTML element that has an id attribute, regardless of their
position in the document tree. Here is an example of an id selector:
The HTML:
<div id="intro">
 This paragraph is in the intro section.
</div>
 This paragraph is not in the intro section.
HTML
The CSS:
#intro {
color: white;
background-color: gray;
}
CSS
Try it Yourself
To select an element with a specific id, use a hash character, and then follow it with the id
of the element.
Result: Class
selectors work in a similar way. The major difference is that IDs can only be applied once
per page, while classes can be used as many times on a page as needed.
In the example below, both paragraphs having the class "first" will be affected by the CSS:
The HTML:
<div>
This is a paragraph
 This is the second paragraph. 
</div>
 This is not in the intro section
 The second paragraph is not in the intro section. 
HTML
The CSS:
.first {font-size: 200%;}
CSS
Try it Yourself
To select elements with a specific class, use a period character, followed by the name of the
class.
Do NOT start a class or id name with a number!
Descendant Selectors
These selectors are used to select elements that are descendants of another element. When
selecting levels, you can select as many levels deep as you need to.
For example, to target only elements in the first paragraph of the "intro" section:
The HTML:
<div id="intro">
This is a paragraph.
 This is the second paragraph. 
</div>
 This is not in the intro section.
 The second paragraph is not in the intro section. 
HTML
The CSS:
#intro .first em {
color: pink;
background-color:gray;
}
CSS
Try it Yourself
As a result, only the elements selected will be affected:
The descendant selector matches all elements that are descendants of a specified element.
Comments
Comments are used to explain your code, and may help you when you edit the source code
later. Comments are ignored by browsers.
A CSS comment look like this:

/* Comment goes here */
CSS
Example:
p{
color: green;
/* This is a comment */
font-size: 150%;
}
CSS
Try it Yourself
The comment does not appear in the browser:
Comments can also span multiple lines.
Cascade
The final appearance of a web page is a result of different styling rules.
The three main sources of style information that form a cascade are:
- The stylesheet created by the author of the page

- The browser's default styles
- Styles specified by the user
CSS is an acronym for Cascading Style Sheets.
Inheritance
Inheritance refers to the way properties flow through the page. A child element will usually
take on the characteristics of the parent element unless otherwise defined.
For example:
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>

This is a text inside the paragraph.

</body>
</html>
HTML
Result:
Since the paragraph tag (child element) is inside the body tag (parent element), it takes on
any styles assigned to the body tag.
The font-family Property
The font-family property specifies the font for an element.

There are two types of font family names:
- font family: a specific font family (like Times New Roman or Arial)
- generic family: a group of font families with a similar look (like Serif or Monospace)
Here is an example of different font styles:

The HTML:

This is a paragraph shown in serif font.


This is a paragraph shown in sans-serif font.


This is a paragraph shown in monospace font.


This is a paragraph shown in cursive font.


This is a paragraph shown in fantasy font.

HTML
The CSS:
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Helvetica, Arial, sans-serif;
}
p.monospace {
font-family: "Courier New", Courier, monospace;
}
p.cursive {
font-family: Florence, cursive;
}
p.fantasy {
font-family: Blippo, fantasy;
}
CSS
Try it Yourself
Result:
Separate each value with a comma to indicate that they are alternatives.
If the name of a font family is more than one word, it must be in quotation marks: "Times
New Roman".
Continue
The font-family Property
The font-family property should hold several font names as a "fallback" system. When
specifying a web font in a CSS style, add more than one font name, in order to avoid
unexpected behaviors. If the client computer for some reason doesn't have the one you
choose, it will try the next one.
It is a good practice to specify a generic font family, to let the browser pick a similar font in
the generic family, if no other fonts are available.
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
CSS
If the browser does not support the font Arial, it tries the next fonts (Helvetica Neue,
then Helvetica). If the browser doesn't have any of them, it will try the generic sans-serif.
Remember to use quotation marks if the font name consists of more than one word.
Well done!
The font-size Property
The font-size property sets the size of a font. One way to set the size of fonts on the web is
to use keywords. For example xx-small, small, medium, large, larger, etc.
The HTML:

Paragraph text set to be small


Paragraph text set to be medium


Paragraph text set to be large


Paragraph text set to be very large

HTML
The CSS:
p.small {
font-size: small;
}
p.medium {
font-size: medium;
}
p.large {
font-size: large;
}
p.xlarge {
font-size: x-large;
}
CSS
Try it Yourself
Result:
Keywords are useful if you do not want the user to be able to increase the size of the font
because it will adversely affect your site's appearance.
The font-size Property
You can also use numerical values in pixels or ems to manipulate font size.
Setting the font size in pixel values (px) is a good choice when you need pixel accuracy,
and it gives you full control over the text size.
The em size unit is another way to set the font size (em is a relative size unit). It allows all
major browsers to resize the text. If you haven't set the font size anywhere on the page, then
it is the browser default size, which is 16px.
To calculate the em size, just use the following formula: em = pixels / 16
For example:
h1 {
font-size: 20px;
}
CSS
Try it Yourself
h1 {
font-size: 1.25em;
}
CSS
Try it Yourself
Both of the examples will produce the same result in the browser, because 20/16=1.25em.
Try different combinations of text size and page zooming in a variety of browsers to ensure
that the text remains readable.
Well done!
Continue
The font-style Property
The font-style property is typically used to specify italic text.
The HTML:
This is a paragraph in italic style.
HTML
The CSS:
p.italic {
font-style: italic;
}
CSS
Try it Yourself
Result:
Run the code and see how it works!
The font-style Property
The font-style property has three values: normal, italic, and oblique.

Oblique is very similar to italic, but less supported.
The HTML:
This paragraph is normal.
This paragraph is italic.
This paragraph is oblique.
HTML
The CSS:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
CSS
Try it Yourself
The HTML tag will produce exactly the same result as the italic font style.
Well done!
Continue
The font-weight Property
The font-weight controls the boldness or thickness of the text. The values can be set
as normal (default size), bold, bolder, and lighter.
The HTML:
This is a font with a "lighter" weight.
This is a font with a "bold" weight.
This is a font with a "bolder" weight.
HTML
The CSS:
p.light {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
CSS
Try it Yourself
Result:
The font-weight Property
You can also define the font weight with a number from 100 (thin) to 900 (thick),
according to how thick you want the text to be.
400 is the same as normal, and 700 is the same as bold.
The HTML:
This is a font with a "lighter" weight.
This is a font with a "bold" weight.
This is a font with a "700" weight.
HTML
The CSS:
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 700;
}
CSS
Try it Yourself
Result:
The HTML tag also makes the text bold.
The font-variant Property
The CSS font-variant property allows you to convert your font to all small caps. The values
can be set as normal, small-caps, and inherit.
The HTML:
Paragraph font variant set to normal.
Paragraph font variant set to small-caps.
HTML
The CSS:
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
CSS
Try it Yourself
Result:
Not every font supports CSS font-variant, so be sure to test before you publish.
The color Property
The CSS color property specifies the color of the text.

One method of specifying the color of the text is using a color name: like red, green, blue,
etc.
Here's an example of changing the color of your font.
The HTML:
The text inside the paragraph is green.
The text outside the paragraph is black (by default).
HTML
The CSS:
p.example {
color: green;
}
CSS
Try it Yourself
Result:
The color Property
Another way of defining colors is using hexadecimal values and RGB.

Hexadecimal form is a pound sign (#) followed by at most, 6 hex values (0-F).
RGB defines the individual values for Red, Green, and Blue.
In the example below, we use hexadecimal value to set the heading color to blue, and RGB
form to make the paragraph red.
The HTML:
<h1>This is a heading</h1>
This is a paragraph
HTML
The CSS:
h1 {
color: #0000FF;
}
p.example {
color: rgb(255,0,0);
}
CSS
Try it Yourself
Result:
Well done!
Continue
Back
The text-align Property
The text-align property specifies the horizontal alignment of text in an element. By default,
text on your website is aligned to the left. However, at times you may require a different
alignment.
text-align property values are as follows: left, right, center, and justify.
The HTML:
This paragraph is aligned to left.
This paragraph is aligned to right.
This paragraph is aligned to center.
HTML
The CSS:
p.left {
text-align: left;
}
p.right {
text-align: right;
}
p.center {
text-align: center;
}
CSS
Try it Yourself
Result:
When text-align is set to "justify", each line is stretched so that every line has equal width,
and the left and right margins are straight (as in magazines and newspapers).
The vertical-align Property
The vertical-align property sets an element's vertical alignment. Commonly used values
are top, middle, and bottom.
The example below shows how to vertically align the text between the table.
The HTML:
<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
<tr>
<td class="top">Top</td>
<td class="middle">Middle</td>
<td class="bottom">Bottom</td>
</tr>
</table>
HTML
The CSS:
td.top {
vertical-align: top;
}
td.middle {
vertical-align: middle;
}
td.bottom {
vertical-align: bottom;
}
CSS
Try it Yourself
Result:
The vertical-align property also takes the following

values: baseline, sub, super, % and px (or pt, cm).
The example below shows the difference between them.
The HTML:
This is an inline text example.
This is a sub line text example.
 This is a super line text example.
 This is a pixel example.
HTML
The CSS:
span.baseline {
vertical-align: baseline;
}
span.sub {
vertical-align: sub;
}
span.super {
vertical-align: super;
}
span.pixel {
vertical-align: -10px;
}
CSS
Try it Yourself
Result:
Instead of px values, you can use pt (points), cm (centimeters) and % (percentage) values.
Vertical align property does not act the same way for all elements.
For example, some additional CSS styling is needed for div elements.
The HTML:
<div class="main">
<div class="paragraph">
This text is aligned to the middle
</div>
</div>
HTML
The CSS:
.main {
height: 150px; width: 400px;
background-color: LightSkyBlue;
display: inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
}
CSS
Try it Yourself
Result:
display: inline-table; and display: table-cell; styling rules are applied to make the
vertical-align property work with divs.
The text-decoration Property
The text-decoration property specifies how the text will be decorated.
Commonly used values are:

none - The default value, this defines a normal text
inherit - Inherits this property from its parent element
overline - Draws a horizontal line above the text
underline - Draws a horizontal line below the text
line-through - draws a horizontal line through the text (substitutes the HTML <s> tag)
The example below demonstrates the difference between each value.

The HTML:
This is default style of the text (none).
This text inherits the decoration of the parent.
This is overlined text.
This is underlined text.
This is lined-through text.
HTML
The CSS:
p.none {
text-decoration: none;
}
p.inherit {
text-decoration: inherit;
}
p.overline {
text-decoration: overline;
}
p.underline {
text-decoration: underline;
}
p.line-through {
text-decoration: line-through;
}
CSS
Try it Yourself
Result:
You can combine the underline, overline, or line-through values in a space-separated list
to add multiple decoration lines.
Another value of text-decoration property is blink which makes the text blink.
CSS syntax looks like this:

text-decoration: blink;
CSS
This value is valid but is deprecated and most browsers ignore it.
The text-indent Property
The text-indent property specifies how much horizontal space should be left before the
beginning of the first line of the text. Property values are length (px, pt, cm, em, etc.), %,
and inherit.
The HTML:
This is an example of
text-indent property.
First line of our text is indented to the right in 60px.
Besides pixels you can also use other measurement units,
like pt, cm, em, etc. 
HTML
The CSS:
p{
text-indent: 60px;
}
CSS
Try it Yourself
Result:
Negative values are allowed. The first line will be indented to the left if the value is
negative.
The text-shadow Property
The text-shadow property adds shadow to text.

It takes four values: the first value defines the distance of the shadow in the x (horizontal)
direction, the second value sets the distance in the y (vertical) direction, the third value
defines the blur of the shadow, and the fourth value sets the color.
The HTML:
<h1>Text-shadow example</h1>
HTML
The CSS:
h1 {
color: blue;
font-size: 30pt;
text-shadow: 5px 2px 4px grey;
}
CSS
Try it Yourself
In the example above, we created a shadow using the following parameters:

5px – the X-coordinate
2px – the Y-coordinate
4px – the blur radius
grey – the color of the shadow
Result:
To add more than one shadow to the text, add a comma-separated list of shadows.
text-shadow with Blur Effect
When working with shadows, you can use any CSS-supported color format.
For the x and y offsets, various types of units can be used (like px, cm, mm, in, pc, pt, etc).
Negative values are also supported.
The example below creates a blue drop-shadow, two pixels higher than the main text, one pixel to
the left of it, and with a 0.5em blur:
The HTML:
<h1>Text-shadow with blur effect</h1>

HTML
The CSS:
h1 {
font-size: 20pt;
text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;
}
CSS
Try it Yourself
Result:
Internet Explorer 9 and earlier do not support the text-shadow property.
The text-transform Property
The text-transform CSS property specifies how to capitalize an element's text. For example, it can
be used to make text appear with each word capitalized.
The HTML:

The value capitalize transforms the first
character in each word to uppercase;
all other characters remain unaffected.

HTML
The CSS:
p.capitalize {
text-transform: capitalize;
}
CSS
Try it Yourself
Result:
text-transform Values
Using text-transform property you can make text appear in all-uppercase or all-lowercase. Here is
an example:
The HTML:
This value transforms all characters to uppercase.

This value transforms all characters to lowercase.
HTML
The CSS:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
CSS
Try it Yourself
Result:
The value none will produce no capitalization effect at all.
The letter-spacing Property
The letter-spacing property specifies the space between characters in a text. The values can be set
as:
- normal defines the default style with no extra space between characters
- length defines an extra space between characters using measurement units like px, pt, cm, mm,
etc.;
- inherit inherits the property from its parent element;
The HTML:
This paragraph has no additional letter-spacing applied.

This paragraph is letter-spaced at 4px.
HTML
The CSS:
p.normal {
letter-spacing: normal;
}
p.positive {
letter-spacing: 4px;
}
CSS
Try it Yourself
Result:
Using Negative Values
For defining an extra space between characters, negative values are also permitted.
Here is an example demonstrating the difference between positive and negative values:
The HTML:
This paragraph is letter-spaced at 4px.

This paragraph is letter-spaced at -1.5px
HTML
The CSS:
p.positive {
letter-spacing: 4px;
}
p.negative {
letter-spacing: -1.5px;
}
CSS
Try it Yourself
Result:
Always test your result, to ensure the text is readable.
The word-spacing Property
The word-spacing property specifies the space between words in a text. Just like the letter-spacing
property, you can set the word-spacing values as normal, length, and inherit.
The HTML:
This paragraph has no additional word-spacing applied.

This paragraph is word-spaced at 30px.
HTML
The CSS:
p.normal {
word-spacing: normal;
}
p.px {
word-spacing: 30px;
}
CSS
Try it Yourself
Result:
When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word
spacing, the normal option is usually used.
Measurement Units
To define an extra space between words, you can use positive measurement values like px, pt, pc,
cm, mm, inches, em, and ex.
Negative values are also permitted. Here is an example to show the difference.
The HTML:
This paragraph is word-spaced at 20px.

This paragraph is word-spaced at -5px.
HTML
The CSS:
p.positive {
word-spacing: 20px;
}
p.negative {
word-spacing: -5px;
}
CSS
Try it Yourself
Result:
The white-space Property
The white-space property specifies how white-space inside an element is handled. The values can
be set as normal, inherit, nowrap, etc.
The nowrap value makes the text continue on the same line until a tag is encountered, and
also collapses all sequences of whitespace into a single whitespace.
The HTML:

This paragraph has multiple spaces and
a line break, but it will be ignored, as we used the nowrap value.

HTML
The CSS:
p{
white-space: nowrap;
}
CSS
Try it Yourself
Result:
The text will continue on the same line until a tag is encountered.
The white-space Values
The white-space property also supports other values:

pre - text will only wrap on line breaks and white space
pre-line - text will wrap where there is a break in code, but extra white space is still ignored
pre-wrap - text will wrap when necessary, and on line breaks
Here is an example in which all three values are used:
The HTML:

In the markup we have multiple spaces
and a line break.


In the markup we have multiple spaces
and a line break, but in the result multiple spaces are ignored.


In the markup we have multiple
spaces and a line break.

HTML
The CSS:
p.pre {
white-space: pre;
}
p.preline {
white-space: pre-line;
}
p.prewrap {
white-space: pre-wrap;
}
CSS
Try it Yourself
Result:
Pre-wrap value behaves as the pre value, except that it adds extra line breaks to prevent the text
breaking out of the element's box.
The CSS Box Model
All HTML elements can be considered as boxes. The CSS box model represents the design and
layout of the site. It consists of margins, borders, paddings, and the actual content.
The properties work in the same order: top, right, bottom, and left.

The image below illustrates the box model:
The term "box model" is used when talking about design and layout.
More on Box Models
Every element of the webpage is a box.
CSS uses the box model to determine how big the boxes are and how to place them.
The box model is also used to calculate the actual width and height of the HTML elements.
Total Width of an Element
When working with boxes, it is important to understand how the total width of an element is
calculated.
For example, the total width of the box with paddings will be the sum of width plus padding
left and padding right
Here is another box with margins, border, and paddings.
The total width is the sum of left and right margins, left and right borders, left and right
paddings, and the actual width of the content.
When you set the width and height properties of an element with CSS, you set the width and height
of the content area.
When setting a background-color to a box, it covers the content area, as well as the padding.
Total Height of an Element
The total height of an element is calculated the same way as the width.
The example below is the same box from the previous lesson with padding, border and margin.
To summarize, Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin
The border Property
The CSS border property allows you to customize the borders of HTML elements.
In order to add a border to the element, you need to specify the size, style, and color of the border.
The example below shows how to add a solid green border to the paragraph.
The HTML:
This is an example of a solid border.

HTML
The CSS:
p{
padding: 10px;
border: 5px solid green;
}
CSS
Try it Yourself
Result:
Border Width
The properties for the border can be set separately. The border-width property specifies the width
of the border.
The HTML:

Border width of this paragraph is set to 2px.


Border width of this paragraph is set to 5px.

HTML
The CSS:
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-width: 5px;
}
CSS
Try it Yourself
Result:
Border Color
The border color of the element can be defined using a color name, RGB, or Hex values.
The HTML:

Border color has been created using color name.


Border color has been created using Hex values.


Border color has been created using RGB values.

HTML
The CSS:
p.first {
padding: 10px;
border-width: 2px;
border-color: blue;
}
p.second {
padding: 10px;
border-width: 2px;
border-color: #FF6600;
}
p.third {
padding: 10px;
border-width: 2px;
border-color: rgb(0, 153, 0);
}
CSS
Try it Yourself
Result:
None of the border properties will have any effect unless the border-style property is set.
The border-style Property
The default value of border-style is none, which defines no border.

There are various styles supported for the border-style property: dotted, dashed, double, etc. The
example below illustrates the differences between them.
The HTML:
This paragraph has no border.

This is a dotted border.
This is a dashed border.
This is a double border.
This is a grooved border.
This is a ridged border.
This is an inset border.
This is an outset border.
This is a hidden border.
HTML
The CSS:
p.none {border-style: none;}

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
CSS
Try it Yourself
Result:
In CSS, it is possible to specify different borders for different sides, using the following properties:
border-top-style, border-right-style, border-bottom-style, and border-left-style for the corresponding
sides.
CSS Width and Height
To style a <div> element to have a total width and height of 100px:
The HTML:
<div>The total width and height of this element is 100px.</div>

HTML
The CSS:
div {
width: 90px;
height: 90px;
}
CSS
Try it Yourself
Result:
The total width and height of the box will be the 90px+5px (border)+5px(border) = 100px;
Width and Height Measurement
The width and height of an element can be also assigned using percents.

In the example below the width of an element is assigned in percentages, the height is in pixels.
The HTML:
<div>The total width of this element is 100% and the total height is
100px .</div>
HTML
The CSS:
div {
width: 100%;
height: 90px;
}
CSS
Try it Yourself
Result:
The Minimum and Maximum Sizes
To set the minimum and maximum height and width of an element, you can use the following
properties:
min-width - the minimum width of an element

min-height - the minimum height of an element
max-width - the maximum width of an element
max-height - the maximum height of an element
In the example below, we set the minimum height and maximum width of different paragraphs to
100px.
The HTML:
The minimum height of this paragraph is set to 100px.

The maximum width of this paragraph is set to 100px.
HTML
The CSS:
p.first {
min-height: 100px;
}
p.second {
max-width: 100px;
}
CSS
Try it Yourself
Result:
The background-color Property
The background-color property is used to specify the background color of an element.
The HTML:
The background color of this page is set to LightSkyBlue.

HTML
The CSS:
body {
background-color: #87CEFA;
}
CSS
Try it Yourself
Result:

Continue
The Background Color Values
The color of the background can be defined using three different formats: a color
name, hexadecimal values, and RGB.
In the example below, the body, h1, and p elements are assigned different background colors:
The HTML:
This is a paragraph
HTML
The CSS:
body {
background-color: #C0C0C0;
}
h1 {
background-color: rgb(135,206,235);
}
p{
background-color: LightGreen;
}
CSS
Try it Yourself
Result:
The background-image Property
The background-image property sets one or several background images in an element. Let's set a

background-image for the <body> element.
The CSS:
body {
background-image: url("css_logo.png");
background-color: #e9e9e9;
}
CSS
Try it Yourself
The url specifies the path to the image file. Both relative and absolute paths are supported.
Result:
By default, a background-image is placed at the top-left corner of an element, and is repeated both
vertically and horizontally to cover the entire element.
The background-image Property
Background-image can be set not only for the whole page, but for individual elements, as well.
Below we set a background image for the element.
The HTML:
This paragraph has a background image.

HTML
The CSS:
p{
padding: 30px;
background-image: url("green_photo.jpg");
color: white;
}
CSS
Try it Yourself
Result:
To specify more than one image, just separate the URLs with commas.
Well done!
Continue
The background-repeat Property
The background repeat property specifies how background images are repeated. A background
image can be repeated along the horizontal axis, the vertical axis both axes, or not repeated at
all.
The repeat-x will repeat a background image only horizontally.
The CSS:
body {
background-repeat: repeat-x;
}
CSS
Try it Yourself
Result: The repeat-y will repeat a
background-image only vertically.
The CSS:
body {
background-repeat: repeat-y;
}
CSS
Try it Yourself
Result:
If you want the image to be shown only once, use the no-repeat value.
Setting the Value to Inherit
When you set the background-repeat property to inherit, it will take the same specified value as the
property for the element's parent.
For example, we set the body background repeat only horizontally. If we set some paragraph
background-repeat values to be inherited, they will take the same property value as the body
element.
The CSS:
body {
background-repeat: repeat-x;
}
p{
background-repeat: inherit;
margin-top: 100px;
padding: 40px;
}
CSS
Try it Yourself
Result:
The background-attachment Property
The background-attachment property sets whether a background image is fixed or scrolls with the
rest of the page.
Even if an element has a scrolling mechanism, a "fixed" background doesn't move with the element.
The CSS:
body {
background-repeat: no-repeat;
background-attachment: fixed;
}
CSS
Try it Yourself
Result:
The background-attachment Values
You can also set the background-attachment to inherit or scroll.

When you set the background-attachment to inherit, it will inherit the value from its parent
element.
When you set the background-attachment to scroll, the background image will scroll with the rest
of the content.
The CSS:
body {
background-repeat: no-repeat;
background-attachment: scroll;
}
CSS
Try it Yourself
Result:
The list-style-type Property
The CSS list properties allow us to set different list item markers. In HTML, there are two types of
lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
One of the ways is to use the list-style-type property, which can be set
to circle, square, decimal, disc, lower-alpha, etc.
The HTML:
<ol class="lower-alpha">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
<ul class="circle">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<ul class="square">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
HTML
The CSS:
ol.lower-alpha {
list-style-type: lower-alpha;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
CSS
Try it Yourself
Result:
Some of the values are for unordered lists, and some for ordered lists.
Continue
The List Image and Position

There are also other list properties, such as:
list-style-image - specifies an image to be used as the list item marker.
list-style-position - specifies the position of the marker box (inside, outside).
In the example below, we use an image as the list item marker, and specify the position to be inside
of the content flow.
The HTML:
The following list has list-style-position: inside.

<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
HTML
The CSS:
ul {
list-style-image: url("logo.jpg");
list-style-position: inside;
}
CSS
Try it Yourself
Result:
"list-style-position: outside" is the default value.

The list-style Property
The list-style property is a shorthand property for setting list-style-type, list-style-image and list-

style-position. It is used to set all of the list properties in one declaration:
ul {
list-style: square outside none;
}
CSS
This would be the same as the longhand version.
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
CSS
Try it Yourself
Result:
If one of the property values are missing, the default value for the missing property will be inserted,
if any.
Well done!
The Table Properties

The look of an HTML table can be greatly improved with CSS.
The border-collapse property specifies whether the table borders are collapsed into a single border
or separated as default. If the borders are separate, the border-spacing property can be used to
change the spacing.
The HTML:
<table border="1">
<tr>
<td>Red</td>
<td>Green</td>
</tr>
<tr>
<td>Blue</td>
<td>Yellow</td>
</tr>
</table>
HTML
The CSS:
table {
border-collapse: separate;
border-spacing: 20px 40px;
}
CSS
Try it Yourself
Result:
The caption-side Property
The caption-side property specifies the position of a table caption. The values can be set
as top or bottom.
In the example below, we specify the placement of a table caption to top.
The HTML:
<table border="1">
<caption>Some of Our Courses</caption>
<tr>
<th>Course name</th>
<th>Lessons</th>
<th>Quizzes</th>
</tr>
<tr>
<td>C++</td>
<td>81</td>
<td>363</td>
</tr>
<tr>
<td>JavaScript</td>
<td>48</td>
<td>144</td>
</tr>
<tr>
<td>HTML</td>
<td>38</td>
<td>119</td>
</tr>
<tr>
<td>CSS</td>
<td>70</td>
<td>174</td>
</tr>
</table>
HTML
The CSS:
caption {
caption-side: top;
}
CSS
Try it Yourself
Result:
The empty-cells Property

The empty-cells property specifies whether or not to display borders and background on empty
cells in a table.
Possible values are:
show: the borders of an empty cell are rendered
hide: the borders of an empty cell are not drawn
Here is the empty-cells property that is used to hide borders of empty cells in the <table> element.
The HTML:
<table border="1">
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td></td>
</tr>
</table>
HTML
The CSS:
table {
empty-cells: hide;
}
CSS
Try it Yourself
Result:
The table-layout Property
The table-layout specifies how the width of table columns is calculated. The possible values are:
auto - when column or cell width are not explicitly set, the column width will be in proportion to
the amount of content in the cells that make up the column
fixed - when column or cell width are not explicitly set, the column width will not be affected by
the amount of content in the cells that make up the column.
The table layout is set to auto by default.

The example below shows the difference between auto and fixed.
The HTML:
Table-layout is set to auto

<table class="auto">
<tr>
<td width=“10%">500.000.000.000.000</td>
<td width="90%">20.000</td>
</tr>
</table>
Table-layout is set to fixed

<table class="fixed">
<tr>
<td width="10%">500.000.000.000.000</td>
<td width="90%">20.000</td>
</tr>
</table>
HTML
The CSS:
table {
width: 100%;
border: 1px solid gray;
}
td {
border: 1px solid gray;
}
table.auto {
table-layout: auto;
}
table.fixed {
table-layout: fixed;
}
CSS
Try it Yourself
Result:
Setting Styles to Links
Links can be styled with any CSS property (e.g., color, font-family, background, etc.).
In addition, links can be styled differently, depending on what state they are in. The following
pseudo selectors are available:
a:link - defines the style for normal unvisited links
a:visited - defines the style for visited links
a:active - a link becomes active once you click on it
a:hover - a link is hovered when the mouse is over it
The example below creates a link that will change the style when the mouse is moved over it.
The HTML:
<a href="http://www.sololearn.com" target="_blank">

This link is hovered when we mouse over it
</a>
HTML
The CSS:
a:hover {
color: red;
}
CSS
Try it Yourself
The link from the above example would look like this:
But when we mouse over it, it

becomes red, as we defined in our stylesheet.
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
Links' Text Decoration
By default, text links are underlined by the browser.

One of the most common uses of CSS with links is to remove the underline. In the example below,
the text-decoration property is used to remove the underline.
The HTML:
<a href="http://www.sololearn.com" target="_blank">

This link has no underline.
</a>
HTML
The CSS:
a:link {
text-decoration: none;
}
CSS
Try it Yourself
Result:
The following properties are used to control the look and feel of links:
border:none - removes border from images with links
outline:none - removes the dotted border on clicked lines in IE
Setting the Mouse Cursor Style
CSS allows you to set your desired cursor style when you mouse over an element. For example, you
can change your cursor into a hand icon, help icon, and much more, rather than using the default
pointer.
In the example below, the mouse pointer is set to a help icon when we mouse over the span
element:

Do you need help?

HTML
Try it Yourself
Result:
The cursor Property Values
There are numerous other possible values for the cursor property, such as:
default - default cursor
crosshair - cursor displays as crosshair
pointer - cursor displays hand icon
The list of possible values is quite long.
The image below demonstrates the various available styles:
CSS allows you to set your desired cursor style when you mouse over an element.
The default Value

Usually, the appearance of the mouse cursor is altered to provide a more interesting experience for
website visitors. However, choosing the wrong cursor style can be misleading, as well.
For example, if the cursor value is set to default, users may not "see" the links.
Choose your mouse cursor styles carefully.
display: block
Every element on a web page is a rectangular box.The display property determines how that

rectangular box behaves. A block element is an element that takes up the fullest width available,
with line breaks before and after.
The style rules in the following example display the inline elements as block-level
elements:
The HTML:
First paragraph.
Second paragraph.
Third paragraph.
Fourth paragraph.
Fifth paragraph.
HTML
The CSS:
span {
display: block;
}
CSS
Try it Yourself
Result:
display: inline
An inline element only takes up as much width as necessary, and does not force line breaks.
The CSS:
p{
display: inline;
}
CSS
Try it Yourself
The code above will produce the following result:
Setting the display property of an element only changes how the element is displayed, not what kind
of element it is. So, an inline element with display:block is not allowed to have other block
elements inside it.
display:none
display:none hides an element, so it does not take up any space. The element will be hidden, and
the page will be displayed as if the element is not there.
The HTML:
<h1>This text will not display, as we set the value to none.</h1>

Headline of this paragraph is not displayed, as we set the value to none.
HTML
The CSS:
h1 {
display: none;
}
CSS
Try it Yourself
Result:
There are plenty of other display values, such as list-item, table, table-cell, table-column, grid,

etc. Just play with values to see the difference.
The visibility Property
The visibility property specifies whether an element is visible or hidden. The most common values
are visible and hidden.
Hiding an element can be done by setting the display property to "none" or the visibility property to
"hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element
will be hidden, but it will still affect the layout:
Here is an example:
The HTML:
<div class="hidden">
This text will not display in browser.
</div>

The space above this paragraph is empty because
the visibility of the div element is set to hidden.

HTML
The CSS:
div.hidden {
visibility: hidden;
}
CSS
Try it Yourself
Result: display:none hides
an element, without holding a place for that element.
Changing visibility: hidden; to display: none; will produce the following result:
div.hidden {
display: none;
}
CSS
Try it Yourself
Result:
Positioning Elements
The CSS positioning properties allow you to position an element. It can also place an element
behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the positioning method.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned
according to the normal flow of the page.
The HTML:
Paragraph with no position.

This paragraph has a static position.
HTML
The CSS:
p.position_static {
position:static;
top: 30px;
right: 5px;
color: red;
}
CSS
Try it Yourself
Result:
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with a fixed position is positioned relative to the browser window, and will not move
even if the window is scrolled.
The position can be specified using one or more of the properties top, right, bottom, and left.
In the example below, the paragraph is fixed to 30px from the top and 5px from the right.
The CSS:
p.position_fixed {
position: fixed;
top: 30px;
right: 5px;
color: red;
}
CSS
Try it Yourself
Result:
Fixed positioned elements are removed from the normal flow. The document and other elements
behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.
279 Comments
Relative Positioning
A relative positioned element is positioned relative to its normal position.

The properties top, right, bottom, and left can be used to specify how the rendered box will be
shifted.
The CSS:
p{
width: 350px;
border: 1px black solid;
position: fixed;
}
span {
background: green;
color:white;
position: relative;
top: 150px;
left: 50px;
}
CSS
Try it Yourself
Result:
The content of relatively positioned elements can be moved and overlap other elements, but the
reserved space for the element is still preserved in the normal flow.
This value cannot be used for table cells, columns, column groups, rows, row groups,

or captions.
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position
other than static. If no such element is found, the containing block is <html>.
Absolutely positioned elements are removed from the normal flow. The document and other
elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Floating
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap
around it.
Float is often used with images, but it is also useful when working with layouts.
The values for the float property are left, right, and none.
Left and right float elements in those directions, respectively. none (the default) ensures that the
element will not float.
Below is an example of an image that is floated to the right.
The HTML:
<img src="css_logo.png" />

This paragraph has an image that is floated to the right.
It is highly recommended to add a margin to images so that the text does
not get too close to the image. If you want your text to be easily read, you
should always add a few pixels between words and borders, images,
and other content.

HTML
The CSS:
img {
float: right;
}
CSS
Try it Yourself
Result:
Elements are floated horizontally, meaning that an element can only be floated left or right, not up
or down.
Elements Next to Each Other
If you place several floating elements one after the other, they will float next to each other if there is
enough room.
As an example, in a print layout, images may be set into the page such that text wraps around them
as needed.
The CSS:
img {
float: left;
width: 120px;
margin-right: 10px;
}
p{
width: 120px;
float: left;
}
CSS
Try it Yourself
Result:
Clearing the Float
Elements that come after the floating element will flow around it. To avoid this, use the clear
property.
The clear property specifies the sides of an element where other floating elements are not allowed
to be.
In the example below, if we set the float property to the div, only the paragraph that comes after the
div will be wrapped around the image.
The HTML:
This paragraph is above the div element

and is not affected by the float right property.
 
<div class="floating">
<img src="css_logo.png" />
</div>
This paragraph comes after the div element
and is affected by the float right property.
 
This paragraph also comes after the div element
 
HTML
The CSS:
.floating {
float: right;
}
CSS
Try it Yourself
Result:
Using clear
Use the values right, left, and both to specify the sides of an element where other floating elements
are not allowed to be.
The default value is none, which allows floating elements on both sides.
Clearing Floats
both is used to clear floats coming from either direction.
The HTML:
This paragraph is above the div element

 
<div class="floating">
<img src="css_logo.png" />
</div>
This paragraph comes after the div element
 
This paragraph is out of the floating group
 
HTML
The CSS:
.floating {
float: right;
}
.clearing {
clear: both;
}
CSS
Try it Yourself
Result:
The overflow Property
As discussed earlier, every element on the page is a box. If the height of the box is not set, the
height of that box will grow as large as necessary to accommodate the content.
The HTML:
<div>
This text is inside the div element, which has a blue
background color and is floated to the left. We set a specific
height and width for the div element, and as you can see,
the content cannot fit.
</div>
HTML
The CSS:
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
}
CSS
Try it Yourself
Result:
The CSS overflow property specifies the behavior that occurs when an element's content overflows
the element's box.
The overflow Property Values
There are four values for the overflow property: visible (the default value), scroll, hidden,
and auto.
The value scroll results in clipped overflow, but a scrollbar is added, so the rest of the content may
be seen.
The CSS:
div {
width: 150px;
height: 150px;
float: left;
overflow: scroll;
}
CSS
Try it Yourself
The code above will produce both horizontal and vertical scrollbars:
auto and hidden
auto - If overflow is clipped, a scroll-bar should be added to make it possible to see the rest of the
content.
hidden - The overflow is clipped, and the rest of the content will be invisible.
The CSS:
div {
width: 150px;
height: 150px;
float: left;
overflow: hidden;
}
CSS
Try it Yourself
Result:
The default value for the overflow property is visible.
The z-index Property
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in
front of, or behind, the others).
The CSS:
.blue {
background-color: #8EC4D0;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
}
CSS
Try it Yourself
Result:
The red box overlaps the blue box, because it was placed later in the HTML markup.
The z-index property can change this order.
Assigning the z-index Property
Assigning a higher z-index value to the blue div and a lower z-index value to the red div will result
in the following:
The CSS:
.blue {
z-index: 3;
position: relative;
}
.red {
z-index: 2;
position: relative;
}
CSS
Try it Yourself
Result:
The z-index works only on positioned elements (position:absolute, position:relative, or

position:fixed).

CSS Syntax: For Example, The Headline Color Can Be Defined As

Uploaded by

Copyright:

Available Formats

CSS Syntax: For Example, The Headline Color Can Be Defined As

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Syntax: For Example, The Headline Color Can Be Defined As

Uploaded by

Copyright:

Available Formats

CSS Syntax

For example, the headline color can be defined as:

Where: The selector points to the HTML

For example, to target all the paragraphs on the page:

id and class Selectors

A CSS comment look like this:

Comments can also span multiple lines.

The final appearance of a web page is a result of different styling rules.

- The stylesheet created by the author of the page

The font-family Property

The font-family property specifies the font for an element.

Here is an example of different font styles:

The font-family Property

The font-size Property

The font-size Property

To calculate the em size, just use the following formula: em = pixels / 16

The font-style Property

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

The font-style Property

The font-style property has three values: normal, italic, and oblique.

The font-weight Property

The font-weight Property

The font-variant Property

The color Property

The CSS color property specifies the color of the text.

The color Property

Another way of defining colors is using hexadecimal values and RGB.

The text-align Property

text-align property values are as follows: left, right, center, and justify.

The vertical-align Property

The vertical-align Property

The vertical-align property also takes the following

The vertical-align Property

The text-decoration Property

The text-decoration property specifies how the text will be decorated.

Commonly used values are:

The example below demonstrates the difference between each value.

Another value of text-decoration property is blink which makes the text blink.

CSS syntax looks like this:

The text-indent Property

The text-shadow Property

The text-shadow property adds shadow to text.

In the example above, we created a shadow using the following parameters:

text-shadow with Blur Effect

<h1>Text-shadow with blur effect</h1>

Internet Explorer 9 and earlier do not support the text-shadow property.

The text-transform Property

Run the code and see how it works!

<p class="uppercase">This value transforms all characters to uppercase.</p>

The value none will produce no capitalization effect at all.

The letter-spacing Property

<p class="normal">This paragraph has no additional letter-spacing applied.</p>

Run the code and see how it works!

Using Negative Values

<p class="positive">This paragraph is letter-spaced at 4px.</p>

Always test your result, to ensure the text is readable.

The word-spacing Property

<p class="normal">This paragraph has no additional word-spacing applied.</p>

<p class="positive">This paragraph is word-spaced at 20px.</p>