CSS Simple Layout

CSS CODE
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }


HTML CODE
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>

Box Model CSS

Box properties allow the author to control the presentation of generated boxes for document elements, including dimensions, margins, padding, and borders.

Implementing the Box Model

The box model is best demonstrated with a short example. The calculation we’ll use to ascertain the total space required to accommodate an element on the page (ignoring margin collapse for the time being—see below for more on this) will be as follows:

Total width = left margin + left border + left padding + width +
                   right padding + right border + right margin

Total height = top margin + top border + top padding + height +
                   bottom padding + bottom border + bottom margin
Here’s our example CSS—a rule set that contains declarations for all the box properties of an element that has the class "box":

.box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #000;
  margin: 15px;
}
The total size of the element above will be calculated as follows:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

Margins:

These properties allow the author to control a box’s margin—the area outside its border.

margin-top:
Sets the top margin on of an element.

margin-right:
Sets the right margin of an element.

margin-bottom:
Sets the bottom margin on of an element.

margin-left:
Sets the left margin on of an element.

margin:
A shorthand property that sets the margin on all four sides of an element.

Padding:

These properties allow the author to control a box’s padding—the area between its content and its border.

padding-top:
This property that sets the padding for the top side of an element.

padding-right:
Sets the padding for the right side of an element.

padding-bottom:
This property that sets the padding for the bottom side of an element.

padding-left:
Sets the padding for the left side of an element.

padding:
Sets the padding for all four sides of an element.

Dimensions:
These properties allow us to control the height and width of element boxes.

height
Sets the content height of a block or a replaced element.

min-height
Sets the minimum content height of a block or a replaced element.

max-height
Sets the maximum content height of a block or a replaced element.

width
Sets the content width of a block or a replaced element.

min-width
Sets the minimum content width of a block or a replaced element.

max-width
Sets the maximum content width of a block or a replaced element.

Borders and Outlines:

Border properties allow the author to control a box’s border—the area between its padding and its margins.

border-top-color
Sets the color for the top border of an element.

border-top-style
Sets the style for the top border of an element.

border-top-width
Sets the width for the top border of an element.

border-top
Sets the width, color, and style for the top border of an element.

border-right-color
Sets the color for the right-hand border of an element.

border-right-style
Sets the style for the right-hand border of an element.

border-right-width
Sets the width for the right-hand border of an element.

border-right
Sets the width, color, and style of the right-hand border of an element.

border-bottom-color
Sets the color for the bottom border of an element.

border-bottom-style
Sets the style for the bottom border of an element.

border-bottom-width
Sets the width for the bottom border of an element.

border-bottom
Sets the width, color, and style on the bottom border of an element.

border-left-color
Sets the color for the left-hand border of an element.

border-left-style
Sets the style for the left-hand border of an element.

border-left-width
Sets the width for the left-hand border of an element.

border-left
Sets the width, color, and style to the left-hand border of an element.

border-color
Sets the border color for all four borders of an element.

border-style
Sets the style for all four borders of an element.

border-width
Sets the width for all four borders of an element.

border
Sets the width, color, and style for all four borders on an element.

outline-color
Sets the color of an outline.

outline-style
Sets the style of an outline.

outline-width
Sets the width of an outline.

outline
Shorthand property that sets an outline on an element.

Z-index

Description:
This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.
The stack level refers to the position of the box along the z axis, which runs perpendicular to the display. The higher the value, the closer the box is to the user; in other words, a box with a high z-index will obscure a box with a lower z-index occupying the same location along the x and y axes.

Example:

This style rule makes the element with ID "warning" absolutely positioned and assigns it a higher stack level than its siblings:
#warning {
  position: absolute;
  z-index: 1;
}

Value:

An integer value—which can be negative—sets the stack level of the box in the current stacking context, and also establishes a new stacking context. The box itself has stack level 0 (zero) in the new context.

The value auto gives the box the same stack level as its parent, and doesn’t establish a new stacking context.

Visibility

Description:

This property specifies whether an element is visible—that is, whether the box(es) that are generated by an element are rendered.

