CSS101

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:

<html>

 <head>

<title>My document</title>

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

</html>

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>

<ul>

<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>

</ul>

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

<ul>

<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>

</ul>

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:

<ol>

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

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

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

</ol>

CSS:

#A1-1{colour:Yellow;}

#A1-2{color:red;}

#A1-3{color:Yellow;}

Differences

Examples.

External

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.

Internal

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.

Inline

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
.right{position:absolute;right:0px;width:150px;background-color:#660066;}
Example for aligning an element by using the margins as a point of reference
.center{margin-left:auto;margin-right:auto;width:50%;background-color:#660066;}

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>

FULL EXAMPLE:

<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>

</ul>

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”>

</a>

<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>.

Sources:

“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>

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