Working with
CSS is more akin to sculpting with clay: you begin with something simple and then gradually
fashion your layout. Making changes, tweaks, and even additions at a later date is simpler,
and the whole process feels more organic.
Long-time web designers may feel intimidated by CSS because they don??™t initially have the
skeleton layout of table borders to work with. In some ways, CSS sits at the extremes of
web technologies, being both very graphic and design-like (in its flexibility), but also quite
technical (in how it??™s created). Tables tend to sit in the middle of these two extremes.
However, once you get the hang of CSS workflow, it soon becomes second nature. Now,
we??™ll look at how to create a web page structure, and we??™ll then recap the CSS box model.
Creating a page structure
We??™ve covered semantic markup??”that is, using HTML elements for the purpose for which
they were created. This theme continues when working with CSS-based layouts. With
tables, cells are used to lay out a design and are merged, split, chopped, and changed until
everything works visually. But when working with CSS, you need to be aware of the structure
of your web page from the start. That way, you can create structural elements with id
values that relate to their purpose, and then style them to suit.
For basic page structure, you mostly work with the div element. This element has been
around for some time, but used to be used for aligning text left, right, or centrally.
Pages:
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363