Anonymous user
Github and Website Workshop/HTML CSS review: Difference between revisions
Github and Website Workshop/HTML CSS review (view source)
Revision as of 02:18, 28 February 2015
, 9 years ago→Style elements you can change with CSS
imported>Auria No edit summary |
imported>Auria |
||
| (6 intermediate revisions by the same user not shown) | |||
Line 20:
<code>
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Welcome to my website!</title>
</head> ▼
<link rel="stylesheet" type="text/css" href="template.css">
<body> ▼
Hello world!
</html>
</code>
Line 89:
</code>
===Style elements you can change with CSS===
You can add style by referring to▼
* [https://developer.mozilla.org/en-US/docs/Web/CSS/background-color background-color] (remember american spelling)
* [https://developer.mozilla.org/en-US/docs/Web/CSS/width width], https://developer.mozilla.org/en-US/docs/Web/CSS/height height] (in a fixed measurement or in %)
* [https://developer.mozilla.org/en-US/docs/Web/CSS/font-size font-size] (use em not px)
* [https://developer.mozilla.org/en-US/docs/Web/CSS/font font] can be used to apply a bunch of font styling - see the live example in the link
* [https://developer.mozilla.org/en-US/docs/Web/CSS/color color] (text colour)
* [https://developer.mozilla.org/en-US/docs/Web/CSS/margin margin] - the space that exists around the element
** <tt>margin: 0 auto;</tt> has two values after margin - the first (0) applies to top and bottom, the second (autho) applies to left and right
** auto left/right centers the div horizontally, which is good for your <body>
* [http://www.w3schools.com/cssref/pr_class_position.asp position] determines how your element is positioned on your page - relative to other elements or not
* [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index z-index] - by default HTML elements have a z-index of 1, and elements with higher z-indices will overlap those with lower z-indices
* [https://developer.mozilla.org/en/docs/Web/CSS/display display] - determines whether or not you can see the element, and its rendering box (e.g. block like div, or inline like span)
* [https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius] can round corners or make circular elements
Often, in the beginning, CSS can be learned by wanting something to look a certain way and Googling which CSS properties to use. So feel free to look up stuff you'd like to do, or ask a mentor!
▲You can add style by referring to the HTML tag
* we call this tag (in the following example it's ''body'') a selector
<code>
body{
Line 98 ⟶ 115:
}
</code>
Don't forget the curly brackets for each selector, and to put semi-colons after each line with a property-value pair!
=== Selectors: IDs and Classes ===
* What if you want to style only one div, and not all of them?
* div is a selector, but we can select certain elements in HTML to style by giving them classes or IDs
* IDs should only label a single html element (e.g. the navbar), but classes can be applied to multiple elements (e.g. certain groups of text that you want a different colour)
* These should be specified in the tag
<code>
<nowiki><div class="love"></nowiki>
<nowiki><h1 id="cs">I love CS</hi></nowiki>
<nowiki></div></nowiki>
</code>
* To style IDs in the style-sheet use a hash sign
<code>
#cs {
….
}
</code>
* To style classes in the style-sheet use a period
<code>
.love {
…
}
</code>
===Hover===
You can also change the way something looks when you hover over it. For example:
<code>
#navbar a:hover {
color: #000099; /* blue */
}
</code>
we’re styling <a> tags inside #navbar in the case when the mouse is hovering
| |||