|
A combinator is something that explains the relationship between the selectors. |
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
The descendant selector matches all element that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
div p {
background-color: yellow;
}
The child selector selects all elements that are the immediate children of a specified element.
The following example selects all <p> elements that are immediate children of a <div> element:
div > p {
background-color: yellow;
}
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects all <p> elements that are placed immediately after <div> elements:
div + p {
background-color: yellow;
}
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements:
div ~ p {
background-color: yellow;
}
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}
Links can be displayed in different ways:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
|
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! |
Pseudo-classes can be combined with CSS classes:
a.highlight:hover {
color: #ff0000;
}
When you hover over the link in the example, it will change color.
The :first-child pseudo-class matches a specified element that is the first child of another element.
|
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared. |
In the following example, the selector matches any <p> element that is the first child of any element:
p:first-child {
color: blue;
}
In the following example, the selector matches the first <i> element in all <p> elements:
p i:first-child {
color: blue;
}
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
p:first-child i {
color: blue;
}
The :lang pseudo-class allows you to define special rules for different languages.
|
Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified. |
In the example below, the :lang class defines the quotation marks for q elements with lang="no":
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.
|
Selector |
Example |
Example description |
|
a:link |
Selects all unvisited links |
|
|
a:visited |
Selects all visited links |
|
|
a:active |
Selects the active link |
|
|
a:hover |
Selects links on mouse over |
|
|
input:focus |
Selects the input element which has focus |
|
|
p::first-letter |
Selects the first letter of every <p> element |
|
|
p::first-line |
Selects the first line of every <p> element |
|
|
p:first-child |
Selects every <p> elements that is the first child of its parent |
|
|
p::before |
Insert content before every <p> element |
|
|
p::after |
Insert content after every <p> element |
|
|
p:lang(it) |
Selects every <p> element with a lang attribute value starting with "it" |
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
The syntax of pseudo-elements:
selector::pseudo-element {
property:value;
}
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block elements.
Format the first line of the text in p elements:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
The following properties apply to the ::first-line pseudo-element:
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The ::first-letter pseudo-element can only be applied to block elements.
Format the first letter of the text in p elements:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
The following properties apply to the ::first-letter pseudo- element:
Pseudo-elements can be combined with CSS classes:
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}
The example above will display the first letter of paragraphs with class="intro", in larger size, and red.
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:
h1::before {
content: url(smiley.gif);
}
The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after each <h1> element:
h1::after {
content: url(smiley.gif);
}
|
Selector |
Example |
Example description |
|
a:link |
Selects all unvisited links |
|
|
a:visited |
Selects all visited links |
|
|
a:active |
Selects the active link |
|
|
a:hover |
Selects links on mouse over |
|
|
input:focus |
Selects the input element which has focus |
|
|
p::first-letter |
Selects the first letter of every <p> element |
|
|
p::first-line |
Selects the first line of every <p> element |
|
|
p:first-child |
Selects every <p> elements that is the first child of its parent |
|
|
p::before |
Insert content before every <p> element |
|
|
p::after |
Insert content after every <p> element |
|
|
p:lang(it) |
Selects every <p> element with a lang attribute value starting with "it" |
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Now let's remove the bullets and the margins and padding from the list:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Example explained:
The code in the example above is the standard code used in both vertical, and horizontal navigation bars.
To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:
a {
display: block;
width: 60px;
}
Example explained:
Tip: Also take a look at our fully styled vertical navigation bar example.
|
Note: Always specify the width for <a> elements in a vertical navigation bar. If you omit the width, IE6 can produce unexpected results. |
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:
li {
display: inline;
}
Example explained:
In the example above the links have different widths.
For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements:
li {
float: left;
}
a {
display: block;
width: 60px;
}
Example explained:
Tip: Also take a look at our fully styled horizontal navigation bar example.
CSS can be used to create an image gallery.
Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here
The following image gallery is created with CSS:
<html>
<head>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Creating transparent images with CSS is easy.
The CSS opacity property is a part of the W3C CSS3 recommendation.
The CSS3 property for transparency is opacity.
First we will show you how to create a transparent image with CSS.
Regular image:
The same image with transparency:
Look at the following CSS:
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.
IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.
Mouse over the images:
The CSS looks like this:
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it.
The CSS for this is: opacity=1.
IE8 and earlier: filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will be transparent again.
This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.
The source code looks like this:
<html>
<head>
<style>
div.background {
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
Instead of using three separate images, we use this single image ("img_navsprites.gif"):
With CSS, we can show just the part of the image we need.
In the following example the CSS specifies which part of the "img_navsprites.gif" image to show:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Example explained:
This is the easiest way to use image sprites, now we want to expand it by using links and hover effects.
We want to use the sprite image ("img_navsprites.gif") to create a navigation list.
We will use an HTML list, because it can be a link and also supports a background image:
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
Example explained:
Now start to position and style for each specific part:
Now we want to add a hover effect to our navigation list.
|
The :hover selector is used to select elements when you mouse over them. |
Our new image ("img_navsprites_hover.gif") contains three navigation images and three images to use for hover effects:
Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image.
We only add three lines of code to add the hover effect:
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
Example explained:
By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc.
Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
The @media rule allows different style rules for different media in the same style sheet.
The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 20 pixels font, and in a red color:
@media screen {
p {
font-family: verdana,sans-serif;
font-size: 14px;
}
}
@media print {
p {
font-size: 20px;
color: red;
}
}
|
Media Type |
Description |
|
all |
Used for all media type devices |
|
aural |
Used for speech and sound synthesizers |
|
braille |
Used for braille tactile feedback devices |
|
embossed |
Used for paged braille printers |
|
handheld |
Used for small or handheld devices |
|
|
Used for printers |
|
projection |
Used for projected presentations, like slides |
|
screen |
Used for computer screens |
|
tty |
Used for media using a fixed-pitch character grid, like teletypes and terminals |
|
tv |
Used for television-type devices |
It is possible to style HTML elements that have specific attributes, not just class and id.
|
Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. |
The [attribute] selector is used to select elements with the specified attribute.
The following example selects all <a> elements with a target attribute:
a[target] {
background-color: yellow;
}
The [attribute=value] selector is used to select elements with the specified attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:
a[target="_blank"] {
background-color: yellow;
}
The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":
[title~="flower"] {
border: 5px solid yellow;
}
The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".
The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.
The following example selects all elements with a class attribute value that begins with "top":
Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!
[class|="top"] {
background: yellow;
}
The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.
The following example selects all elements with a class attribute value that begins with "top":
Note: The value does not have to be a whole word!
[class^="top"] {
background: yellow;
}
The [attribute$=value] selector is used to select elements whose attribute value ends with a specified value.
The following example selects all elements with a class attribute value that ends with "test":
Note: The value does not have to be a whole word!
[class$="test"] {
background: yellow;
}
The [attribute*=value] selector is used to select elements whose attribute value contains a specified value.
The following example selects all elements with a class attribute value that contains "te":
Note: The value does not have to be a whole word!
[class*="te"] {
background: yellow;
}
The attribute selectors can be useful for styling forms without class or ID:
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}