MPM107 CSS 101

15 Nov

group: Christina, Raine, Angie, George

What is CSS and how does it work?
CSS stands for Cascading Style Sheets; this generally shows how to display HTML. This potentially allows web designers to divide their information.

CSS syntax
Some examples of CSS may be changing the colour of your webpage’s background, setting an image as a background etc. However, the code for changing the background colour is simple:
hr {colour:blue:}

The difference between ID and Class
The difference between an ID sector and CLASS sector is that ID is unique whereas CLASS is not. The element for both is quite different as well, the ID is seen as “#” basically a number symbol, and class is classified as a “.” just a simple period. ID CSS are only capable of being used once within an HTML document, however, a class CSS can definitely be used multiple times.
HTML code for ID: <p id=ExampleID1”>
HTML code for Class: <p class=’ExampleID1’>

Difference between External, Internal, Inline style sheet
Similarly, both External and Internal are found within the head sector of a webpage. An external style sheet is truly ideal when it comes down to changing the entire look of a webpage with just a file. The <link> tag is important when linking to the style sheet. Internal style sheets are generally placed within the <head> sector of your HTML document, the tags that classify an internal style sheet are <style></style>. Finally, the last important style sheet is referred to as an Inline style sheet.

What is a Box Model?
When the design of a webpage is being discussed, generally all the HTML elements can be placed within a “Box Model.” We normally begin with content in the middle where most of your text will appear, and then we add the padding, which surrounds the content and displays the background colour of that box. Thirdly, we have the boarder that comes after the content and padding which also displays the background colour. Lastly, the margin doesn’t contain a background colour it’s actually transparent as opposed to the other properties. On another note, when setting width and height of an element, it’s only to be done within the content sector of the box model!

Box Model CSS 101

This is the box model for CSS101

What do Floating and Positions do?
With floating, an element is capable of being shifted either to the right or left of the line, causing the elements after the float to flow around it. If the element were to be placed to the right, the content would flow to the left. However, the elements before it won’t have an affect whatsoever. Whereas with Positioning, this helps position the element either top, bottom, left or right. The difference between the two is quite obvious, floating can only be done right or left not up or down, whereas positioning there’s many ways of placing it anywhere dynamically.

CSS Grouping and Nesting
Grouping makes it much easier to sort the number of selectors without having to do it repeatedly.  For instance
h1
{
colour:green;
}
h2
{
colour:green;
etc.

However, when applying a selector within a selector this is classified as Nesting.
For instance
p
{
colour:green;
text-align:center;
}
marked.

Basically, this helps align the text, and change the font colour!

Aligning Elements

Simply, by aligning the text within the property, this allows the elements to be aligned. For instance, if we were to place the text within the centre of the HTML document, we would use a simple code such as h1 {text-align: center} which would bring everything in the middle of the first header. Potentially, this helps allow the elements to be lined up, whether horizontally or vertically. This will all be centered within the margins.

How To Build a Navigator Bar

A Navigating Bar needs a standard HMTL base in order for it to work correctly.
<ul>
<html>
<body>
<ul>
<li><a href=”#home”>Home></a></li>
<li><a href=”#news”><News></a></li>
</ul>
</body>
</html>

These navigating bars are extremely handy when linking to another webpage, or URL.

Citation:


1. “HTML.” W3Schools Online Web Tutorials. N.p., n.d. Web. [Accessed: 14 Nov. 2013.] <http://www.w3schools.com&gt;.

2. “Bleeping Computer.” How to Make a Horizontal Navigator Bar. (June 16, 2006) Web. [Accessed 14 Nov. 2013.} < http://www.bleepingcomputer.com/forums/t/55647/how-to-make-a-horizontal-navigation-bar-with-link-rollover-state-using-xhtmlcss/>

3. “CSS101.” Box Model. N.p., n.d. Web. [Accessed: 14 Nov. 2013.] < http://www.css-101.org/the_box_model.php>

4. “BarelyFitz Designs.” Learn CSS Positioning in 10 Steps. N.p., n.d. Web. [Accessed 14 Nov. 2013.] < http://www.barelyfitz.com/screencast/html-training/css/positioning/>

5. Coyier, Chris. “The Difference Between ID and Class.” CSS-Tricks. Np., July 9, 2008. Web. [Accessed: November 14, 2013] < http://css-tricks.com/the-difference-between-id-and-class/>

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: