Articles in the Cascading Style Sheets Category

Did you know that CSS is a language developed by web programmers who needed a way to have more control and flexibility when customizing the design and layout of sites on the net?

In recent years, font types, colors, and images were directly fed into a webpage with static HTML. Individual pages often mirrored others on the site with minimal changes made where content differed. The site design elements, that carried over from page to page, were copied to every single page of the site. This made .html pages very chunky increasing load time and required storage space.

So what changed?

With the introduction of CSS we became able to introduce page-wide style commands in the header of each page. The header was a centralized place to make changes across a full page but it still wasn’t enough to give us the freedom to make site-wide changes in a time effective way.

With the introduction of PHP (Hypertext Preprocessor) and ASP (Active Server Pages) however, webpages became fluid. Each page could be made ‘on-the-fly’ drawing on information that came from other webpages, other websites, and from databases around the world. With this freedom to weave information into a page we were able to step away from styling each page individually and create site-wide changes that influenced multiple pages with a single edit.

These days, .css is often the extension of a page in your site. It’s known as a ‘Style Sheet‘ and it influences your sites design and layout. The page itself is never seen by the average users of your site but the information affects the way they see everything.

Calling on Style!

In order for a style sheet to have an effect on a webpages design it needs to be ‘called’ as the site is loading. A simple command in the header of the site (between the <head> & the </head> tags), known as an ‘include’ or ‘link’ calls the style sheet. As the page loads it looks for the ‘include’ and adds that information as if it were a part of the original page, then translates the information in the style sheet, making changes to the way your page is viewed in your visitors browser.

If you have a chance, look at any of your websites rendered page and compare them with the raw code you can see when you ‘View Source’. The pages will differ based on the information ‘called’ during the loading of the page.

On PHP* pages an ‘include’ will often look like this:

<?php
include(“stylesheet.css”);
?>

You can use standard URL addresses to call pages and these can be used for all kinds of included content, not just style sheets.

However, Cascading Style Sheets have become so commonly used that new standards for calling them were created within the infrastructure the Internet.

Such as this <link> tag:

<link rel=”stylesheet” href=”http://www.writersroundabout.com/wp-content/themes/RLS-Rebecca/style.css” type=”text/css” media=”screen” />

Either method will effectively add the style sheet information to your Web page. Giving you an opportunity to dynamically affect changes across your site by updating the instance in a single, centralized location.

Want to learn more about Cascading Style Sheets? Let me know if you have any specific questions and I’ll add a new CSS primer soon! Or, if you’d rather I stick to writing about writing let me know.

* I’m doing examples only in PHP at this stage. If you prefer to work with ASP or need ASP examples please let me know in the comments.

6 August 2009

A lot of writers I work with are fantastic writers, but they have no idea how to manipulate a webpage. That’s perfect, because writers aren’t always meant to be web designers. There are two different skill-sets involved, two completely opposed frames of mine. Writers are often using their creativity and resort to their logic as needed, while programmers use their logic with occasional bursts of creativity.

In this increasingly web-dependant world we can grow our skills in all sorts of directions. So learning your way around the code behind a webpage rather than just focusing on the text upon it raises your marketability significantly.

So just what IS CSS? Why is it important?

CSS stands for Cascading Style Sheet. It’s a pretty name for a page that does some extraordinary work. Your Cascading Style Sheet can be used for any website, not just a blog. Blogs however have become truly remarkable and easily customizable thanks to these precious pages. If you’ve installed a blog theme without CSS you’ll find it challenging to change the look and feel of your page.

Your style sheet is almost always responsible for the colors of your website. It is responsible for the text sizes and fonts. It can alter your images, add interesting backgrounds, and set various segments of your website into their place on the page.

Now I know what it is, how does that help me?

Learning basic CSS can give you an incredible boost in the web industry. HTML (Hyper-text Markup Language) is a boon for bloggers and copywriters but CSS is the cream on a writer’s cap. Indeed, everyone who spends their time working online could benefit from this sort of knowledge.

Unless you’d rather hire an expert to handle it. (Feel free to email me) *winks*

With just a little commitment of time you can learn your way around your CSS page and gain a firmer grasp of your blog or website. You can learn what to look for to make specific changes. If you want to change the way your links are displayed it is a simple change to make if you know where to look and what to look for.

Would you like to learn CSS? Should I cover this topic in more depth with a series tutorial as I expand the Writer’s Round-About into RebeccaLaffarSmith.com and broaden the focus to my other areas of expertise?

15 August 2008


Keywordspy: Get Ahead In Online Advertising