Difference between revisions of "CSS"
m (adding TOC) |
|||
| (9 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | {{migrated}} | ||
| + | [https://docs.google.com/document/d/14TU9nDwjzs5Q9a99kSkGMCBzxn98cyrwhW043Jfu3Js/edit?usp=sharing Link] | ||
| + | |||
| + | CSS, or '''C'''ascading '''S'''tyle '''S'''heets, is a language created to provide style and formatting for HTML elements. | ||
| + | |||
__TOC__ | __TOC__ | ||
| − | =How to include CSS in your HTML document= | + | |
| − | =How to select an HTML element= | + | ==How to include CSS in your HTML document== |
| − | =How to style the chosen element= | + | 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; | ||
| + | } | ||
| + | |||
| + | ==How to style the chosen element== | ||
| + | ===text=== | ||
| + | ===box=== | ||
| + | ===flow=== | ||
| + | |||
| + | ==See Also== | ||
| + | * [[HTML CSS Javascript Reference]] | ||
| + | * [http://en.wikipedia.org/wiki/Cascading_Style_Sheets Wikipedia] | ||
| + | |||
| + | [[Category: Current Classes]] | ||
| + | [[Category: Classes]] | ||
Latest revision as of 10:42, 19 July 2014
 This page has been migrated to a document on Free Geek's Google Drive. Information remaining behind may no longer be relevant. MIGRATOR: When you have tagged this page as migrated, (Link to new page immediately below.) |
CSS, or Cascading Style Sheets, is a language created to provide style and formatting for HTML elements.
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;
}