Go here to get started: http://bit.ly/css-starter
Follow along: https://alexanderson1993.github.io/presentation-beginner-css
Learn about Styling the Web
You teach yourself
Lots of interaction - http://bit.ly/css-starter
Selectors - What HTML element(s) get the style
Properties - What style changes are added to the element
Values - Applied to properties to affect the style
<p></p>
- p {}
<span></span>
- span {}
<div></div>
- div {}
#
<p id="never"></p>
- #never {}
<span id="going"></span>
- #going {}
<div id="to"></div>
- #to {}
.
<p class="give you up"></p>
- .give {} .you {} .up {}
<span class="never going to"></span>
- .never, .going, .to {}
<div class="let you down"></div>
- .let, .you, .down {}
p, span, div {}
h1, h2, h3, h4, h5, h6 {}
accelerator azimuth background background-attachment background-color background-image background-position background-position-x background-position-y background-repeat behavior
border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width
bottom caption-side clear clip color content counter-increment counter-reset cue cue-after cue-before cursor direction display elevation empty-cells filter float
I got bored of writing them all out.
color: red; font-size: 40px; border-bottom: solid 4px white; padding-top: 40px;
<p style="color:red; border: solid 1px black">Hello</p>
<style>p {color: green}</style>
<link rel="stylesheet" type="text/css" href="style.css">
Same as last time, but starting with CSS
Same as last time, but do the CSS Stuff