Group work by: Sam, Jodie and Stanley

CSS is an acronym for Cascading Style Sheet. This coding style is very similar to HTML, however the effects are translated differently. These CSS files define the look and layout of an HTML page. CSS define many features of the HTML such as borders, margins, fonts, sizes, etc. As this site puts it “HTML is used to structure content. CSS is used for formatting structured content”. HTML was created to simply structure text on a page, CSS developed to then format said structure. One CSS file has the power to control the structure of many files or documents. The beauty of CSS is that they can apply to many documents. Instead of writing, or copying the background colour to every single web page, you can create a single CSS file which will add the formatting to the pages you define it to. CSS files are in the format of “example.css” and can be linked to HTML pages inside the coding.

CSS works well with HTML because the coding is very similar.

HTML: <body bgcolor=”FF0000″>

CSS: body {background-color: #FF0000;>

This coding produces the same thing.

CSS coding is in the structure of

selector {property: value;}

Coding with CSS will have this shape:

body {

    background-color: #FF0000;


Properties will stack up below the background-color for example if more modification is required. Linking the CSS file to your HTML code is the same concept as linking a file or image to your HTML page:



<title>My document</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />


When something needs to be formatted and it is in a group of elements, you would use the CLASS and ID system. For example, using CLASS would be to change the colour of the title for different paragraphs. If you wanted paragraph 1 and 3 to have a red title, but paragraph 2 to have a blue title, you would changes the CLASS of paragraphs 1 and 2 to red, while paragraph 2 to blue. Then all you would need to do is link the CLASS CSS formatting to the appropriate coding. This example is showing that the CLASS whitewine will change the colour of the text to a yellow-orange, where the class redwine will change the colour of the test to a dark red.

Example – HTML page:

<p>Grapes for white wine:</p>


<li><a href=”ri.htm”>Riesling</a></li>

<li><a href=”ch.htm”>Chardonnay</a></li>

<li><a href=”pb.htm”>Pinot Blanc</a></li>


<p>Grapes for red wine:</p>


<li><a href=”cs.htm”>Cabernet Sauvignon</a></li>

<li><a href=”me.htm”>Merlot</a></li>

<li><a href=”pn.htm”>Pinot Noir</a></li>


CSS File:

a {
color: blue;

a.whitewine {
color: #FFBB00;

a.redwine {
color: #800000;

Now, the ID system would be to change the formatting of some elements already inside other elements. Giving something an ID will give it a unique property because every ID is different.

Example – HTML:


<li ID=”A1-1″>30</li>

<li ID=”A1-2″>50</li>

<li ID=”A1-3″>200</li>









It is ideal to use external style when editing an entire websites or multiple pages. If you have multiple styles, it could be easily changed by changing the link to the style.

Uses the <link> tag to link to the sheet style.

If you want to change the font colour of your website, instead of going to each page and changing it. Make the change in one spot and it will change the all the pages.


It is ideal for editing a single page.

Define style by using the <style> tag.

If you want to change a specific paragraph to a different font colour on that single page.


This style applies to the specific HTML element it is in.

If you want to change a specific part of the page like the font colour,size, bold, italicized etc.

The box model is essentially the borders and margins that a web page has. It consists of four different parts, margin, border, padding and content. The margin is the transparent area around the border. The border is the area around the padding and is affected by the background colour. The padding is the area around the content and is also affected by the background colour. The content is where the text, images or videos appear. The box model is what gives the web page a specific layout. For example, Youtube has a specific spacing (margins and borders) along the edges of the content as well as padding between the video, comments, and recommended videos.

Floating refers to the movement of the image. This movement refers strictly to moving the image right or left, and not up or down.

For example, {float:right} or {float:left} would be the key to floating an image so the side.

A positioning happens after you float the image, referring it where to float to.

For example, {position:absolute; right: 40px; top: 40px}

By grouping (nesting) files, you make the code simpler for yourself and for organization. In style sheets, the style is maintained throughout,

h1 { color : red ; } h1 { color : #660066 ; }

h2 { color : red ; } OR h2 { color : #660066 ; }

p { color : red ; } p { color : #660066 ; }

but by grouping them, the code becomes much simpler, and enhancing

h1, h2, p { color : red ; } OR h1, h2, p { color : #660066 ; }

Through examples, explain how to align elements.
There are different ways to align elements; one is by using floating and positioning properties to guide that element to a specific location. Another way to use the margins to be points of reference to where the element will be placed.
Example for aligning an element by using the positioning property
Example for aligning an element by using the margins as a point of reference

A navigation bar is created using a list of link with <ul> and <il> elements/tags.

Firstly, open the code with <ul>.

For every link you want use this code:

<li><a hred=”example.asp”>Example</a></li>

Open and close each link with <li> and </li>

List as many links as you want, with Example being replaced by your link and your title.

Close the code with </ul>



<li><a href=”home.asp”>Home</a></li>

<li><a href=”archives.asp”>Past Articles </a></li>

<li><a href=”search.asp”>Search </a></li>

<li><a href=”about.asp”>About</a></li>


The code for an image gallery is a combination of other simpler codes.

You open with <html>, <head>, <style> and use your divider image that separates text from photos, and photos from photos. This file name can be called div.img

The margins, padding, border, height, float, and text align should all be applied next. Opening and closing with { , }.

Close with </style>, </head>.

Open a <body> element. (This is where you photos with go, using the specifications used above.)

An example of a code for one image would be:

<div class=”img”>

<a target=”_blank” href=”example_one.htm”>

<img src=”example_one.jpg” alt=”EXAMPLE”

width=”110” height=”90”>


<div class=”desc”>DESCRIPTION GOES HERE</div>

Use as many of those codes for however many images you have.

Close the entire code with </body> and </html>.


“CSS Box Model”. w3schools. np.nd. 13 Nov 13. <http://www.w3schools.com/css/css_boxmodel.asp>

“CSS Group and Nesting Selectors”. w3schools. 20 Nov 13. <http://www.w3schools.com/css/css_syntax.asp>

“CSS Horizontal Align”. w3schools. 20 Nov 2013. <http://www.w3schools.com/css/css_align.asp&gt;

“Lesson 7: Identification and Grouping of Elements (class and Id).” Free Tutorials on HTML, CSS and PHP. N.p., n.d. Web. 10 Nov. 2013. <http://html.net/tutorials/css/lesson7.php>.

“Most CSS Floats Can Be Replaced With Relative And Absolute Positioning” Ben Nadel. 2 Oct, 2013. <http://www.bennadel.com/blog/2541-Most-CSS-Floats-Can-Be-Replaced-With-Relative-And-Absolute-Positioning.htm>

“Which Stylesheet Type to Use and When?” HTML Basic Tutor. np. nd.13 Nov 13. <http://www.htmlbasictutor.ca/stylesheet-type.htm>

MLA Styles

Group: Sam Legros, Stanley Tsai, Jodie Quach

1) Books

Author Lastname, Firstname. Title of Book. Place of Publication: Publisher, Year. Medium.

Grenfell, Wilfred Thomason. Adrift on an Ice Pan. St. John’s: Creative, 1992. Print.

2) Articles

Author Lastname, Firstname. “Title of Article.” Name of Journal Volume. Issue (Year): Pages. Medium.

Cox, Gordon. “A Newfoundland Christmas Caroling Tradition.” Folk Music Journal 3.3 (1977): 242-60. Print.

3) Websites/pages and blogs

Entire Website:

Editor, Author or compiler name. Name of website. Version number. Name of institution/ organization of the site, date of creation. Medium. Date of access.

A page on a website:

“Title” Name of site. Publishing date. Medium. Date of access.

*Write np, if you cannot find the publisher name

Write in nd, if you cannot find the publishing date.


Editor, Author or compiler name. “Title of post”. Name of site. Version number. Name of institution/ organization. Medium. Date of access.

* If author(s)’s names are not found, use the screen name.

If there are more than one author, include the other author(s)’s name in brackets.

4) Videos

Title of Film, Series (If available), Creator/Filmmaker/Corportation, Important Individuals (Writers, Producers aside from lead directors), Key Performers (Lead Actors), Studio followed by the release date, Format in which you watched it (DVD, YouTube), Distributor (if a DVD), Distribution/Release Date

5) Lectures

Speaker’s name. “Title of speech”. Name of meeting/organization. Location. Date. Type of presentation.

* Types of presentation: Address, lecture, keynotes, guest lecture, conference presentation.

6) Bibliography

Grenfell, Wilfred Thomason. Adrift on an Ice Pan. St. John’s: Creative, 1992. Print.

Cox, Gordon. “A Newfoundland Christmas Caroling Tradition.” Folk Music Journal 3.3 (1977): 242-60. Print.

“MLA Work Cited: Electronic sources (Web publications)” Purdue Owl. 14 Dec 2012. Web. 02 Nov 2013.

“MLA Work Cited: Other common sources” Purdue Owl. 24 Jun 2013. Web. 02 Nov 2013.

Analysis – Cell Phones

Cell Phone Analysis

Cell Phones have developed in the last 15 years, and is seen today as a crucial necessity in order for our economy to survive. Our world depends on technology like cellular mobile to communicate and interact with business, family and social lives. The telephone requires a radio signal that can be accessed from virtually anywhere unless out of range of the satellites, and sometimes underground. The article, The Mobile Phone meets the Internet, written by Malcolm W. Oliphant, speaks on how the telephone has come a long way from what it was; as before 15, the mobile required only physical use of dialling and no digital information, as it very greatly thrives on today. Oliphant separates the mobile eras into three generations, the first generation consists of analog cell phones, the generation is made up of similar phones but with digital radio built in, and making the smartphone era as the third generation. “These trends should last into a fourth generation of even better spectrum efficiencies, higher radio carrier frequencies, even higher user data rates, and a blizzard of new non-voice applications plus the terminals to support them.” There is much took look upon in the future of mobile phones, and growth of our society with the help. it was when the internet was integrated into the mobile phone, that increased its popularity, along with convenience.

The article, Cell Phones + microwaves + other radiation = Disease!, written by Michael Wald, discusses the opposing side of the opinions of the cell phones in this time. By already seeing the title of this article, you can understand that Wald is firm on his beliefs that the cell phone, no matter what it has done for this society, will not benefit any of us if the health effects are so harmful to us. He starts off the article by saying “The use of cell phones is associated with an increased risk of brain tumours after 10 years of use, according to the journal Biomedicine & Pharmacotherapy”. It is puzzling that cell phones have the power to cause us so much potential harm. This article also speaks about how the use of a landline or a wireless headset can easily reduce the amount of radiation near the head of the user. “There is no way of knowing what this “individual tolerance” limit is for each of us, but it is prudent for us to take these reasonable, “natural” precautions and use our common sense”.

Both these two articles read make powerful statements on the pro’s and con’s of cell phones and their uses. The Mobile meets the Internet, by M.W. Oliphant, clearly states that the cell phone has revolutionized the way we live today, as everything we need is so portable, and accessible to us. On the other hand, we have to think about the health hazards, and Cell phones + microwaves + other radiation = disease!, by Michael Wald discusses how unsafe having open radiation close to our heads can be, and what it could become. While both articles make concrete arguments, my opinion of it is that we should be looking on what the cell phone has accomplished. It has restructured our day-to-day life. The cell phone can hold your entire life in a pocket-sized case, including communication, internet use, and recreational uses.  The cell phone is a much more important part of our life than we think, and it will remain this way as it grows and expands with research in the future.

Works Cited

Wald, Michael. “Cell Phones + Microwaves + Other Radiation = Disease!.” Original Internist, June 1, 2012.

Oliphant, M.W.. “The Mobile Phone Meets the Internet.” IEEE Xplore, August 1999. http://ieeexplore.ieee.org.ezproxy.lib.ryerson.ca/xpls/abs_all.jsp?arnumber=780995&tag=1 (accessed October 30, 2013).

the Library

For all my life, I would use the Toronto Public Library, which is a couple blocks north of my house — up until this year, where I have now used the resources of the university library to retrieve my information. After the “research skill workshop”, I am not much more informed of how I can help myself find the information I need. I have learned about the online resource which is available to anyone in the Ryerson database, online, so users can be informed as to if their search of book in available for them to be taken out when they wish. We were taught how to search and understand our search information in the workshop taken in September.

Article Reflection

The article Media Culture Society, written by Eugenie Shinkle talks about the power and effects that video games have on our society, and how they act as a “sixth sense”; mind simulation. Apart from the endless amount of time consumed by these video games, the idea itself is revolutionary and is already starting to change the world. It combines touch along with sight and spatial awareness to create a virtual simulation into the digital world. A much different concept than world we know, the user is able to have full control over a subject’s actions and decisions.

“Taking its methodological cues from the linked domains of phenomenology and cognitive neuro- science, the following discussion examines perception and gameplay in terms of the relationship between the body, the emotions and the proprioceptive senses, sketching out some of the possibilities for emotional expression offered by a generation of video game controllers that engage the human sensorium in a newly extensive way”, says Shinkle. He uses this concept in referring to an interaction that the human mind is unfamiliar with. The endless amount of time invested in producing these games has been recognized by the users, as the high quality and level of sophistication are apparent. Games such as car racing, sports, and adventure-based games, using your fingertips, are almost life-like. The graphics, layout, and interactivity of the games have become seamless and it seems that there is no stopping this type of simulation; the expansion and world-wide interest will soon transform this idea of a virtual world to a world of endless possibilities.

Shinkle’s article defines well the use, purpose, and future hopes for video games in this generation. He explains that the concept of a video game, unfamiliar to the human mind, will change the way the world views media interactivity. The concept was recently introduced to the digital world, and acts as a revolutionary idea for our upcoming years as a nation.


Works Cited

Shinkle, E. Video games, emotion and the six senses. Media Culture Society. November 2008 vol. 30 no. 6 907-915


Our entire economy could suffer from our reality to be shifted to a virtual world. By this I mean, that the digital age has turned on to a virtual, connective and interactive solution; that is Web 3.0. We are living in society today that strictly relies on technological developments to handle tasks, make life easier. We realize that devices such as the internet, smartphones, androids, and social media, that it plays a bigger role in our lives than we think. We use it for communication, education/research, organization, recreational purposes, and the list goes on. These small sized devices can carry our whole lives on them. Every task, meeting, interest, music, and everything you can imagine. This may cause problems down the line for business and the economic as well as government

After a discussion in class, and getting insight and going beyond this article, I have come the conclusion that the development of technology will transition to a completely virtual based reality for the upcoming generations. It will act as one of the only sources of communication and thus creating an empire of itself, the Digital World.

Works Cited


Digital Identity

Digital identity is important, because your professional makeup is found on the internet, so friends, family and potential employers even have access to the information released into the world of the internet.

Information found on my partner: Gianluca Fillipetti

His birthday is March 10, he is from Woodbridge Ontario. He is a white, single male, who goes to Ryerson University. He has 1153 friends on Facebook. From looking at his photos on Facebook, he has been to Italy, Washington and Toronto. His high school, the Country Day School, appointed him athlete of the week on February 25, 2013, and they have published a short article about Gianluca’s athletic, as well as academic experience. He listens to Tyga, who is an up and coming rap artist. He enjoys playing video games, watching TV, and hanging out with friends. He plays the trumpet and clarinet. When it comes to Hockey, he is a fan of the Montreal Canadiens. He also has a tutorial published on YouTube, on the steps of how to properly kick a soccer ball, and this video was posted for a project in Physical Education.