39
edits
HTMLCourse Basic/Notes/Week2: Difference between revisions
no edit summary
(Created page with "<h1>Introduction to CSS</h1> <h2>What is it?</h2> <p><strong>CSS</strong>, or <strong>Cascading Style Sheets</strong>, is used to apply visual design to HTML elements. The use of...") |
No edit summary |
||
| Line 19: | Line 19: | ||
<p>We'll set the text color on the paragraph tag:</p> | <p>We'll set the text color on the paragraph tag:</p> | ||
<pre> | <pre> | ||
p{ | p{ | ||
color: #990000; | color: #990000; | ||
}</pre> | }</pre> | ||
<p>The name of the property is followed by a colon, then the value of the property. Each line ends with a semicolon. For the color property, the value is represented here as a hexadecimal color code. </p> | <p>The name of the property is followed by a colon, then the value of the property. Each line ends with a semicolon. For the color property, the value is represented here as a hexadecimal color code. </p> | ||
| Line 34: | Line 34: | ||
<pre> | <pre> | ||
li{ | li{ | ||
border:1px solid #333333; | |||
} | } | ||
p { | p { | ||
| 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><head> | ||
<style type="text/css"> | |||
h1 { | |||
color: #990000; | color: #990000; | ||
} | } | ||
h2 { | |||
color:#ccff66; | color:#ccff66; | ||
} | } | ||
p { | |||
color: #3333333; | color: #3333333; | ||
} | } | ||
</style> | |||
</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> | ||