Web Design (Week 5) - CSS Continued...practice, practice, practice...

This class was good...

Learning new codes to style a page...

It was mostly about practicing and remebering everything i learnt and incorporating things from the week 5 notes...my page was called Purple Princess which is what my besties calls herself...

We added colomns with header and footer, a logo image and a background image...it was kinda frustrating (i think i use this word in every blog so far) only when the CSS file wouldn't get picked up and i realized that there was the name had a space infront of it! ugh!...like seriously!...

We used <div element in the logo and mainmenu...so that meant that anchor tags has to go in the mainmenu to link or navigate to another page...like:
                                <li><a href="top">Home</a></li>
also changing the display to inline to make it go horizontal...

...well these didnt actually link to a working page..notice the list element had to be used..the colomns were split into 4 <div so that they could be navigated around the page collectively or in sections...such as using float to tell it to go right or left like:

                               #logo img   { float:left;   }

...or using clear like:

                               #logo h1  { clear:right;}

[awesome...i kno!..]

 

...we stlyed the page as i said adding a background image (to make it not repeat using - background-repeat:no-repeat)...furthermore, styling the anchor tags so when someone hover it with the cursor it can be decorative, etc... i used this:

a:link:hover {  color:white;

                      background-color:purple;

                      font:arial;

                      font-size:20px; }

...so the font size will get bigger and the word highlighted and stuff...

 

also, many specific sizes had to be used...like the background image had to be 960px wide for the body, etc..

 

It was a pretty good class...one step towards final assignment...

Wrb Design [week 9] - When I thought things couldn't get more complicated...then came CSS3...

This class was really restless by the fact that our midsemester was due today...sigh...what a relief it was to hand it over to sir before 9am!..All i could think about was the sleep i wanted when class was over. It was the most complicated assignment i've done in quite some time...I got so frustrated trying to get the css to be only one file! My mom kept saying to me "Sasha, go lie down! Sasha, go eat dinner!" and i was like "No! Not til i figure this thing out!" Every minute i kept shouting at the computer! Mommy was like "Sasha, go tek a walk! Go outside or somtin." I still was like NOPE!...

Eventually, i got it and about 10pm i figured out, with a bit help, a way to get everything to work! THANK GOD! I went to sleep about 1am and then got up like 5:30am to make sure i get ready early to send the thing to sir. I was contemplating whether to go to school and send it or find one of my neighbours. Well, cause i live in Portmore and the traffic is very very unpredictable so i went to my neighbour's house...there they don't really use the desktop because the dad has one at work, mom and so has laptop and daughter uses brother's...

Barely any mind is paid to it...but, oh well, by that time, 6:30am, the son and dad left and mom's a teacher doing work on her laptop, so i'm stuck with the desktop. Took forever to turn it on, then to get the internet window to open and after all that...the comp doesn't recognize my thumb drive. So the mom had to send the single files using her laptop to my email and i downloaded it unto the desktop and tried to zip  it/compress it them there..IT TOOK EVEN MORE FOREVER! Then i couldn't bother  with the stress so i just sent it to sir...sigh...i just hope i passed...

I got to class not too late, suprisingly...After we complained to each other about how hard it was and saw the stress and tiredness on our faces, class began anyway. We opened up a html page and css file, with 4 paragraphs (no id's, div's, etc...).

CSS3 (no duh) is an upgrade (i guess) to CSS2...The selectors and there values are what really differ. For help sir sent us to w3schools.com to look at some CSS3 selectors and their descriptions.

The first one we tried was text shadow:
                      text-shadow: 2px 2px 5px #000

That was pretty simple...
                      text-shadow: 2px 2px 5px #000
                                          (x)   (y)   (blur  (colour)
                                                      radius)

To make life a lil easier sir sent us to http://www.css3generator.com/ ....This allowed us to put a border around the paragraphs, controlling the curves at the edges, setting how much it should come in. Best thing is that we enter the amount and the preview shows you and changes everytime the figures.info change. Then at the bottom it shows you the value that can easily be copy and pasted. We even learned how to set RGB colours, how to change each paragraph by numbering it in the css selector and some others.

CSS3 was a bag of complication but turned ou pretty cool...i guess in the future we'd use it and i loved that fact that sir shows us these websites so now we don''t have be calling him every second to know how to do or use something especially in CSS...

...and then we got hungry...and class ended...lol...