Github and Website Workshop/HTML CSS review: Difference between revisions

← Older edit

Github and Website Workshop/HTML CSS review (view source)

Revision as of 02:18, 28 February 2015

1,346 bytes added , 9 years ago

→‎Style elements you can change with CSS

Anonymous user

imported>Auria

Revision as of 02:10, 23 February 2015 (view source) imported>Auria (→‎HTML Skeleton) ← Older edit		Latest revision as of 02:18, 28 February 2015 (view source) imported>Auria (→‎Style elements you can change with CSS)
(3 intermediate revisions by the same user not shown)
Line 19: <code> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> Line 29: Hello world! </body> </html> </code> Line 90: ===Style elements you can change with CSS=== * [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 * color * [https://developer.mozilla.org/en-US/docs/Web/CSS/color color] (text colour) * 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. * [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!