A2: CSS benefits

Wednesday, January 23, 2008
(10:30 pm)

I finished programming Assignment 2. The page looks almost identical to the first assignment but in reality, I had hand-touched and re-created every single aspect of it. Although the point of the assignment was that one only need change one file in order to impact all the others, I still needed to reformat the HTML file as well because it was in such a mess. It was simpler to just start again from scratch. No more tables except for listing data. I learned more control over the layout of the page with floating blocks.

CSS is most definitely useful. Mostly because it is so intuitive. The categorization of content structure vs. formatting and styles is probably what i would have naturally done by myself.

The usual praises for CSS which are, nevertheless, very true are its simplicity and dexterity in changing styles across multiple pages. Having an external stylesheet that is linked to all the pages promotes consistency. Declaring a selector and then listing all its properties in one section is refreshing. Also, the HTML file is much cleaner and one can get a better sense of its layout. When one is editing the content, one does not need to bother about its appearance. When one is changing the style, one does not need to worry about the structure being affected. There is a nice buffer there. When one is changing things in one file, one is assured that the other is still static and dependable.

Some more benefits are that CSS enables a faster download, it enables different formats for multiple devices such as printers or mobile use. The content is intact but the style can be varied. CSS is also much more efficient because it requires less code.

Really, although there is some coordination involved in making multiple files to format an HTML, it is very worth it in the end. CSS makes files much more usable and manipulable. HTML tags within the code is very messy. CSS enables different layers and focuses for more powerful programming.

Classes vs. IDs

One would use CSS classes when one wants to format a group of objects.  IDs are only for single items.  Classes are for when there are more than one instance of the object within a page.  IDs are for when there is only a unique instance in the page.   So for example, one would use <ul class=”Navigation”> if there were many times that “Navigation” is used.  But if there’s only one, which is the case for my websites, one could use <ul id=”Navigation”>.

CSS- so familiar yet so strange.

tuesday, 1/22/08

(3:00 pm)
the deeper and deeper i go into CSS, the more i realize that i have a long road ahead of me. i thought that it’d be a simple enough assignment. simply reformat the website i’ve already made into an external file. but i realized that it needs to be completely revamped.

i had made the layout with tables. and of course, i heard today in lecture that we should NOT do that. and though there are many pages online about how to create an internal CSS style, there aren’t so many about external ones. such as how one should format the .css file and how one is supposed to call it.

the biggest problems i’ve run into were about tables. but since we’re not supposed to use them anyway, perhaps it’ll be easier. i guess i need to figure out what the <div> tags are…

wednesday, 1/23/08
(9:30 pm)

the areas that took up the most time and research were the floating blocks with div tags.  it took a little while to figure out how the blocks behaved when floating left or right or if it clears both…  Also, i played around a lot with pixel values and percentages.

the hyperlinks were frustrating.  for some reason, they kept displaying only the “visited link” color.  Even after I exited Firefox, they kept showing up in blue.  Even now, the problem isn’t really figured out.  and i even looked up the order others recommend but it still didn’t work.

one interesting thing i found was the image formatting.  i realized that the images can all be formatted to be the same size by simply defining the region they would occupy.  Then, it flexes to whatever window size the user sets.  And it looks good.  the navigation bar was also difficult to position and center.

one can make a navigation bar with the <ul> tag for a list.  similarly one can edit and format the horizontal rule in the CSS external stylesheet.  it was quite simple to change the format into something else.  though it couldn’t be changed too much because the order and content of blocks are still set by the HTML.  only the style is changed, which involves colors, fonts, sizes of blocks, etc.

martin luther king, jr. holiday

looking over assignment 2 requirements, i realized i already did some of the requirements.  like changing the hyperlink’s hover color, laying out the navigation in a horizontal line.  but i guess i’ll have to do it with new CSS wording.

i had started doing a pixar new website but realized that it’ll take way too much time.  so i guess i am just reformatting the old one.  text editor is still annoying, especially trying to save it as certain files.  i opened my external style sheet and the formatting of the lines were all off.  half of the code was trying to fit onto one line.  not fun.

i need to figure out mainly, what is structural and what is visual.  that way, i can divide them into their respective style sheets.

discovering, exploring CSS basics

1. PART ONE: .css files

(9:30 am)
started out by googling “CSS external file” like it says to on the wiki Assignment 2 page. linked to “http://www.tizag.com/cssT/external.php”

just followed the example they had up. wow! amazingly simple. i can see how it’s powerful. so for this assignment, we don’t really change too much, right? except i think i’m going to run into some problems because I think i had one header be a certain color, font, and size in one page and doubled it as something different on another page. hmm… so the appearance may be a bit different. but at least it’ll be more consistent. right?

(10:25 am)
yup, i had to change my headings. now they’re a different font and color… oh well. it still looks okay. i’ve spent most of the time renaming files and stuff. now, i’m confused about whether i can format tables in the external css file. i’m gonna go look for that… because there’s still a lot of gunk around there… like specific size of the images and table widths. i’m just afraid that in the process of making things easier with CSS, it’ll mess up the delicate balance i have. but that’s the point i suppose. we don’t just have a tenuous grasp but a confident one.

some changes that i might want to add is the feature where, when you click on something, it automatically goes to that spot on the page. i don’t want people to constantly be scrolling up and down… and maybe even have some animation going on… like the picture changes when you hover over it or something. i guess i’m just going to keep building off my old website. too much to start from scratch. but then again, it’s harder to wade through all the old bits.

(1:10 pm)
so i just spent three hours trying to find a text editor that i can easily use on a mac.  i must confess i had heretical thoughts that in this instance, windows is much better than macs because they have a simple solution:  Notepad!!!  i downloaded Emacs, tried gvim and they were really scary interfaces.  it looked very intimidating.  so i downloaded creatext, a sort of obscure, new thing but i liked the simple interface…  but then, it won’t let me save a regular .css file.  instead, i had to name it __.css.html.  but that works so i might just go along slowly…  gah!  i’m quite frustrated.

besides that fiasco, i’m going through the CSS tutorials.  i don’t trust myself to know it just by knowing basic HTML so i’m going to do a very thorough browsing.