39
edits
HTMLCourse Basic/Notes/Week2: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 43: | Line 43: | ||
<h2>Set-up: adding CSS to HTML</h2> | <h2>Set-up: adding CSS to HTML</h2> | ||
<p>To make the HTML respond to our CSS styles, there are a few options. The first is to use the style attribute inside a tag, as we did in last week's HTML class. A big advantage of CSS, though, is being able to separate style from content, so using this "inline" method is not ideal. The second way is to put our CSS definitions inside a <style> tag in the <head> section of HTML:</p> | <p>To make the HTML respond to our CSS styles, there are a few options. The first is to use the style attribute inside a tag, as we did in last week's HTML class. A big advantage of CSS, though, is being able to separate style from content, so using this "inline" method is not ideal. The second way is to put our CSS definitions inside a <style> tag in the <head> section of HTML:</p> | ||
<pre><head> | <pre> | ||
<style type="text/css"> | <head> | ||
<style type="text/css"> | |||
h1 { | h1 { | ||
color: #990000; | |||
} | } | ||
h2 { | h2 { | ||
color:#ccff66; | |||
} | } | ||
p { | p { | ||
color: #3333333; | |||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
</pre> | </pre> | ||
<p>This method is preferable to inline styles, but we still have the style definitions in our HTML file. Ideally, the CSS should be completely separate from the HTML. We can do this by creating a CSS file and then linking it to the HTML file. The link to the stylesheet will go inside the <head> area of the page.</p> | <p>This method is preferable to inline styles, but we still have the style definitions in our HTML file. Ideally, the CSS should be completely separate from the HTML. We can do this by creating a CSS file and then linking it to the HTML file. The link to the stylesheet will go inside the <head> area of the page.</p> | ||
<pre><head> | <pre><head> | ||
<link rel="stylesheet" type="text/css" href="style.css" /> | |||
</head> </pre> | |||
<div class="exercise"> | <div class="exercise"> | ||
<h3>Exercise</h3> | <h3>Exercise</h3> | ||
| Line 68: | Line 71: | ||
For example, a div tag like this: | For example, a div tag like this: | ||
<pre> | <pre> | ||
<div id="navigation"> | <div id="navigation"> | ||
nav bar goes here | nav bar goes here | ||
</div> | </div> | ||
</pre> | </pre> | ||
would be styled in CSS using the pound sign (#) like this: | would be styled in CSS using the pound sign (#) like this: | ||
<pre> | <pre> | ||
#navigation{ | #navigation{ | ||
background-color: #ccc; | background-color: #ccc; | ||
} | } | ||
</pre> | </pre> | ||
| Line 84: | Line 87: | ||
will be styled using the period (.) like this: | will be styled using the period (.) like this: | ||
<pre> | <pre> | ||
.highlight{ | .highlight{ | ||
border: 1px solid #333; | border: 1px solid #333; | ||
background-color: yellow; | background-color: yellow; | ||
}</pre> | }</pre> | ||
| Line 139: | Line 142: | ||
<p>Example of the font-family property:</p> | <p>Example of the font-family property:</p> | ||
<pre> | <pre> | ||
p{ | p{ | ||
font-family: Verdana, Arial, Helvetica, sans-serif; | font-family: Verdana, Arial, Helvetica, sans-serif; | ||
} | } | ||
</pre> | </pre> | ||