I'll start off this blog with a small introduction, my name is Cynthia Duca and I am a student at STC Malta following a course with Middlesex University where I am doing my final year for the degree in Internet Application and Development. I will be updating the post each consecutive week about our experience with a topic that we would have covered that same week.
The first week was all about creating this blog, CSS and HTML. My first action was that I started by creating this blog, it is my first time ever using a blog, but it wasn't that complicated to create and design one. When I was done with the setting up process I started straight away with the exercise of this week. Previously I had not used CSS frequently. My first two websites that I developed where simply developed through the use of coding tables. By time I understood that tables where not the best thing one could use because if you need to make some changes it wouldn’t have been that easy, that’s when CSS came handy.
For this exercise we worked on www.csszengarden.com. I downloaded the CSS and html files from that site and we had to alter some things and work around the CSS to give it a different look from the original one.
First I started by figuring what each div represents example: the quick summary represents the quote section and the page header shows the top part where there is the title. Knowing what each item is will be easier to edit the <div> that you want.
I started off by figuring out where the background image was to delete it and put a clear background.
background: #fff url(blossoms.jpg) no-repeat bottom right;
That line off code had to be modified to get the white background and changed into:
background-color:#FFFFFF;
After that I changed some font styles, I started by changing the font style of the quote and changed it a bit. quickSummary is the name of the <div> while p is to show that you want to change the <p> tag of that <div>
#quickSummary p
{
font: italic 1.2em Georgia;
text-align:center;
}
{
font: italic 1.2em Georgia;
text-align:center;
}
Then I changed the color of each heading. Headings where tagged as <h3>, therefore I had to change some styles of that heading like the color and the style.Changing styles and fonts wasn’t that much of a challenge the challenging part came when I had to change the position and allocation of certain <div> tags. Like for instance I wanted to change the menu from the right hand side to the left hand side and then move it upwards. Or else move some div tags upwards to make them all look in order and not having a huge gap between a paragraph and the other paragraph will be overlapping. This was the part that I spent most time on until I got what I wanted. Also another issue was to get the same results in different types of Browsers. There were some compatibility issues where sometimes things showed in different positions over browsers which also took a while and some patience to get it in place.
A good guide for those beginners is http://www.w3schools.com/css/ this can help you to understand and learn CSS. At least it worked with me! Creating a website is not an easy job but in the end the time you’ve spent on it would be all worth it.
How it was originally
How I changed it
