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

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/