Creating the Look with CSS3
Each HTML element has a number of attributes you use in the code to modify the look or function of that element. The style and related attributes adjust the size, color, placement, borders and other physical aspects of the element. Over the years of the Web's lifespan, site developers widely adopted the practice of separating style from content. By making this separation, developers enjoy the following advantages:
- Less code to maintain: Multiple elements across multiple Web pages can share the same styles without repeating the styling code for each one.
- Easier maintenance over time: Updating to a new style, or fixing an existing one, means changing only one piece of styling code rather than updating each element using that code.
Therefore, while styling can be placed in line with the HTML code, the more popular choice for Web developers is to use Cascading Style Sheets (CSS) to manage all the styling code associated with a Web site. The HTML for each page can reference one or more style sheets, which your browser should load when the page loads. These style sheets, in the form of CSS files, are intended to mimic what you might enter using <style> tags within the <head> block in HTML.
While a guide to writing and using CSS is beyond the scope of this article, be sure to grab your own copy of a comprehensive reference for CSS3. The following is a summary of things you can do with CSS3 which complement the HTML5 standard:
- Apply a style to an element based on it having a specific attribute.
- Remove a style for all elements in a specific class.
- Lay out the page with the flexible box layout to counter the challenges and shortcomings of floating div blocks.
- Include a font file and associate it with a custom font-family label to use throughout the CSS.
- Add a shadow (text-shadow) or outline (text-stroke) to the font for text elements.
- Specify a color using the RGBA format.
- Make use of popular visual elements, including rounded corners, gradients, shadows, reflections and border images.
- Adjust the opacity of an element.
- Add more elaborate transition animations for elements.
- Move, rotate, scale or skew an element with the transform attribute.