Weekly Reflection – Week 12

This week I had not formal lecture again but I did get set a task of replicating a small website in my seminar. It was a small 4 page website that used basic HTML and CSS. It taught me a few good techniques actually. Like how to use the CSS tag “float” to position content on a web page and how to can set a HTML class to an object and then use CSS to style that particular item differently from other similar items. For instance I might want to centre all my text on my page, for that I would use something like this:

HTML

<p>Lorem ipsum dolor sit amet, facer insolens nominati per ne, at vis dolorem contentiones, nec tincidunt cotidieque eloquentiam et. Fuisset laboramus hendrerit eu has, per quas habeo ne. Ex mea postulant maiestatis. Inani platonem has no, alia fuisset cu has. Eos ei causae sanctus docendi, ea ferri maiorum sadipscing ius. Mea natum elaboraret delicatissimi no.</p>

 

 

<p>Dicat exerci mucius usu at, sea viris minimum adolescens te, eleifend incorrupte an sit. Pri ad dictas referrentur suscipiantur. Ut nisl euripidis similique mea, sed at volumus officiis suscipiantur. Blandit elaboraret ei vim, sea vocent splendide ei, ius eu dicat interesset sadipscing. Case posidonium per ut, no vix tritani necessitatibus. Mea unum sonet eu, hinc iudicabit no vix.</p>

 

CSS

p {

text-align:center;

}

Lets say though, that for some reason I wanted the second paragraph to align to the left. Then I could use this code:

HTML

 

<p>Lorem ipsum dolor sit amet, facer insolens nominati per ne, at vis dolorem contentiones, nec tincidunt cotidieque eloquentiam et. Fuisset laboramus hendrerit eu has, per quas habeo ne. Ex mea postulant maiestatis. Inani platonem has no, alia fuisset cu has. Eos ei causae sanctus docendi, ea ferri maiorum sadipscing ius. Mea natum elaboraret delicatissimi no.</p>

 

 

<p class=”left”>Dicat exerci mucius usu at, sea viris minimum adolescens te, eleifend incorrupte an sit. Pri ad dictas referrentur suscipiantur. Ut nisl euripidis similique mea, sed at volumus officiis suscipiantur. Blandit elaboraret ei vim, sea vocent splendide ei, ius eu dicat interesset sadipscing. Case posidonium per ut, no vix tritani necessitatibus. Mea unum sonet eu, hinc iudicabit no vix.</p>

 

CSS

p {

text-align:center;

}

p.left {

text-align:left;

}

That way only the second paragraph would align to the left. This is a very basic application of the class tag but it could be used to create a much more advance style. I do think however that it may be better to create a new div rather than a separate class to provide better overall control. Making lots of different classes for similar objects could clutter the code and make things difficult to find if there was a mistake made or you wanted to make changes. Even so, it’s a new technique I’ve learnt and I used it to great effect to turn a 2 column page into a 3 column page using only one CSS sheet.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: