Layouts with Stylesheets - Tutorial

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

All text in here will be aligned to the right, because the idof this element matches that of the id selector in thestylesheet

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

Informations

• Publié par: Choud
• Nombre de lectures: 27
• Langue: English

Extrait

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