X

Tagged CSS

Browsing all posts tagged with CSS

Marketer’s Toolbox: HTML & CSS

The Marketer's Toolbox will be an ongoing series in which I explore the critical hard and soft skills all marketers should possess.

HTML & CSS

Whether you're an amateur, a professional, or someone considering marketing as a career path -- the skill set I will outline throughout this series is part of what defines you as a marketer and how you are perceived in the workplace.

Part of my journey in developing this blog was taking on the challenge of teaching myself HTML, now evolved into XHTML, and CSS. A daunting task at first but a supremely beneficial one given the skills I now possess.

The Basics

HTML: Hypertext Markup Language -- A specialized language consisting of tags and rules used to build websites, emails, and other multimedia online.

XHTML: Extensible Hypertext Markup Language -- A stricter and cleaner version of HTML that acts "as a reformulation of HTML to an XML application".

CSS: Cascading Style Sheets -- Style sheets are used in conjunction with HTML/XHTML documents to specify formatting of all content defined in the document.

The ability to code effectively in HTML and CSS is often underrated. One can possess the skill but still not be fluent in the language. It is in fact another language that appears overwhelming at first but the foundations of the two are extremely basic. It is the mastery of them that can be more of a challenge.

When I decided to learn, I already possessed a rudimentary understanding of HTML but what I wanted to achieve was fluency. I applied myself and set the goal of designing AND coding my own website. This blog has certainly evolved from its first iteration (and will continue to do so) and my coding has also enhanced to a point where I am comfortable in an HTML environment.

Websites vs. Emails

There is a stark difference between coding for a website and for an email. For a website, tables are deprecated styles and should not be used to formulate the structure of the site, instead CSS should provide that structure in terms of positioning, formatting and look.

However, emails do not follow the same methodology. This is due to the wide array of email clients available to users (i.e. Outlook 2003/2007, Gmail, Yahoo, Hotmail, etc.). In order to ensure your email appears as it should in all clients, tables must be relied upon with a high level of proficiency. CSS is unreliable in email clients and must be limited to a minimum until email standards are enforced across all clients.

Understanding this difference is critical to being able to work in both environments.

Cross-Browser Compatibility

Along with the distinction between email and website, is the harsh distinction that exists between browsers -- Safari, Internet Explorer 6, 7 and 8, Firefox, Opera, Chrome. As with email clients, browsers also possess their own quirks and differences but do offer more standardization.

However, you should always test your code in all major browsers to determine whether or not the email and/or website appears without flaws and erroneous code.

TIP: Always start with Firefox, it is considered the truest browser in its translation of your HTML and CSS and will consistently present your code accurately. From Firefox move to Internet Explorer and Safari, and then the rest. (IE8 is now available but many are still operating on version 7 (and far too many on version 6) which can be problematic for your code, so keep this in mind.)

To learn on your own, try these great resources:

W3Schools - Learning centre for web developers

Lynda.com - Online training for all mainstream software solutions

NeTTuts - Converting your PSD Design into HTML

Cheat Sheets - For HTML and CSS

Contact me

Have a question? Comment?


Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/s/i/m/simren/html/wp-content/themes/simplekey/header.php:3) in /home/content/s/i/m/simren/html/wp-content/themes/simplekey/content-contactform.php on line 2

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/s/i/m/simren/html/wp-content/themes/simplekey/header.php:3) in /home/content/s/i/m/simren/html/wp-content/themes/simplekey/content-contactform.php on line 2

Get in touch

Name: Simren Deogun