Anonymous user
Github and Website Workshop/HTML CSS review: Difference between revisions
Github and Website Workshop/HTML CSS review (view source)
Revision as of 06:09, 18 February 2015
, 9 years agono edit summary
imported>Auria No edit summary |
imported>Auria No edit summary |
||
Line 89:
</code>
Style elements you can change with CSS:
You can add style by referring to▼
* background-color (remember american spelling)
* width, height (in a fixed measurement or in %)
* font-size (use em not px)
* color
* position on the page, font styling, margins and padding around the object, and MUCH more! We will be discussing these things in more depth in this workshop.
Often, in the beginning, CSS can be learned by wanting something to look a certain way and Googling which CSS properties to use.
▲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 ⟶ 108:
}
</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
| |||