Difference between revisions of "CSS"
(How to select an HTML element) |
(How to select an HTML element) |
||
| Line 52: | Line 52: | ||
} | } | ||
| − | + | The following will affect all HTML tags. | |
| + | * { | ||
| + | color: black; | ||
| + | } | ||
===by ID=== | ===by ID=== | ||
| + | The pound (or hash) sign is used to indicate an specific elements' ID. There should be only one ID per HTML document. | ||
div#example { | div#example { | ||
color: black; | color: black; | ||
| Line 60: | Line 64: | ||
===by Class=== | ===by Class=== | ||
| + | A period (or dot) is used to affect a class (or group) of HTML elements. | ||
div.group { | div.group { | ||
color: black; | color: black; | ||
} | } | ||
| − | === | + | ===Descendants=== |
| − | + | This will affect all <p> tags, which are descendants of <div> tags. Other <p> tags will not be affected. | |
| + | div p { | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | We can specify only immediate descendants (children) using the greater than (>) sign. | ||
| + | div > p { | ||
color: black; | color: black; | ||
} | } | ||
Revision as of 01:16, 22 May 2013
CSS, or Cascading Style Sheets, are files, provided along with HTML, to style the webpage accordingly.
How to include CSS in your HTML document
There are three different ways that CSS can be added into an HTML document;
<link> tag
The <link> tag must be placed within the <head> of a document.
<html>
<head>
<link href="myfile.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</body>
</html>
<style> tag
The <style> tag is used to make CSS declarations directly in the HTML file's <head> tag.
<html>
<head>
<style type="text/css">
div#example {
color: black;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
</body>
</html>
style attribute
Most HTML elements can have a style attribute added to them, so CSS may be applied directly to specific elements.
<html>
<head>
</head>
<body>
<div style="color:black; height:50px; width:50px;">
</div>
</body>
</html>
How to select an HTML element
by tag
The following will set the text color in all <div> tags to black.
div {
color: black;
}
The following will affect all HTML tags.
* {
color: black;
}
by ID
The pound (or hash) sign is used to indicate an specific elements' ID. There should be only one ID per HTML document.
div#example {
color: black;
}
by Class
A period (or dot) is used to affect a class (or group) of HTML elements.
div.group {
color: black;
}
Descendants
This will affect all <p> tags, which are descendants of <div> tags. Other <p> tags will not be affected.
div p {
color: black;
}
We can specify only immediate descendants (children) using the greater than (>) sign.
div > p {
color: black;
}