Workshop

HTML & CSS

In todays workshop we went over HTML and CSS. How to insert CSS styles into a HTML code, when doing this the program called ‘Brackets’ was used. The first thing that was needed was to link in the CSS stylesheet so the HTML code knew where to retrieve its CSS stylesheets from (in what folder on the computer), this was done by inserting the following code.          Screen Shot 2014-11-10 at 15.31.00

Secondly classes had to be created, this is where section of the text could be edited, this could have been the entire text (where .container is used) or a specific section. Here CCS coding for width of each text box could be inserted along with background colour and border information could be inserted.

Screen Shot 2014-11-10 at 15.32.15  Screen Shot 2014-11-10 at 15.42.08  Screen Shot 2014-11-10 at 15.43.06  Screen Shot 2014-11-10 at 15.35.16

When the site is launched this is what the above code creates.

Screen Shot 2014-11-10 at 15.48.37

Within the CSS coding padding is also added, this is the space around the box.

 Screen Shot 2014-11-10 at 15.54.32Screen Shot 2014-11-10 at 15.49.11

Additionally I was able to selection a box I had added a .special-box tag to. This meant I was able to simply edit this box and no others would be effected, this would be useful within a website as it could highlight important text or make the page appear more interesting to an audience. Here I have changed the background colour of the central box.

Screen Shot 2014-11-10 at 15.54.52

Screen Shot 2014-11-10 at 15.59.44

Additionally with research I discovered how to use the ‘hover’ code where by audiences hovering over a section of text or box the something would change, this could be anything from font size changing however I chose to change the box background colour when this happened. This is displayed below.

Screen Shot 2014-11-10 at 16.10.43                        Screen Shot 2014-11-10 at 16.13.13

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