June 10, 2010 Zee

CSS and Web Design

Everybody’s talking CSS, CSS, CSS. I’d almost had it up to my chin until I felt I just had to know what they were talking about else I’d kill someone. And so began my quest.

css - cascading style sheets

As a web designer, all I ever knew and was comfortable with was HTML. I wasn’t so crazy about code as far as I was concerned. Then came the almighty PHP and web designers were digging in like crazy, but I held fast – I wasn’t going to turn into a developer overnight; and my brain always had issues with anything remotely complex – weird, cause I happen to have a degree in mathematics. So what did I learn? Was CSS coding or design?

First off, I spoke to my friend, Mike Lane (@mlane on twitter) and asked him to help with as many CSS resources as he could find, and then I downloaded a couple of CSS PDF Materials and found myself spending the usual sleepless nights working on real cool codes. And then found out Sitepoint was giving away CSS Videos, and guess who was interested? So armed and saturated for my CSS inquiry, I started reading, and here’s what I found:

1. CSS isn’t hard!

Yup. And boy, was I excited to learn so. In minutes, I was hand coding a site design I was working on, and I had plenty of fun doing so.

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.

2. It’s got STYLE

That’s the whole essence of CSS: style. And this is what W3C says about CSS:

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

3. You’re not a real designer until you know CSS

I really can’t believe I learnt web design without knowing code. In fact, if I may confess, I learnt web design using FrontPage 2000. So I had no real experience with code, because Dreamweaver is a WYSIWYG editor and you just can’t learn code using those kind of platforms. I had absolutely no idea what Tags were, what html meant, and what on earth were div tags?

But what kind of designer doesn’t know at least one form of code? And what kind of designer doesn’t use CSS? I used to spend hours using Dreamweaver layouts on my pages and sometimes, I’d be designing greater than 10 pages or more, and I did them page by page. I tell you, it was not only tedious but time consuming. CSS makes design less stressful and more beautiful, and real designers know this!

Like, in reality, I know the code below looks hard, but to tell you the truth, its not.

#27things {
font-size:small;
text-align:center;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
color:red;
}
.leader {
font-family:”Arial Black”, Gadget, sans-serif;
color: gray;
}
p.leader {
text-align:center

This article isn’t meant to be a tutorial, it’s just meant to show you that CSS is a must-tool for you as a web designer.

4. They solve a Problem

I lifted this quote from W3C’s site:

HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers – Netscape and Internet Explorer – continued to add new  HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document’s presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) – the non profit, standard setting consortium, responsible for standardizing HTML – created STYLES in addition to HTML 4.0.

All major browsers support Cascading Style Sheets.

If the old ways of designing web sites were problematic, and CSS actually helps solve that problem, why aren’t we using it? In Nigeria, very few designers use CSS. Yea, they’re good with HTML, PHP, SQL,  and all those hard to swallow codes, but when it comes to CSS, you hear stuff like, “I’ll learn it later,’” and all sort of jumbling excuses.

Like I said, this isn’t a tutorial. Ever since I watched SitePoint’s Videos on CSS, I have totally changed my mind.

CSS gives me the power to do anything I like with my web pages, and DW CS4 is an added blessing because of its full support for CSS over HTML.

Enjoy.

, , , , ,

Zee

Pishon Design Studio is an A-list Web Design & Branding Company. This blog focuses on latest trends in technology & social media. Follow on Instagram!

Comments are closed.

error: Content is protected !!