Tag: CSS

Posted on

SoMD GiveCamp Day Three (4/3/2011)

I got up and got back to work immediately on the site I was working on, Discover U Children’s Museum. It turned out the skin I made created some problems with the spatial arrangements of certain elements of the page. It also made some important things unclickable. I went into the .CSS file and quickly eliminated the possbilities, figuring out exactly what was causing the problem- and how the fix the problem without creating problems elsewhere. Editing .CSS files can become a Whack-A-Mole game like that, if you have fifteen minutes left to complete a website.

Also, the page looked bad in google Chrome, which is the browser my teammate was using. So, I made some fixes specific to Chrome.

Let me tell you, the thrill of working up the last few minutes, the thrill of knowing it absolutely has to be presented at noon, and running on all cylinders trying to get the thing done- it was a wonderful experience.

We presented our site. They asked for a new layout, and they got it. That, along with some of the other features they asked for (like and electronic archive of volunteers)- We completed about 85% of what we set out to do. At an event where you have 44 hours to get though the introductions of the nonprofit organizations, delegate responsibilities/match up volunteers with nonprofits, talk with the nonprofits, gather requirements, talk with the other members of your team, possibly learn new skills in order to accomplish the work required for the project (as I did!), and perform the tasks necessary to meet the customer requirements- 85% completion is definitely success. Oh, and of course, that 44 hours also includes eating, sleeping, and going to the bathroom.

I watched all the other teams present the websites and applications they made for other nonprofits. A few things stuck out to me:

  1. One team did a site with WordPress and finished their project in like 6 hours. Someone correct me if I’m wrong on this. Cool thing about their instance of WordPress is that one of its components is .PSD files on the server! .PSD is the native file format for Adobe Photoshop, for those not in the know.

    I exist on a web server somewhere
  2. One team made a freaking Droid application where the nonprofit organization’s volunteers are able to report their location and make it available to other members. This is kind of a new thing brought about by the internet, it’s usually referred to as “checking in”.
  3. One of the nonprofits, which provided aid to the poor,  the organization’s head admitted to recording all of her organization’s information on a Microsoft Excel spreadsheet. Who is donating money, who needs help, who is sent where to do what task, all the important information was being handled by one person and being recorded manually. It’s great to see people who have very simple needs, such as getting an automated system that can record information much more efficiently than a spreadsheet, can come to GiveCamp and and get something like that. Recording information is something that is done all the time and the ways of doing it with applications (instead of by hand with Microsoft Excel) should be within the common person’s reach.

    It's called "Excel", because that's what you *don't* do if you're forced to use this product.
The one you were looking for.
Posted on

Cvramen’s Guide to CSS, Part 2

So, I’ve told you what CSS isn’t. What is it? What does CSS do?
A CSS file sits on a server just like any other file, just like the HTML file. You have an HTML file that has stuff in it, and then a CSS file that references the stuff in the HTML file and tells it what to do. You could also reference multiple things in multiple HTML files, as long as the things have the same name.

I wrote 'menutext' and then told the table what to do. I wanted the words on the menu to be 10pt large, uppercase, bold, white, and have the font face 'Trebuchet MS'. I wrote all of this in the CSS file.
So, here we have a table with 8 different blocks of text on it. I named the table 'menutext'. Click on the image for full view.

I didn’t make anything in the CSS file, as you can see, the table with the random blocks of latin text was already there. I made the table in the HTML file and modified it in the CSS file.

On the right, what the page would look like without being modified by CSS.

And the font face of text inside tables isn’t the only thing you can alter with CSS. You can alter background color, width, height, transparency, alignment and a variety of other things (there is a specific list of properties that you can change with CSS, not to mention some proprietary ones not part of standard CSS). And you can modify not just text, but, paragraphs, hyperlinks, divs, the entire page’s background, so many things. However, this is where I start stepping on the territory of other CSS tutorials, so I will just leave you with that.

Posted on

Cvramen’s Guide to CSS, Part 1

I have recently been doing a lot of work related to CSS files recently at my Web Designer job at NAVAIR. There seems to be some confusion about what CSS is and what it does. Very few documents exist that explicitly and unambiguously state what CSS does. Doing a few search engine searches, I could not find any documents at all that explain CSS with a level of specificity that is to my satisfaction, so I am stepping forward to post my thoughts on the topic.

Chicken salad sandwich.
A chicken salad sandwich. This is something that CSS could stand for, but has nothing to do with today's topic.

If you want to know how to build a good website with CSS, some common tips and tricks for making pretty websites with CSS, or the history of CSS, that kind of stuff is already covered elsewhere on other sites rather well, so I will not be discussing that.

CSS files are essentially just files with a bunch of code in them (just like an HTML file); simple files that can be altered in any plain text editor. CSS files can be used in conjunction with a few different types of files, but are most commonly used in conjunction with HTML files, therefore that will be the context within which I will talk about them.

A screenshot of a CSS file.
What a CSS file looks like. Yup, that's about it. Just plain lines of code. No embellishments here. That's all it is.

Allow me to inform you of some misconceptions:

  1. CSS is not an all-encompassing “look and feel” solution for websites. If a web designer is given the task of editing an already-existing website and making major changes to it, he will most likely need to edit more than just the CSS files. CSS does not change the design elements of a website; it is simply a tool a web designer can use to assist in changing the design elements of a website.
  2. CSS is not a proprietary software package or content management system.CSS is simply a type of file. There are no limitations on what it can do, other than how the browser interprets the code.
  3. CSS does not add new elements to a web page’s layout.I cannot emphasize this enough. CSS cannot make things (it also can’t destroy things). It only alters the properties of what’s already there. You can’t make new things; you can only make changes to the things that already exist. The “things” in a web page’s layout are created in the HTML file. After they are created, then their properties can be modified by a CSS file.
  4. CSS is not mandatory. A website does not have to have CSS files in order to function. Some websites don’t have any CSS files or CSS code of any kind and some utilize other means for controlling the visual appearance of the website. And by that I mean, some sites are entirely Flash, which I recommend against. Websites should use CSS, but CSS is not some silver bullet that just does everything. A good website requires a holistic view, a vision- overseen by a competent individual or group of individuals.

That’s it for now. I’ll post part 2 tomorrow!

Proudly powered by WordPress