Note that even if a box in the normal flow is hidden, it still affects the layout of other elements, unlike the behavior that occurs when we suppress box generation altogether by setting display to none. Descendant boxes of a hidden box will be visible if their visibility is set to visible, whereas descendants of an element for which display is set to none can never generate boxes of their own.

The initial value and the inheritability were changed in CSS2.1 to address the previously undefined state for the root element.

Example:
This style rule makes the element with ID "dynamic" generate an invisible box. It can be made visible using client-side scripting:
#dynamic {
  visibility: hidden;
}

Value:

visible
The value visible makes the generated boxes visible.

hidden
The value hidden makes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible.

collapse
The value collapse is only meaningful for certain internal table objects: rows, row groups, columns, and column groups. It causes the object to be removed from the display; the space it occupied will be filled by subsequent siblings. This doesn’t affect the table layout in any other way, so the user agent doesn’t have to recompute the layout of the table. If a spanned row or column intersects the collapsed object, it is clipped. When it’s specified for any other element than these internal table objects, collapse causes the same behavior as hidden.

Clear

To force an element to start below any floated elements, we can use the clear property with a value of left, right, or both. An element whose clear property is set to left will start below all left-floated boxes in the same block formatting context, while a clear value of right will clear all right-floated boxes. If clear is set to both, the element will start below any floated box in that context. Figure 2 shows the example above, but this time, the second paragraph has a clear value of left.

A cleared elementAn illustration of a cleared p element. The img floats above a non-cleared p element, but not the cleared p element which is not drawn until after the bottom of the img element.
To achieve this clearing, we add space above the cleared element’s top margin until it’s clear of the affected floated boxes. As a result, we can’t use the top margin on the cleared element if we want a specific amount of space between it and the floated box. Space is added above the cleared element’s top margin until it’s free of the float, but that’s all. If we want to create space beneath the floated box, we must set the bottom margin of the floated element, or set top padding on the cleared element.

Internet Explorer for Windows will automatically clear all floated children of an element that has a layout, though this implementation disagrees with the CSS specification.

Urdu:

کسی بھی عناصر شروع سے نیچے شروع کرنے کے لئے ایک عنصر مجبور کرنے کے لئے ، ہم ، بائیں بازو کی ایک قیمت کے ساتھ واضح خصوصیت کا استعمال ، یا دونوں کر سکتے ہیں . حق کی ایک واضح قیمت ٹھیک - شروع خانوں صاف ہو جائے گا ، جبکہ جس کا واضح جائیداد چھوڑ کرنے کے لئے مقرر ایک عنصر ، ایک ہی بلاک فارمیٹنگ تناظر میں تمام بائیں شروع خانوں کے نیچے شروع ہو جائے گا . واضح دونوں کے لئے مقرر کیا جاتا ہے تو ، عنصر اس تناظر میں کسی بھی پیش باکس کے نیچے شروع ہو جائے گا . چترا 2 مندرجہ بالا مثال سے ظاہر ہوتا ہے ، لیکن اس وقت ، دوسرے پیراگراف بائیں بازو کی ایک واضح اہمیت کی حامل ہے .

ایک صاف عنصر . ایک صاف P عنصر کی ایک مثال . IMG ایک غیر صاف P عنصر اوپر floats کے ، لیکن صاف P عنصر IMG عنصر کے سب سے نیچے کے بعد تک تیار نہیں ہے نہیں ہے.
یہ متاثر شروع خانوں کی واضح ہے جب تک اس کے صاف کرنے کی حاصل کرنے کے لئے ، ہم صاف عنصر کے سب سے اوپر مارجن سے اوپر کی جگہ کا اضافہ . ہم نے اسے اور شروع باکس کے درمیان کی جگہ کا ایک مخصوص رقم چاہتے ہیں تو اس کے نتیجے میں ، ہم صاف عنصر پر سب سے اوپر مارجن استعمال نہیں کر سکتے . خلائی یہ فلوٹ مفت ہے جب تک صاف عنصر کے سب سے اوپر مارجن سے اوپر شامل ، لیکن یہ سب کی ہے. ہم شروع باکس کے نیچے کی جگہ بنانے کے لئے چاہتے ہیں، ہم شروع عنصر کے سب سے نیچے مارجن مقرر ، یا صاف عنصر پر سب سے اوپر بھرتی قائم کرنا ضروری ہے .

