For our next class, we’ll attach an external CSS file to our HTML document. Dealing with file location and naming conventions is good content for our class meetings; for the blog, I thought it’d be best to instead go over some basics about CSS and share some links on how to get to know it better.
SYNTAX
A typical CSS rule looks like this:
h2 {
border: 2px solid black;
}
But what if we wanted to add a border to both <h1> and <h2> tags?
h1, h2 {
border: 2px solid black;
}
And what if we only wanted the border to show up underneath the text, not all the way around it (top, bottom, left, right)?
h1, h2 {
border-bottom: 2px solid black;
}
Finally, what if we only wanted the border to cover the span tag located inside an <h2> tag?
h1, h2 > span {
border-bottom: 2px solid black;
}
Hands down, the best (really, the only) way to learn CSS is to practice writing it. And the best way to do that is to follow along with a tutorial. If you visit www.elon.edu/lynda, you can log in and access the lynda.com tutorials. One I suggest is called ‘CSS fundamentals;’ it goes over the same concepts we cover in class.
Another great resource is the W3Schools: The W3C is the consortium that ‘governs’ the Internet, so this site is made by the people who run the Internet. Pretty snazzy idea, but the site is ugly. Nonetheless, it’s a good way to see and practice some CSS in action. (there’s also an HTML section)
CSS-Tricks is the best developer site out there, but most of the topics covered are too advanced to be of practical use in our class. That said, this ‘Almanac’ lists posts on every possible CSS property the site has ever talked about:
http://css-tricks.com/almanac/
Our textbook is an excellent resource for learning CSS. Chapters 11-13 deal specifically with the content of our next two classes, and Chapters 14-17 cover the content of the classes after that. The textbook also works as a great reference when coding!