Group: Ian (1, 2, 3), Saria (4, 5, 6), Cristian (7, 8), Alejandro (9, 10)
1) What is CSS?
CSS stands for Cascading Style Sheet and was created in 1997 to separate design from content when creating websites. This way HTML could perform as scripting to actually produce content and create the webpages, and CSS could perform the task of designing the layout of the webpages. Every webpage is affected by a default CSS implemented by the browser which decides the default layout for things such as text font and size. However, the web designer can override this default by scripting CSS of their own, telling the browser to display a different kind of layout than the default.
CSS can be applied in the script of HTML itself by way of making a “style” tag (internal). It can also be applied by being scripted in a separate sheet and having that sheet be linked to the HTML page (external).
Source: http://webdesign.about.com/od/beginningcss/a/aa021607.htm
2) Through examples, explain how the CSS syntax works.
Example: body {background-colour: #FF0000;}
Body: this is an example of the selector, which is the part that the HTML script applies the style to (so this would be applied to the body).
{background-colour:}: this is an example of the property, which is what part of the webpage will be affected (in this case the background would be).
#FF0000: this is an example of the value, which is what style will actually be changed (the background colour would become this colour in this instance).
This can be implemented into the website via inline scripting (by using a tag) or by linking to the external styling page.
Source: http://html.net/tutorials/css/lesson2.php
3) Through examples, explain the difference between id and class.
CSS allows you to specify your own selectors called id or class.
id selector: the id selector is used to specify a style for a single element. It is defined with a “#”. Example: #para {text-align: center; colour; red}
class selector: the class selector is used to specify a style for a group of elements. It is defined with a “.” Example: .center {text-align: center;}
Source: http://www.w3schools.com/css/css_id_class.asp
4) Through examples, explain the difference between external style sheet, internal style sheet and inline style, when is it better to use one over the other?
There are 3 ways to insert CSS into style sheets. CSS can be inserted using external style sheet, internal style sheet, and inline style.
External Style Sheet: If the style you’re using is applied to a number of different pages, then the external style sheet would be ideal for this use. It is easier to manage because by simply changing one file you could alter the look of the entire webpage. In order for this to work, each page must link to the style sheet using the <link> tag, which needs to be inserted in the head section.
Internal Style Sheet: If each of the pages in the entire webpage is unique and different from the other, then the internal style sheet should be used. This allows you to alter the single document with unique styles using the <style> tag inserted below the <head> tag.
Inline Styles: Despite the true purpose of CSS, which is to separate design from content, inline styles allow you to add content to CSS simply by using the style attribute in the relevant tag.
Source:
a) “Three Ways to Insert CSS.” W3schools. N.p., n.d. Web. 22 Nov. 2013. http://www.w3schools.com/css/css_howto.asp.
b) “CSS Tutorial.” Tjzag.com. N.p., n.d. Web. 22 Nov. 2013. http://www.tizag.com/cssT/inline.php.
5) Through examples, explain the box model
The box model allows you to add a box around the html elements consisting of margins, borders, padding, and actual content. Using the margins usually clears an area around the border. It is completely transparent. As for the border, it goes around the padding and content. It’s usually affected by the background color. The padding clears as an area around the content. The content is where the actual text and images appear.
Source: “The CSS Box Model.” W3schools. N.p., n.d. Web. 22 Nov. 2013. http://www.w3schools.com/css/css_boxmodel.asp.
6) Through examples, explain what floating and positions do. What is the difference?
The CSS float allows elements to be pushed to the left or right, rather than up or down. It’s often used for images. Only elements after the float will flow around it, elements before will not be affected. For example, if an image is floating to the left, the text will float around it to the right.
Source: “What Is CSS Float?” W3schools. N.p., n.d. Web. 22 Nov. 2013. http://www.w3schools.com/css/css_float.asp.
7) Through examples, explain css grouping/nesting.
Grouping is when you take code that have the same properties and group them together but make them separate by adding a comma in between them. Nesting is the same thing but it is when you group within a group of selectors. Ex – Taking this…
h2 {color: red;}
.thisOtherClass {color: red;}
.yetAnotherClass {color: red;}
and grouping it to look like this:
h2, .thisOtherClass, .yetAnotherClass {color: red;}
Source: “Grouping and Nesting.” HTML Dog. N.p., n.d. Web. 22 Nov. 2013. http://www.htmldog.com/guides/css/intermediate/grouping/.
8) Through examples, explain how to align elements.
This puts the text where you would want it. After the code you can add {text-align:;} and then put either right, left, center, or justify. Justify will make all of the text equal to each other on the web page. Ex-
h1 {text-align:justify}p.date
{text-align:justify;} p.main
{text-align:justify;}
This will make all the text on the webpage be equal In length to each other.
Source: “CSS Text.” W3schools. N.p., n.d. Web. 22 Nov. 2013. http://www.w3schools.com/css/css_text.asp.
9) Through examples, explain how to build a css navigation bar.
This is the HTML:
<div id=”menu”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”aboutus.html”>About Us</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”contactus.html”>Contact Us</a></li>
</ul>
</div>
This is the CSS for the whole menu:
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
This is the CSS for the unordered list (ul):
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
This is the CSS for the listed item (il):
#menu li {
display: inline;
padding: 20px;
}
This is the basics to build a very ugly navigation bar and there are many variations to how to make a navigation bar, but this is the most common and simple one.
“How to Create Horizontal Navigation With CSS3.” How to Create Horizontal Navigation With CSS3. N.p., n.d. Web. 22 Nov. 2013. http://www.htmlgoodies.com/beyond/css/how-to-create-horizontal-navigation-with-css3.html.
10) Through examples, explain how to build a css based image gallery.
<html>
<head>
<style>
div.img
{
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
</style>
</head>
<body>
<div>
<a target=”_blank” href=”klematis_big.htm”>
<img src=”klematis_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div>Add a description of the image here</div>
</div>
<div>
<a target=”_blank” href=”klematis2_big.htm”>
<img src=”klematis2_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div>Add a description of the image here</div>
</div>
<div>
<a target=”_blank” href=”klematis3_big.htm”>
<img src=”klematis3_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div>Add a description of the image here</div>
</div>
<div>
<a target=”_blank” href=”klematis4_big.htm”>
<img src=”klematis4_small.jpg” alt=”Klematis” width=”110″ height=”90″>
</a>
<div>Add a description of the image here</div>
</div>
</body>
</html>
Although this is a very simple gallery, there are open source galleries that can be used for wordpress and other web services. These galeries though are not only based on CSS, but they requiere for the coder to call on Queries.
“CSS Image Gallery.” CSS Image Gallery. N.p., n.d. Web. 22 Nov. 2013. http://www.w3schools.com/css/css_image_gallery.asp.
Ian Smyth 