CSS101

By: Christopher Louie and Kirk Villaruz

What is CSS and how does it work?

CSS stands for Cascading Style Sheets. CSS is used to help you separate information of a document from the details of how to display it. You use a technique called style to determine the details of how you want to present a document. There are a few reasons on why you separate the style from the content: – To avoid duplication – Maintaining becomes easier – Use the same content with different styles for different purposes.

Through examples, explain how the CSS syntax works:

– A CSS rule has two main parts: a selector, and one or more declarations: – – The selector is normally the HTML element you want to style. – Each declaration consists of a property and a value. – The property is the style attribute you want to change. Each property has a value. Example: p {color:red;text-align:center;}

Through examples, explain the difference between id and class:

The main difference between id and class selectors is that, an id selector specifies a style for a single, unique element, unlike the class selector, which specifies a group of elements and is also the most often used element. Also the id selector uses the id attribute of the HTML element, and is defined with a “#”, and the class selector uses the HTML class attribute, and is defined with a “.

Id selector: #para1 { text-align:center; color:red; }

Class selector: .center {text-align:center;}

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS http://www.w3schools.com/css/css_syntax.asp http://www.w3schools.com/css/css_id_class.asp


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?

External Style Sheet:

Through an external style sheet, you can change the appearance of a Website by changing one file.  External style sheet is best for when the style is applied to many pages.

Example:

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

 

Internal Style Sheet:

Internal Style Sheet is best used when a single document has a unique style.

Example:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

 

Inline Style:

This method is the least used compared to the other ones previously mentioned.  Inline Style Sheets is used sparingly because it mixes content with presentation.

Example:

<p style=”color:sienna;margin-left:20px;”>This is a paragraph.</p>

Through examples, explain the box model

The CSS box model is basically a box that revolves around HTML elements. It consists of: margins, borders, padding, and the actual content.

  • Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border – A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding – Clears an area around the content. The padding is affected by the background color of the box
  • Content – The content of the box, where text and images appear

Example:

 

BOX

 

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS

http://www.w3schools.com/css/css_syntax.asp

http://www.w3schools.com/css/css_id_class.asp

http://www.w3schools.com/css/css_boxmodel.asp

source: http://www.w3schools.com/css/css_howto.asp

 

 
Through examples, explain what floating and position do. What is the difference?

 

In CSS you can push elements around horizontally to the left or right to create more useful layouts. Floats are often used for images, but it also works well if you want to wrap elements around text. Elements that float next to other elements will not affect it at all. Instead it will simply ‘float’ beside it. An example of the css coding for floating is this:

img
{
float:right;
}

Positioning is similar to floating, but it is designed for you to position the element wherever you want. It can also be placed behind another element. The difference between positioning and floating is that floating is horizontal, and positioning is any location possible.

 

References:
http://www.w3schools.com/css/css_float.asp

http://www.w3schools.com/css/css_positioning.asp


Through examples, explain css grouping/nesting

CSS grouping and nesting deals with combining similar style sheets/elements with the same properties. Elements will often be grouped for the same style. This type of grouping sector is known as grouping. CSS nesting is given the term for the application of a style for a selector within a selector. In other words, if one style is specific for a group of elements, these elements will be nested together.

References:

http://www.w3schools.com/css/css_grouping_nesting.asp

 

Through examples, explain how to align elements

CSS positioning properties allow you to position and align an element. Elements can be positioned using the top, bottom, left, and right properties. HTML elements are positioned static by defult. A static element is always positioned accordingly on the page. Here is the coding for fixed positioning:

 

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

 

This method is usually the most common alignment. This positioning allows the element to be positioned within the page margins. You can also align elements so that they overlap with one another. The following is the code for that positioning:

 

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

 

Reference: http://www.w3schools.com/css/css_positioning.asp
Through examples, explain how to build a css navigation bar

 

