Difference between revisions of "CSS"
Jump to navigation
Jump to search
(intro paragraph) |
(How to add CSS to your HTML file) |
||
| Line 4: | Line 4: | ||
==How to include CSS in your HTML document== | ==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== | ==How to select an HTML element== | ||
Revision as of 00:18, 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>