Choosing between CSS and SVG (Part 2/2)

Now, let's take a look at CSS.

CSS (Cascading Style Sheets)

CSS has been around a long time, and is really versatile. I picked it up almost fifteen years ago, and to this day I don't think I've managed to plumb even half of its depths. As browsers evolve, so, too, has CSS.

Use Case. For styling pages, specifying layout and such, CSS is the tool to use, no question. And that's because CSS is the only tool that can be used for this, right now. You can't use SVG to style a page unless your entire page is an SVG, which would be really bad for SEO.

Cross-browser compatibility. CSS has had issues with cross-browser performance and capability, but most browsers do support CSS, albeit with variations in implementation that will be worked out over time. Not to say CSS isn't sometimes a pain in the ass in this regard, but SVG can be much worse. Internet Explorer, in particular, doesn't render SVG well.

Power. The power of CSS isn't in its versatility (though that certainly doesn't hurt), but its organizational ability. With judicious use of CSS rules, you can organize site structure in such a way that maintaining the look and feel, or even making wholesale changes, is much less hassle than it needs to be.

CSS is easier to organize.

SVG, on its own, does not have that capability. Maintenance can become a right mess.

<svg height="210" width="500">
    <circle cx="150" cy="250" r="140" stroke="green" stroke-width="4" fill="yellow" />
    <rect width="300" height="100" stroke="green" stroke-width="4" fill="red" />
    <line x1="0" y1="10" x2="200" y2="200" stroke="blue" stroke-width="2" />
    <line x1="10" y1="20" x2="100" y2="200" stroke="blue" stroke-width="2" />
    <line x1="0" y1="30" x2="200" y2="200" stroke="blue" stroke-width="2" />
    <line x1="10" y1="40" x2="100" y2="200" stroke="blue" stroke-width="2" />
    <line x1="0" y1="50" x2="200" y2="200" stroke="blue" stroke-width="2" />
    <line x1="10" y1="60" x2="100" y2="200" stroke="blue" stroke-width="2" />
    <line x1="0" y1="70" x2="200" y2="200" stroke="blue" stroke-width="2" />
</svg>

Compared to CSS, which can cascade rules for maximum effect.

<style>
    .myStyle
    {
        font-family: arial;
        font-size: 16px;
    }

    .myStyle h1
    {
        font-size: 1.5em;
    }

    .myStyle ul li
    {
        font-size: 0.85em;
        font-weight: bold;
    }
</style>

<div class="myStyle">
    <h1>Header</h1>
    <p>Sample text</p>
    <ul>
        <li>Line 1</li>
        <li>Line 2</li>
        <li>Line 3</li>
        <li>Line 4</li>
    </u>
</div>

Preprocessor languages such as LESS and SASS add even more power to this organizational ability, providing added oomph through mixins, variables and hierarchy.

My recommendation

Don't choose one over the other. Learn both. SVG can be styled using CSS, and it's a killer combo - the power of SVG coupled with the organizational abilities of CSS.

<style>
    svg
    {
        width: 500px;
        height: 210px;
    }

    svg circle
    {
        stroke: green;
        stroke-width: 4;
        fill: yellow;
    }

    svg rect
    {
        stroke: green;
        stroke-width: 4;
        fill: red;
    }

    svg line
    {
        stroke: blue;
        stroke-width: 2;
    }
</style>

<svg height="210" width="500">
    <circle cx="150" cy="250" r="140" />
    <rect width="300" height="100" />
    <line x1="0" y1="10" x2="200" y2="200" />
    <line x1="10" y1="20" x2="100" y2="200" />
    <line x1="0" y1="30" x2="200" y2="200" />
    <line x1="10" y1="40" x2="100" y2="200" />
    <line x1="0" y1="50" x2="200" y2="200" />
    <line x1="10" y1="60" x2="100" y2="200" />
    <line x1="0" y1="70" x2="200" y2="200" />
</svg>

I might be a bit biased here because that's the route I took, but my recommendation would be to learn CSS first because the use case is more prevalent. After you've mastered a certain amount of CSS, using it to complement SVG should be a breeze.

Stylishly yours,
T___T

So you want to be a Web Developer? (Part 1/4)

