Difference between revisions of "CSS"
Jump to navigation
Jump to search
(How to add CSS to your HTML file) |
(How to select an HTML element) |
||
| Line 46: | Line 46: | ||
==How to select an HTML element== | ==How to select an HTML element== | ||
| + | ===by tag=== | ||
| + | The following will set the text color in all <div> tags to black. | ||
| + | div { | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | ===by ID=== | ||
| + | div#example { | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | ===by Class=== | ||
| + | div.group { | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | ===Descendant=== | ||
| + | body div { | ||
| + | color: black; | ||
| + | } | ||
==How to style the chosen element== | ==How to style the chosen element== | ||
Revision as of 00:33, 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;
}
by ID
div#example {
color: black;
}
by Class
div.group {
color: black;
}
Descendant
body div {
color: black;
}