Difference between revisions of "CSS"
| 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. | CSS, or '''C'''ascading '''S'''tyle '''S'''heets, is a language created to provide style and formatting for HTML elements. | ||
Latest revision as of 11: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;
}