By drupalhero |
1. Add content to your HTML file. Using the HTML file you created in chapter 2, add text and image content. I tend to use Alice’s Adventures in Wonderland, but anything will do. A great source for text is Project Guttenberg (www.gutenberg. org). 2. Markup your content. All styles require markup in the Web page to give them something to be applied to. Make sure to tag headers and paragraphs. 3. Add classes and IDs to your markup. Classes give you a “hook” to apply specific styles to specific elements. Don’t go overboard, though. Only add classes where it useful to differentiate kinds of elements and IDs to differentiate a specific element in the design. 4. Add your HTML, class, and ID declarations to the head of your document in a
| Class | Defines |
|---|---|
| w3-cell-row | Container for layout columns (cells). |
| w3-cell | Layout column (cell). |
| w3-cell-top | Aligns content at the top of a column (cell). |
| w3-cell-middle | Aligns content at the vertical middle of a column (cell). |
| w3-cell-bottom | Aligns content at the bottom of a column (cell). |
| Class | Defines |
|---|---|
| w3-layout-container | Deprecated (Use w3-cell-row instead) |
| w3-layout-cell | Deprecated (Use w3-cell instead) |
| w3-layout-col | Deprecated (Use w3-mobile instead) |
| w3-layout-top | Deprecated (Use w3-cell-top instead) |
| w3-layout-middle | Deprecated (Use w3-cell-middle instead) |
| w3-layout-bottom | Deprecated (Use w3-cell-bottom instead) |
