Say “Bye Bye” To My Fear of Technology – Cascading Style Sheets

28 Jun

After nine weeks of blogging, here comes the final post giving you a last insight on information technology in a business world. At this time I am going to talk technological, more than ever. You might wonder about the incentives I as a female have by wanting to write about such dry, male- dominant field of study. It has a simple answer: The actual aim of this blog post is to overcome my personal fear of technology or as they say: “Don’t fear technology. It can be turned OFF!”

So why not simply jump into the pool full of data, commands, and web complexity. The first information I came across while cyber diving was the WebWork PowerPoint provided by my professor Dr. Bruce. It basically was an introduction to various topics such as databases, templates, and plug- inns. If having to write about something complicated, I was more than happy to have the possibility to choose. And if so, why not choosing something I feel quite comfortable with – Cascading Style Sheets (CSS)! In general, CSS is a powerful web tool used to describe the formatting of a document written in a markup language (HTML, XML), or as Philipp Lenssen in a Quick Guide to Web Development summarizes: “CSS are the way to layout a page“!

For some of you, it is already clear what is meant by it. For those who do not: this is my attempt of breaking it down into simple terms.

In a technological sense: What have I understood?

1. A document in markup language

First of all, you have to imagine working on a project on the World Wide Web. In our case, I opened up my last blog post on Unified Communication on WordPress to visualize the process. What I could see was my actual text split up and adjusted (marked up) by some additional instructions in brackets. If you take a look on the screenshot, I wanted my text about complexity costs to appear in a block quote. If being written in a markup language, the type setting instruction is syntactically distinguishable from the actual text. Most importantly, it is completely omitted from the text version the end- user will perceive. Still, the quote will be shown in a block.

Markup language is not exclusively limited on web or computer based technologies. Basically, a plain text can also be provided with instructions to the typesetter who then immediately knows where to put the headings, what font size to use etc. If markup content is used in a web creation process, it is mostly done be the Hypertext markup language, well known as HTML.

2. A document in CSS

As mentioned before, CSS are helpful to layout documents. Nevertheless, HTML can also design documents. So what is the reason for rather applying CSS than HTML? There are three advantages to CSS, which addresses the styles, their placement, and the fact that they can cascade.

1. Style: Let us consider wanting to include a headline particular in size and color.

If we were to type it in HTML 3.2, it would appear as the following: blue headline

Now imagine needing to insert several headlines, all of different size and color as we do in our blog posts. You would need to define font tags every time you decide to insert another headline. With CSS however, you simply declare certain restrictions before hand so that every page or element that uses the style sheet will see a headline 4 in blue color.

2. Placement: Quite interesting was to me that you could store presentation information apart from your HTML structure by either placing it in the head of a document, in an external document or an extra tag. Therefore, you just decide in advance how your page should look like and determine every single element in an individual part.

3. Cascade: Style sheets sometimes have different origins, which can be the author, the user or the user agent. If those style sheets come to overlap in scope, the one with the greatest weight takes precedence. Such weight is assigned earlier in the CSS cascade. The aim is to reduce amount of necessary definitions and instructions.

To have a final overview, you may want to take a look at this video. It is a quite nice summary of all that I’ve tried to explain to you 😉

My personal experience with CSS

So after all, I wanted to change our WordPress design and watched several tutorials in order to be prepared. However, Jeff Jensen of the video How to Edit PHP, CSS, and HTML in WordPress warned me to be aware of a non-functioning „return button“. He advised me as the true beginner to always work with a backup version. That kind of scared me since this blog is our group project and I did not really want to mess something up. Still, I found the link on WordPress where I possibly could change our blog design – from headings to background color and so on. I got the power folks! For those who want to have a piece of that powerful cake, just try follow the steps I went through in the graphic below.

Unfortunately, I have to say that CSS do not really serve me at my daily life or in my studies yet. Still I expect it to become quite crucial at the moment I am going to step into the complexity of business life. At some point I will need to distinguish myself from others, make myself being heard. This can only be done by an extraordinary web page. The more I know about my possibilities to design the page myself according to my preferences, the more personally I will reach my readers.

References:

http://www.motive.co.nz/glossary/markup.php

http://byterevel.com/2011/06/23/css-tutorial-i-what-is-css/

http://www.devshed.com/c/a/Style-Sheets/What-is-CSS/

http://www.callingallgeeks.org/css-apps-plugins-windows-macos/

Advertisements

3 Responses to “Say “Bye Bye” To My Fear of Technology – Cascading Style Sheets”

  1. garciana June 28, 2011 at 8:40 pm #

    Hey Nadja!

    I really like your writing style, you manage to explain something technological in terms that are understandable even for people who have never come accross CSS. I have to admit that your title was the first thing that caught my attention but I did not really understand what the “Canadian” part was about. Maybe it is a little typo? Or did I miss a crucial part of your text?
    Anyway, I can really see that you really put some work into the task, explaining the different parts CSS consistes of, it’s usage as well as showing us screenshots to reenforce your steps. The last part including your personal experience is particularly nice since it provides the reader with your personal learning process.

    • Nadja K. June 28, 2011 at 9:06 pm #

      Haha, yes thank you. That definitely was a spelling mistake! I will change it right now 🙂

  2. fannysia June 29, 2011 at 8:32 am #

    Hello Nadja! 🙂

    I like how you presented such complicated concept in such a simple to comprehend manner 🙂 now i understand CSS more! 🙂 all the html css codes usually scare me cos they dont really make any sense. Thanks for the videos and all the useful links! I used to play around with CSS when I was constructing my blog, and it usually pains me because it was soooo hard to understand. then, i started finding ‘themes’ to fit blogs but learning a little CSS can help customize my own blog to my own preference! 🙂
    http://www.freewpthemes.net/

    thanks for the good read, and describing to us your wonderful experience in exploringgggg this part of webwork! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: