3.5: Using CSS for Graphical Formatting
3.5.1: Background Colors and Images Using CSS
Background properties in CSS allow you to specify colors or images as the backgrounds to create visual interest on a website.
Create a few style sheets with which to experiment with background properties. Try applying colored backgrounds to elements of your HTML file. Then, try applying images as backgrounds.
3.5.2: The Element-Box Model in CSS
These articles provides a very clear explanation of the element-box model (or simply "the box model") in relation to borders and margins and padding.
Be sure to read both articles.
Read these articles, which discuss the fundamentals of laying-out, organizing, and graphically formatting an HTML document using CSS depend on a thorough understanding of the element-box model.
After experimenting with the interactive elements on each of these pages, try to use the element-box model to modify the paragraphs, headings, tables, lists, and images you have included in your example webpage.
3.5.3: Positioning and Sizing Elements using CSS
This article provides a very clear explanation of some simple use cases for alignment and indentation using inline and embedded CSS. Note that he uses the "<div>" tag, which we have not yet learned about. Don't worry: the techniques for indentation and alignment he provides are useful for all of the elements you have already learned!
Oftentimes, you will want to select where or what size on a page you want an element to display. The CSS positioning properties allow you complete control over where elements appear. Ultimately, we will use these properties to create sophisticated designs; for now, however, after experimenting with the interactive elements on these pages, try to use the CSS positioning properties to place images of different sizes in different places on your example webpage. Make sure that you master the "float" properties so that you can wrap words around an image.
Ultimately, we will use these properties to create sophisticated designs; for now, however, after experimenting with the interactive elements on the above pages, try to use the CSS positioning properties to place images of different sizes in different places on your example webpage. Make sure that you master the "float" properties so that you can wrap words around an image.
3.5.4: Formatting Tables using CSS
The default styles for tables often do not match with the graphical design specifications for a website. Fortunately, CSS allows us to modify many of the graphical characteristics of tables.
Using you have already learned about the box model and the techniques demonstrated in this chapter, try applying CSS sizing and positioning styles to the tabular data in your example webpage.
3.5.5: Formatting Lists using CSS
The default styles for lists are often quite limiting; in order to develop lists that match your graphic design specifications, you will usually need to use CSS to change how the semantic content stored in HTML lists is displayed. In the next unit, we will learn to use CSS to style special lists to create menus for multi-page websites.
Using you have already learned about the box model and the techniques demonstrated in the above chapter, try styling the lists in your example webpage.