Assignment 4: Chapter 3
Read and work your way through Chapter 3. Do all the examples, bring your questions to class or email me throughout the week. Continue exercises regarding the “bubble under website.” Be prepared for me to check your progress.
Review of Chapter 3
- One major thing to keep in mind with CSS is that you are separating style and content. On a side note, I think this is also true for InDesign; I believe there are many similar concepts shared between InDesign and HTML/CSS. One example is the bad practice of putting two paragraph spaces between paragraphs for extra space. Whether it’s a print or web document, this is an inefficient practice. Use style sheets to put space between those paragraphs. Do your absolute best to never have empty HTML tags. It will work, but it’s not the way it was intended to work. Like I pointed out, no website is perfect, but you will continually practice in attempting to build a perfect website.
- Do not use inline styles. You will know when it is the right time to use them. A typical usage is for graphical emails since you cannot always use external CSS files. For example, Gmail will completely strip and HTML header from emails.
- Think of the <span> tag similar to character styles in InDesign. It’s typically used inside paragraphs, but understand that it is an inline element, so it’s meant to “flow” with text and images.
- Embedded styles are CSS styles that reside in the <head> section of your HTML document. Again, this comes in handy for graphical emails and other special situations, but still not as effective as external stylesheets.
- Linking stylesheets is the same deal as images and other web pages. The HREF attribute works the same for every HTML element.
- Understand caching. This can be a real problem. Whatever browser you are using, know how to empty the cache or ask me how.
- I get my hex values right out of Photoshop: just bring up the color picker and you can get the value for any color spectrum.
- The book introduces things like using percentages to set your line height and name values for font size. This is not exactly the most common practice, so be just aware. Especially if you are hardcore into typography (and I hope you are or at least will be if you continue to practice graphic design). Here is where you should begin to follow blogs, typically on Facebook or twitter, or RSS if that is your thing. But you should try and keep up with the industry trends and learn about what other web developers are doing or experimenting with. The book is only going to scratch the surface.
- A question from last class was about <strong> vs. <b> tags, and <em> vs. <i> tags. I like how the book explains it so go with that.
- CSS contextual selectors may not be easy to grip right off the bat. Get into the habit of actually “saying” and putting your CSS statements into an actual sentence. The example from this chapter:
#tagline p {You would stay, “All <p> tags inside the element with ID tagline will be styled italic, with this font-stack, etc.” Trust me, just talk it out when you are writing CSS.
font-style: italic;
font-family: Georgia, Times, serif;
} - Group styles when appropriate; it’s easier to maintain and makes your CSS files smaller (remember, everything has to be downloaded so the the smaller the file sizes, the better).
- CSS is read “down” so the latter definition will win. This can also be a method to “undo” previous styles if you find yourself in a situation that calls for it. It’s understandable to think of CSS as “additive” but you can use CSS just as easily to “turn off” styles just like you turn them on.
- Important: understand class vs. ID; ID’s can only be used once per page and classes can be repeated.
- Limiting classes to specific elements is a powerful feature of CSS. Understand that
#header .buttonis targeting a completely different object than#footer .button - Also understand the space in between ID and class names can make a huge difference. So
#footer .buttonmeans “target all elements inside of #footer that have a class name of .button. But if you remove the space and have#footer.buttonit means something completely different. It means “target the element with an ID of #footer that also has a class name of .button. Talk to me if you need help understanding this.