Layouts with Stylesheets - Tutorial
6 Pages
English

Layouts with Stylesheets - Tutorial

Downloading requires you to have access to the YouScribe library
Learn all about the services we offer

Description

Layouts with Stylesheets - Tutorial1. id selectors............................................................ 12. Centering elements using CSS ...............................23. Block-level to inline and vice versa........................34. Grouping CSS Selectors.........................................45. Nesting CSS Selectors............................................ 56. CSS Box Model ......................................................67. Reference..............................................................6id selectorsWe have learned how to use classes to give different styles to differen.t elements ofthe same tag in a web page. We will now introduce another way to do so. Supposethat you know that you only want to create a specific stylesheet for just one elementand nothing else. One way to accomplish that is to use an id selector. An id selectoronly gives styles to elements that have a matching id. For example:#right{text-align:right;}...The syntax for an id selector is similar to that of a class, where instead of a "." (e.g.,".container") we use "#" (e.g., "#container"). When the browser sees the # itautomatically looks for an element that has an id that matches the string following #.In the above example the browser applied the stylesheet to the

element becauseit's id matched.Just ...

Subjects

Informations

Published by
Reads 27
Language English
Layouts with Stylesheets - Tutorial
1. 2. 3. 4. 5. 6. 7.
id selectors
id selectors............................................................ 1 Centering elements using CSS............................... 2 Block-level to inline and vice versa........................3 Grouping CSS Selectors.........................................4 Nesting CSS Selectors............................................5 CSS Box Model ......................................................6 Reference .............................................................. 6
We have learned how to use classes to give different styles to differen.t elements of
the same tag in a web page. We will now introduce another way to do so. Suppose
that you know that you only want to create a specific stylesheet for just one element
and nothing else. One way to accomplish that is to use an id selector. An id selector
only gives styles to elements that have a matching id. For example:
#right{ text-align:right; }
...
<p id="right"> All text in here will be aligned to the right, because the id of this element matches that of the id selector in the stylesheet </p>
The syntax for an id selector is similar to that of a class, where instead of a "." (e.g.,
".container") we use "#" (e.g., "#container"). When the browser sees the # it
automatically looks for an element that has an id that matches the string following #.
In the above example the browser applied the stylesheet to the <p> element because
it's id matched.
Just like classes, one can specify a general id selector or an id selector for a certain tag:
p#right{ text-aligh:right; }
This means the browser will only search through the <p> elements, looking for the
one that has an id set to "right."
Id selectors are very useful when designing layouts because certain elements in the
layout will have unique styles that only apply to them.
Centering elements using CSS
The most common way to center elements is to use margin-left and margin-right:
div{ margin-left:auto; margin-right:auto; }
Setting both the left and right margins to auto means that the element will split the
margins equally, which results in the element being centered. Note that if the width
of the element is 100%, alignment has no effect as there are no margins to split.
Since we usually want to center more than one element (make the entire layout centered) it is more efficient to create a "container" - one div tag that does the centering and then all of the rest of the layout will go inside of the "container" element:
div#container{ margin-left:auto; margin-right:auto; }
This works much better than trying to center every element by itself.
Note: centering will not work in IE7 or IE8 if the correct doc type is not set. Centering does not work in IE6 - there are workarounds, but it's outside the scope of this class.
Block-level to inline and vice versa
Sometimes changing block-level elements to behave like inline is needed in designing a web page. Remember that block-level elements take up the entire width available to them as well as having a line break above and below. Inline elements only deal with a sequence of characters and as such take up only the space required to display the characters.
p{ display:inline; }
In the above example all p elements will now display as inline (this does not mean
that all p elements actually become inline!)
em{ display:block; }
In the above example all em elements will now display as block-level (again, this does
not mean that all em elements actually become block-level - you still can not nest
block-level elements inside of them.)
This can be very useful when creating a list of links. For any web page the navigation
pane usually consists of links leading to other sections of the web page. It is
important to organize these links so that they are easy to use. It is also important to
organize these links in such a way that a browser can easily interpret them. Since the
links are essentially an unordered list it make good sense to always put the links used
for navigation in a list. Using the default list styles, however, means these links will
always be listed in a vertical manner. What if we want to have our links be listed
horizontally in a horizontal navigation bar? By telling the list items to behave like
inline elements they will all be on the same line (much like when you use other inline
elements together).
Grouping CSS Selectors
If there are multiple different elements having the same style properties it is possible
to "group" their selectors. This avoids redundant code in your stylesheet. For
example, let's say that we want all of our header tags to have the background color of
green. We can accomplish this quickly by grouping the selectors:
h1, h2, h3, h4, h5, h6 { background-color:green; }
In the above example, all heading tags (from h1 to h6) will now have a background-
color of green.
Another example would be grouping your a:link and a:visited pseudo-class selectors.
Sometimes you do not want the link to reflect that they have been visited and want
them to have the same style as your normal links. This is especially true for links that
are used for navigating the site and thus are clicked on often.
a:link{ color:#45ff09; text-decoration:underline; }
a:visited{ color:#45ff09; text-decoration:underline; }
-----------------------------------------
a:link, a:visited{ color:#45ff09; text-decoration:underline; }
The above two CSS code snippets do the exact same thing. The second example is
much more efficient, however.
Nesting CSS Selectors
Nesting of CSS selectors refers to only defining styles for elements that are nested
within another element . For example, sometimes you may want to have all links
within the paragraphs to be a certain color, while all other links remain the same.
You could define a class for those links, but a much more efficient way is to combine
the paragraph selector (p) with the unvisited link selector (a:link) to create the
following combined selector:
p a:link{ color:navy; }
The above example will make the color of all links inside a p tag navy. Notice that the syntax is very similar to that of grouping, except that here we do not separate the tags by commas.
Pitfall: p a:link, a:visited { ... } will not apply the style to all a:link and a:visited child
elements of p, rather, it will apply the style to all a:link children of p, and all a:visited
elements in the document. Combining nesting and grouping in this way requires that
you give the complete nesting each time you concatenate the selector. E.g., p a:link, p
a:visited { ... } would be the correct way to do this.
Nesting is very useful when designing layouts. For example, say you want your
paragraphs to look different depending on which block in the layout they are:
div#leftcolumn p{ background-color:lightblue; }
div#rightcolumn p{ background-color:gray; }
The above example makes all of the paragraphs in the div called "leftcolumn" have
the background-color of lightblue and all of the paragraphs in the div called
"rightcolumn" have the background-color of gray.
CSS Box Model
Every block level element is a box comprised of content, padding, border, and margin. Theformer three (padding, border, margin) can be changed using style sheets. These properties are important because they can greatly affect how the layout works. Margins can get in the way and create unwanted gaps between elements. Borders can add to the decoration of the layout. Padding can keep the text closer or further away from the borders.
w3 schools has an excellent tutorial on the box model:
css_boxmodel.asp
http://w3schools.com/css/
Note: div tags by default do not have padding or margin (it's set at 0px). Other block-
level elements do have padding and margins. Remember, this affects the white space
around the elements.
Reference
http://w3schools.com/css/default.asp