یہ عمل سی ایس ایس کی تفصیلات سے اتفاق نہیں کرتے اگرچہ ونڈوز کے لیے انٹرنیٹ ایکسپلورر خود کار طریقے سے تمام صاف کریں ، ایک ترتیب ہے کہ ایک عنصر کے بچوں شروع ہو جائے گا .

Float

Description:

This property specifies whether or not a box should float and, if so, if it should float to the left or to the right. A floating box is shifted to the left or to the right as far as it can go, and non-floating content in the normal flow will flow around it on the opposite side. The float property is ignored for elements that are absolutely positioned. User agents are also allowed to ignore it when it’s applied to the root element.

Example:

This style rule makes the box generated by the element with ID "nav" float to the left:
#nav {
  float: left;
}

Value:

left
makes the element generate a block box that is floated to the left

right
makes the element generate a block box that is floated to the right

none
makes the element generate a box that is not floated

Overflow

Description:
This property specifies the behavior that occurs when an element’s content overflows the element’s box.

The default behavior is to make the overflowing content visible, but it can be changed so that the content is clipped to the confines of the element’s box, optionally providing a mechanism for scrolling the content.

If the overflow property is applied to the body or html elements in an HTML document, the user agent may apply it to the viewport.

Example:
This style rule makes the pre element type in HTML generate a fixed-sized box with visible scrollbars:
pre {
  width: 40em;
  height: 20em;
  overflow: scroll;
}

Example:
This style rule makes the pre element type in HTML generate a fixed-sized box with the horizontal scrollbar hidden:
pre {
  width: 40em;
  height: 20em;
  overflow:auto;
  overflow-x:hidden;
}

Value:

auto:
The behavior of auto isn’t specified in any detail in the CSS2.1 specification. In existing implementations it provides scrollbar(s) when necessary, but it doesn’t show scrollbars unless the content overflows the element’s box.

hidden:
hidden causes content that overflows the element’s box to be clipped. No scrolling mechanism will be provided, so the overflow will be invisible and inaccessible.

scroll:
scroll clips overflowing content, just like hidden, but provides a scrolling mechanism so that the overflow can be accessed. This scrolling mechanism is present whether the content overflows the element’s box or not, to prevent it from appearing and disappearing in a dynamic layout. When the output medium is print, this value allows overflowing content to be printed (as if the value were visible).

visible:
visible allows overflowing content to be visible. It will be rendered outside the element’s box, and may thus overlap other content.

Display Properties

Description:
This property controls the type of box an element generates.

The computed value may differ from the specified value for the root element and for floated or absolutely positioned elements; see The Relationship Between display, position, and float for details about the relationship between the display, float, and position properties.

Note that a user agent style sheet may override the initial value of inline for some elements.

Example:

The following rule will cause a elements that are descendants of the .menu element to render as block elements instead of inline elements:

.menu a {
  display: block;
}


Value:

blockblock makes the element generate a block box.

inline
inline makes the element generate one or more inline boxes.

inline-block
inline-block makes the element generate a block box that’s laid out as if it were an inline box.

inline-table
inline-table makes the element behave like a table that’s laid out as if it were an inline box.

list-item
list-item makes the element generate a principal block box and a list-item inline box for the list marker.

run-in
A value of run-in makes the element generate either a block box or an inline box, depending on the context. If the run-in box doesn’t contain a block box, and is followed by a sibling block box (except a table caption) in the normal flow that isn’t, and doesn’t contain, a run-in box, the run-in box becomes the first inline box of the sibling block box. Otherwise, the run-in box becomes a block box.

table
table makes the element behave like a table.

table-caption
table-caption makes the element behave like a table caption.