Think web development's the life for you? Want to get your hands dirty and be part of the process? Want to get into the industry but aren't sure what skills to pick up? Hey, look no further. This four-parter shows you the bare minimum you'll need to get started.

If we exclude design and SEO, which are just about separate and distinct disciplines anyway, the areas you'll want to look into are front-end, back-end and databases.

Front-end

If you're thinking HTML, you're right. But only partially right. What you should really be thinking of is HTML, JavaScript and CSS. Seriously, if you only know HTML, don't even bother mentioning it to an interviewer.

I thought JavaScript and CSS were optional!

Technically, it's true that HTML can work on its own, while JavaScript and CSS need to be embedded in a HTML page in order to work. In practice, we have a term for aspiring web developers who only know HTML: secondary school kids. You can make a living with only knowledge of HTML. But unless you want to spend your entire career writing EDMs, do consider picking up the rest.

We live in an exciting age where JavaScript and CSS are no longer just nifty add-ons to make your pages more interesting. Knowing JavaScript is a precursor to mastering AJAX, which adds a whole new dimension to the interactivity of your pages altogether. And CSS is great for styling and layout, and pretty damn useful for large-scale projects. That's not even mentioning the fact that CSS3 now does for web development what Flash did years back - great animations.

What you must know

You'll need to know all these like the back of your hand. Off the top of your head. It better be more familiar to you than your mother's birthday.

For HTML,
- Basic page anatomy, ie head and body tags, and what goes into each.
- Form elements and their attributes.
- Color codes.
- W3C Compliance.

For CSS
- Text formatting.
- Layout, in particular the position property.
- Responsive and adaptive design.

For JavaScript
- The DOM (Document Object Model), elements and properties.
- Data types.
- Operators.
- Number and date formatting.
- Arrays.
- Programming constructs, ie. For, While, If-Else, etc.

HTML5

When you're done with basic HTML, know the ins and outs of form and page elements, the next useful thing to know would be HTML5. It's the way of the future, or at least it will be once the World Wide Web Consortium stops dicking around and actually cements some industry standards.

More about HTML5 (http://www.w3.org/html/wg/drafts/html/master/)

Good-to-haves

I would never recommend that you start off with these. But they're such a mainstream part of the web development landscape, they're worth a mention. If you're up to speed with the basics, you may want to consider expanding in the directions listed below.

HTML5 Boilerplate and Twitter Bootstrap work great if you're pressed for time and you're trying to make it look like you know your shit.

HTML5 Boilerplate (https://html5boilerplate.com/)
Twitter Bootstrap (http://getbootstrap.com/)

If you're good with JavaScript, JavaScript libraries such as jQuery or MooTools is the next logical step in that direction. You'll do fine without them because they can be a right pain in the posterior. But they're respectable items in the resume.

jQuery (http://jquery.com/)
MooTools (http://mootools.net/)

CSS Frameworks such as SASS and LESS would come after you've mastered CSS syntax. Again, not compulsory. Know your basics first.

SASS (http://sass-lang.com/)
LESS (http://lesscss.org/)

And then there are the CMS platforms. These require a quite a bit of tweaking, a lot of it on the front-end. There are two ways to interact with these - as a non-technical user, and as a developer. You will, of course, be doing the latter.

WordPress (https://wordpress.org/)
Drupal (https://www.drupal.org/)
Joomla! (http://www.joomla.org/)
Magento (http://magento.com/)

For the record, I absolutely hate this crap. Worked with Joomla! and WordPress over a year, and never found a reason to like them.

What are my career options?

If you only know HTML, there's still a job for you in Marketing. You know those mass emails they send out, with advertisements, newsletters and all that jazz? Those are called EDMs. (Electronic Direct Marketing). Since email clients have not caught up with browser standards, the safest way to render them would be using only HTML - no CSS, no JavaScript, no forms.

But that kind of job pays miserably. Plus, if you say you want to go into web development, I assume that means you're up for a challenge.

If you know your HTML, CSS and JavaScript, and know the best practices that come with using them (W3C Compliance and cross-platform compatibility, etc), and don't wish to expand your skill-set any further beyond the front-end, you can still hack it as a Web Designer.

Next

What you need to have in your back-end repertoire.