HTML to CSS is an art few can develop, so we at Design Magazine would like to let you in on what you need in order to succeed.
First, a few important things to get you started on your journey:
- Use a DOCTYPE or you’ll throw browsers into quirks mode. Preferably Strict so that scripts such as Cufón (a jQuery script for Font Substitution) works better.
- Reset your CSS so you can apply the styles you want to elements.
Now, a little bit of history:
Cascading Style Sheets (CSS) is a style sheet language used to set the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML.
Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup: all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. HTML to CSS allows authors to separate information from style or aesthetics by using a stylesheet, resulting in considerably simpler HTML markup.
The CSS3 specification is divided into several documents called “modules”. Each module adds new capabilities or extends features defined in CSS2, thus preserving backward compatibility.
And yes, some people still wonder why it’s necessary to use CSS. So, just so everyone knows what the advantages are, we’ve listed them here:
- Flexibility – This allows a contributor, who may not be familiar or able to understand or edit PSD to HTML5 code to select the layout of an article or other page they are submitting on-the-fly, in the same form. When working with large-scale, complex sites, with many contributors such as news and informational sites, this advantage weighs heavily on the feasibility and maintenance of the project.
- Separation of content from presentation – CSS facilitates publication of content in multiple presentation formats based on nominal parameters for PSD to HTML5 optimization.
- Site-wide consistency- If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made by editing rules in the global style sheet.
- Bandwidth – A stylesheet, whether internal to the source document or separate, will specify the style once for a range of HTML elements selected by class, type or relationship to others. An external stylesheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded, further reducing data transfer over a network.
- Page reformatting – With a simple change of one line, a different style sheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices.
CSS3 gives you the power power to select every third table row starting with the fifth one, or the first paragraph within another element or selecting any list item that is the last item on the list. There is the addition of RGBA, a color mode that adds alpha-blending to your favorite HTML to CSS properties for great buttons making.
Now go ahead and share your experiences with us!