table-cell
table-cell makes the element behave like a table cell.

table-column
table-column makes the element behave like a table column.

table-column-group
table-column-group makes the element behave like a table column group.

table-footer-group
table-footer-group makes the element behave like a table footer row group.

table-header-group
table-header-group makes the element behave like a table header row group.

table-row
table-row makes the element behave like a table row.

table-row-group
table-row-group makes the element behave like a table body row group.

none
A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.

CSS Dropdown Menu

HTML Structure:

<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>

The CSS :

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

Hover Links and Images

The Image :
The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. When using CSS to achieve this effect, the static image and the hover image are actually contained within the same image file. Basically, we’re displaying the image and cropping it so that only one image state is displayed at one time. In order to do this, we’ll omit the <img> tag and display the image as a the background-image of an <a/> (anchor) tag instead.

Let’s look at an image that could be used as a CSS hover image.

Simplistic Markup :
As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:

<a class="myButtonLink" href="#LinkURL">Leaf</a>
The CSS
As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:

.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}

We’re using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.

DEFINING STYLES FOR LINKS :

As mentioned in the above table, there are four different selectors with respect to links.
You can specify whatever style you'd like to each of these selectors, just like you'd do with normal text.
The four selectors are:

A:link
Defines the style for normal unvisited links.

A:visited
Defines the style for visited links.

A:active
Defines the style for active links.
A link becomes active once you click on it.

A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.

CSS:
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>

DIV Basic Layout

1. Basic structure

First of all, we create the basic HTML structure:

1. <div id="wrap">
2. <div id="header"></div>
3. <div id="nav"></div>
4. <div id="main"></div>
5. <div id="sidebar"></div>
6. <div id="footer"></div>
7. </div>

After that, we put some content in the different sections:

1. <div id="wrap">
2. <div id="header"><h1>Document Heading</h1></div>
3. <div id="nav">
4. <ul>
5. <li><a href="#">Option 1</a></li>
6. <li><a href="#">Option 2</a></li>
7. ...
8. </ul>
9. </div>
10. <div id="main">
11. <h2>Column 1</h2>
12. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
13. </div>
14. <div id="sidebar">
15. <h2>Column 2</h2>
16. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
17. <ul>
18. <li><a href="#">Link 1</a></li>
19. <li><a href="#">Link 2</a></li>
20. ...
21. </ul>
22. </div>
23. <div id="footer">
24. <p>Footer</p>
25. </div>
26. </div>

2. Adjust the body and html elements

To make the content reach the edges of the browser window, we set the margin andpadding of the body and html elements to zero. We also specify colours for text and background.

1. body,
2. html {
3. margin:0;
4. padding:0;
5. color:#000;
6. background:#a7a09a;
7. }

3. On to the main containers

After that it’s time to give the content area a width and center it horizontally. We do that by specifying the width and margins of the main container, #wrap. We also give it a background colour to make it show up on the page.

1. #wrap {
2. width:750px;
3. margin:0 auto;
4. background:#99c;
5. }

After that, we give the different sections of the document different background colours to make them show up.

1. #header {
2. background:#ddd;
3. }
4. #nav {
5. background:#c99;
6. }
7. #main {
8. background:#9c9;
9. }
10. #sidebar {
11. background:#c9c;
12. }
13. #footer {
14. background:#cc9;
15. }

4. Place the columns side by side

To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.

1. #main {
2. float:left;
3. width:500px;
4. background:#9c9;
5. }
6. #sidebar {
7. float:right;
8. width:250px;
9. background:#c9c;
10. }

5. Push the footer down

The footer doesn’t get pushed down to the bottom of the content because of the wayfloat works. When you float an element, it is removed from the document flow and doesn’t push elements that follow it down. In this case #footer will start right below#sidebar.

To avoid this we use the clear property to tell the footer that it can’t have any elements next to it.

1. #footer {
2. clear:both;
3. background:#cc9;
4. }

6. Fix the background colour

Now we can see that the shorter column doesn’t continue all the way down to the footer. To make it look like it does, we use the same background colour for #sidebarand #wrap.