Navigation bars are easy to use menus for any website. CSS can transform regular HTML menus into better looking navigation bars. Essentially the navigation bar is a list of links set across horizontally on the top of the web page. Another word for this bar is called a menu bar, and is essentially used to help the user navigate the website to what they are looking for. Below is the coding to building a css navigation bar:

 

<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>

 

Reference: http://www.w3schools.com/css/css_navbar.asp

 

Through examples, explain how to build a css based image gallery

 

Let’s get started with placing the images on the screen. This will be done simply by floating the images to the left. There will be four rows that contain four pictures each and will be set at 25% height and width. The borders are placed in a container through box-sizing.

 

a {
float: left;
width: 25%;
height: 25%;
position: relative;
border: 1px solid #333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Next, it’s time to set the image sizes to 100% with an absolute position and transition. You’ll notice that in the first variant of the demo, that the images appear greyed out. That is done through opacity, which is also a part of this code.

a img{
display: block;
width: 100%;
height: 100%;
-webkit-transition-property: width, height; /* we specify, what properties we need to change*/
-webkit-transition-duration: 300ms; /* we specify, with what speed it is necessary to return an image in its initial look*/
-moz-transition-property: width, height;
-moz-transition-duration: 300ms;
-o-transition-property: width, height;
-o-transition-duration: 300ms;
position: absolute;
opacity: 0.3; /* add opacity*/
cursor: pointer;
}

To provide a caption to the photos, you can use a pseudo element: after. The caption appears in the bottom right corner of each image. It should be obvious that you can update the content element to your own copyright or caption information.

a:after {
display: block;
position: absolute;
width: 100%;
height: 100%;
content: “Studio.com”;
color: #eaeaea;
font-family: “Trebuchet MS”;
font-size: 16px;
opacity: 0.5;
}

Using the pseudoclass: focus, you can create the appearance of the image opening and enlarging. This only works with form fields and links, so an a tag is used. Because pseudoclass: focus does not currently work well in Chrome, the alternate solution is to add the index element to the link.

a:focus img{
width: 250%; /* we increased an image to this size */
height: 250%;
position: absolute;
opacity: 1; /* transparency is not needed */
z-index: 1; /* for a photo to enlarge over all images */
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000; /* we add some beauty */
-webkit-transition-property: width, height; /* we decrease the image */
-webkit-transition-duration: 2s; /* we specify, with what speed it is necessary to increase an image */
-webkit-transition-delay: 0.3s; /* as a browser will process it, before enlarging a photo */
-moz-transition-property: width, height;
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-property:width, height;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}

At this point, you should have a working gallery in terms of the CSS3 set up. However, at this point, all of your images will enlarge from the upper left corner to the lower right. This is corrected by using a pseudoclass nth child. This will change the behavior of where the image appears to enlarge from depending on where the image is positioned.

a:nth-child(4n+4) img, a:nth-child(4n+3) img{
right: 0;
} /* every fourth element starting with 3rd and 4th will be enlarged from the right border of browser window */

a:nth-child(n+9) img{
bottom: 0;
} /* all elements, starting with the ninth will begin to enlarge upwards */

Now to address how to close the images after they have been enlarged. The images are opened through focus and you can close them in the same manner. From the user perspective, the images will be closed by pressing an X (or by simply clicking on another image). Here’s some sample code on how to create the X, which is really a + rotated by 45 degrees.

-webkit-text-shadow: 0px 0px 5px #222;
-moz-text-shadow: 0px 0px 5px #222;
text-shadow: 0px 0px 5px #222;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;

To finish, here’s the code for closing an image after it has been enlarged:

.closed{
display: none;
}
a:focus~.closed{
display: block;
}

 

This will also cause the X to close as well. Good luck with this sample code and hopefully you’ll be on your way to creating a CSS3 image gallery.

References: http://www.htmlgoodies.com/html5/css/how-to-create-a-css3-based-image-gallery.html#fbid=N0XuGyzcCRo

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