Scribd
Upload
39 views

The Id and Class Selectors: Try It Yourself

The document discusses CSS selectors and properties for styling HTML elements. It describes id and class selectors for targeting single or groups of elements. It also explains the different ways to insert styles - externally, internally, or inline. Styles can cascade from multiple sources, with inline styles taking the highest priority. The document also covers CSS background properties for defining colors, images, repetition, attachment, and positioning.

Uploaded by

mann
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

The Id and Class Selectors: Try It Yourself

The document discusses CSS selectors and properties for styling HTML elements. It describes id and class selectors for targeting single or groups of elements. It also explains the different ways to insert styles - externally, internally, or inline. Styles can cascade from multiple sources, with inline styles taking the highest priority. The document also covers CSS background properties for defining colors, images, repetition, attachment, and positioning.

Uploaded by

mann
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors
called "id" and "class".

The id Selector
The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

The style rule below will be applied to the element with id="para1":

Example
#para1
{
text-align:center;
color:red;
}

Try it yourself »

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The class Selector


The class selector is used to specify a style for a group of elements. Unlike the id selector, the
class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:

Example
.center {text-align:center;}
Try it yourself »

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

In the example below, all p elements with class="center" will be center-aligned:

Example
p.center {text-align:center;}

Try it yourself »

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

 External style sheet


 Internal style sheet
 Inline style

External Style Sheet


An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

An external style sheet can be written in any text editor. The file should not contain any html
tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is
shown below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of
"margin-left:20px") will work in IE, but not in Firefox or Opera.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets


If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet. 

For example, an external style sheet has these properties for the h3 selector:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20pt;
}

If the page with the internal style sheet also links to the external style sheet the properties for h3
will be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.

Multiple Styles Will Cascade into One


Styles can be specified:

 inside an HTML element


 inside the head section of an HTML page
 in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Cascading order

What style will be used when there is more than one style specified for an HTML element?

CSS Background
« Previous Next Chapter »
CSS background properties are used to define the background effects of
an element.

CSS properties used for background effects:

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

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

The background color of a page is defined in the body selector:

Example
body {background-color:#b0c4de;}

Try it yourself »

The background color can be specified by:

 name - a color name, like "red"


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

In the example below, the h1, p, and div elements have different background colors:

Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Try it yourself »
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.

The background image for a page can be set like this:

Example
body {background-image:url('paper.gif');}

Try it yourself »

Below is an example of a bad combination of text and background image. The text is almost not
readable:

Example
body {background-image:url('bgdesert.jpg');}

Try it yourself »

Background Image - Repeat Horizontally or Vertically


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
body
{
background-image:url('gradient2.png');
}
Try it yourself »

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

Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Try it yourself »

Background Image - Set position and no-repeat


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

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

Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Try it yourself »

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

The position of the image is specified by the background-position property:

Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
}

Try it yourself »

Background - Shorthand property


As you can see from the examples above, there are many properties to consider when dealing
with backgrounds.

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

The shorthand property for background is simply "background":

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

Try it yourself »

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

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

It does not matter if one of the property values are missing, as long as the ones that are present
are in this order.
This example uses more advanced CSS. Take a look: Advanced example

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will
override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a
default value).

All CSS Background Properties


The number in the "CSS" column indicates in which CSS version the property is defined (CSS1
or CSS2).

Property Description Values CSS


background-color
background-image
Sets all the background background-repeat
background 1
properties in one declaration background-attachment
background-position
inherit
Sets whether a background scroll
background-attachment image is fixed or scrolls with the fixed 1
rest of the page inherit
color-rgb
color-hex
Sets the background color of an
background-color color-name 1
element
transparent
inherit
url(URL)
Sets the background image for an
background-image none 1
element
inherit
background-position Sets the starting position of a top left 1
background image top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit
repeat
repeat-x
Sets if/how a background image
background-repeat repeat-y 1
will be repeated
no-repeat
inherit

« Previous

CSS Text
« Previous Next Chapter »

TEXT FORMATTING

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
the "Try it yourself" link.

Text Color
The color property is used to set the color of the text. The color can be specified by:

 name - a color name, like "red"


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

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

Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Try it yourself »

For W3C compliant CSS: If you define the color property, you must also define the
background-color property.

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

Text can be centered, or aligned to the left or right, or justified.

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 (like in magazines and newspapers).

Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Try it yourself »

Text Decoration
The text-decoration property is used to set or remove decorations from text.

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

Example
a {text-decoration:none;}

Try it yourself »
It can also be used to decorate text:

Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Try it yourself »

It is not recommended to underline text that is not a link, as this often confuse users.

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.

Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Try it yourself »

Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.

Example
p {text-indent:50px;}
Try it yourself »

More Examples

Specify the space between characters


This example demonstrates how to increase or decrease the space between characters.

Specify the space between lines


This example demonstrates how to specify the space between the lines in a paragraph.

Set the text direction of an element


This example demonstrates how to change the text direction of an element.

Increase the white space between words


This example demonstrates how to increase the white space between words in a paragraph.

Disable text wrapping inside an element


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

Vertical alignment of an image


This example demonstrates how to set the vertical align of an image in a text.

All CSS Text Properties


The number in the "CSS" column indicates in which CSS version the property is defined (CSS1
or CSS2).

Property Description Values CSS

color Sets the color of a text color 1

ltr
direction Sets the text direction 2
rtl

line-height Sets the distance between lines normal 1


number
length
%

normal
letter-spacing Increase or decrease the space between characters 1
length

left
right
text-align Aligns the text in an element 1
center
justify

none
underline
text-decoration Adds decoration to text overline 1
line-through
blink

length
text-indent Indents the first line of text in an element 1
%

none
text-shadow   color  
length

none
capitalize
text-transform Controls the letters in an element 1
uppercase
lowercase

normal
unicode-bidi   embed 2
bidi-override

baseline
sub
super
top
text-top
vertical-align Sets the vertical alignment of an element 1
middle
bottom
text-bottom
length
%
normal
white-space Sets how white space inside an element is handled pre 1
nowrap

normal
word-spacing Increase or decrease the space between words
length

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

Special for links are that they 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
a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Try it yourself »

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

Common Link Styles


In the example above the link changes color depending on what state it is in.

Lets go through some of the other common ways to style links:

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

Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Try it yourself »

Background Color
The background-color property specifies the background color for links:

Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Try it yourself »

CSS Lists
« Previous Next Chapter »

The CSS list properties allow you to:

 Set different list item markers for ordered lists


 Set different list item markers for unordered lists
 Set an image as the list item marker

List
In HTML, there are two types of lists:

 unordered lists - the list items are marked with bullets


 ordered lists - 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.

Different List Item Markers


The type of list item marker is specified with the list-style-type property:

Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}


ol.d {list-style-type: lower-alpha;}

Try it yourself »

Some of the property values are for unordered lists, and some for ordered lists.

Values for Unordered Lists


Value Description

none No marker

disc Default. The marker is a filled circle

circle The marker is a circle

square The marker is a square

Values for Ordered Lists


Value Description

armenian The marker is traditional Armenian numbering

decimal The marker is a number


decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)

georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)

lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)

lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)

lower-latin The marker is lower-latin (a, b, c, d, e, etc.)

lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)

upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.) 

upper-latin The marker is upper-latin (A, B, C, D, E, etc.)

upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)

Note: No versions of Internet Explorer (including IE8) support the property values "decimal-
leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", or "georgian".

An Image as The List Item Marker


To specify an image as the list item marker, use the list-style-image property:

Example
ul
{
list-style-image: url('sqpurple.gif');
}

Try it yourself »

The example above does not display equally in all browsers. IE and Opera will display the
image-marker a little bit higher than Firefox, Chrome, and Safari.

If you want the image-marker to be placed equally in all browsers, a crossbrowser solution is
explained below.

Crossbrowser Solution
The following example displays the image-marker equally in all browsers:

Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Try it yourself »

Example explained:

 For ul:
o Set the list-style-type to none to remove the list item marker
o Set both padding and margin to 0px (for cross-browser compatibility)
 For li:
o Set the URL of the image, and show it only once (no-repeat)
o Position the image where you want it (left 0px and down 5px)
o Position the text in the list with padding-left

List - Shorthand property


It is also possible to specify all the list properties in one, single property. This is called a
shorthand property.

The shorthand property used for lists, is the list-style property:

Example
ul
{
list-style: square url("sqpurple.gif");
}

Try it yourself »

When using the shorthand property, the order of the values are:

 list-style-type
 list-style-position (for a description, see the CSS properties table below)
 list-style-image

It does not matter if one of the values above are missing, as long as the rest are in the specified
order.

More Examples

All the different list-item markers for lists


This example demonstrates all the different list-item markers in CSS.

All CSS List Properties


The number in the "CSS" column indicates in which CSS version the property is defined (CSS1
or CSS2).

Property Description Values CSS

list-style-type
list-style-position
list-style Sets all the properties for a list in one declaration 1
list-style-image
inherit

URL
list-style-image Specifies an image as the list-item marker none 1
inherit

list-style-position Specifies if the list-item markers should appear inside 1


inside or outside the content flow outside
inherit

none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
list-style-type Specifies the type of list-item marker
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit

CSS Tables
« Previous Next Chapter »

The look of an HTML table can be greatly improved with CSS:

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Berglunds snabbköp Christina Berglund Sweden

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Königlich Essen Philip Cramer Germany

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

North/South Simon Crowther UK


Paris spécialités Marie Bertrand France

The Big Cheese Liz Nixon USA

Vaffeljernet Palle Ibsen Denmark

Table Borders
To specify table borders in CSS, use the border property.

The example below specifies a black border for table, th, and td elements:

Example
table, th, td
{
border: 1px solid black;
}

Try it yourself »

Notice that the table in the example above has double borders. This is because both the table, th,
and td elements have separate borders.

To display a single border for the table, use the border-collapse property.

Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:

Example
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

Try it yourself »

Table Width and Height


Width and height of a table is defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the th elements to
50px:

Example
table
{
width:100%;
}
th
{
height:50px;
}

Try it yourself »

Table Text Alignment


The text in a table is aligned with the text-align and vertical-align properties.

The text-align property sets the horizontal alignment, like left, right, or center:

Example
td
{
text-align:right;
}

Try it yourself »

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example
td
{
height:50px;
vertical-align:bottom;
}

Try it yourself »

Table Padding
To control the space between the border and content in a table, use the padding property on td
and th elements:

Example
td
{
padding:15px;
}

Try it yourself »
Table Color
The example below specifies the color of the borders, and the text and background color of th
elements:

Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Try it yourself »

More Examples

You might also like