1. #sidebar {
2. float:right;
3. width:250px;
4. background:#99c;
5. }

7. Make the navigation bar horizontal

#nav contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it.

1. #nav ul {
2. margin:0;
3. padding:0;
4. list-style:none;
5. }
6. #nav li {
7. display:inline;
8. margin:0;
9. padding:0;
10. }

8. Adjust margins and paddings, and make IE 6 cooperate

Almost done. Time to adjust the margin and padding of some elements to make the layout a little less cramped.

1. #header {
2. padding:5px 10px;
3. background:#ddd;
4. }
5. h1 {
6. margin:0;
7. }
8. #nav {
9. padding:5px 10px;
10. background:#c99;
11. }
12. #main {
13. float:left;
14. width:480px;
15. padding:10px;
16. background:#9c9;
17. }
18. h2 {
19. margin:0 0 1em;
20. }
21. #sidebar {
22. float:right;
23. width:230px;
24. padding:10px;
25. background:#99c;
26. }
27. #footer {
28. clear:both;
29. padding:5px 10px;
30. background:#cc9;
31. }
32. #footer p {
33. margin:0;
34. }

I.E. Declaration :

1. * html #footer {
2. height:1px;
3. }

Stack & Grow Effects

Description:


CSS:

HTML:

Bump Up - Effect

Description:

This works best when you have a series of horizontal items. That way when you run your mouse across them you get a nice wave effect.

This one is super easy to implement and there are in fact several ways to go about it. What I did below is just apply a margin to each image and then reduced that margin on hover. The margin starts at 15px, then reduces to only 2px on hover, which makes the image jump up. You could easily use this same effect on text items if they were in a list.

The transition here is completely optional as the effect still works quite well without it. Just to make it a little smoother though I threw in a quick animation set to ease-out, which I thought provided the best effect for this particular subject.

CSS :

ex1 img{ border: 5px solid #ccc; 

float: left; 

margin: 15px;

-webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out;

-o-transition: margin 0.5s ease-out; } .ex1 img:hover { margin-top: 2px; }

HTML:

<div class="ex1">

<img src="">

<img src="">

<img src="">

<img src="">

</div>

Positioning

The position property is used to define whether a box is absolute, relative, static or fixed:

Static Postion:
Static is the default value and renders a box in the normal order of things, as they appear in the HTML.
This is how all objects on a page are positioned by default and with this setting all objects are to remain in this position. The top, bottom, left and right properties don't apply to static objects.

Relative Position:

Relative is much like static but the box can be offset from its original position with the properties top, right, bottom and left. With the property, the coordinates of this document are based on the position it was in when the document is fully loaded.

Absolute Position:

Absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page. using top,right, bottom and left. When this property is used, it's moved from the normal object flow and other objects will change position and will move into the space this object once occupied. The absolute class allows you to place the object in front of or behind other objects.

Fixed Position:

Fixed behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled. The coordinates of this element use the browser window, so if the document is scrolled, the fixed objects don't scroll with it.

Nesting & Grouping

Grouping

You can give the same properties to a number of selectors without having to repeat them.

For example, if you have something like:

h2 {
    color: red;
}

.thisOtherClass {
    color: red;
}

.yetAnotherClass {
    color: red;
}

You can simply separate selectors with commas in one line and apply the same properties to them all so, making the above:

h2, .thisOtherClass, .yetAnotherClass {
    color: red;
}

Nesting

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:

#top {
    background-color: #ccc;
    padding: 1em
}

#top h1 {
    color: #ff0;
}

#top p {
    color: red;
    font-weight: bold;
}

This removes the need for classes or IDs on the p and h1 tags if it is applied to HTML that looks something like this:

<div id="top">
    <h1>Chocolate curry</h1>
    <p>This is my recipe for making curry purely with chocolate</p>
    <p>Mmm mm mmmmm</p>
</div>

This is because, by separating selectors with spaces, we are saying “h1 inside ID top is colour #ff0” and “p inside ID top is red and bold”.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.