The CSS Dimension Properties

If you want to make adjustments or to set the height and the width of the element that you are working on then it is the CSS dimension properties that you need to tweak a bit.

The CSS Dimension Properties

There are several things that you can adjust using the CSS dimension properties.

  • height
  • max-height
  • max-width
  • min-height
  • min-width
  • width

Now we would be looking more deeply within each property and how you can adjust them.

CSS Height Property

This property is used for setting the height of the element on a page. Keep in mind that the height property does not include the values for the padding, the margin and the border. Here is an example of a code for the height property:

p.ex

{

height:200px;

width:200px;

}

 

CSS Width Property

This property is used for setting the width of the element on a page. The width property does not include the values for the padding, the margin and the border. Here is an example of a code for the width property:

p.ex

{

height:200px;

width:200px;

}

 

The Max Height Property

This is the CSS property that sets the maximum height of an element. Here is a sample code for setting the mx height of an element:

p
{
max-height:60px;
}

In this example, the max height that has been set is 60 pixels.

The Min Height Property

The min height property is the property used in defining the minimum height that would be used for an element on a page that you are working on. This is usually defined using pixels as a measurement for the height of the element. One thing that you need to remember is that in setting the min height of the element, it would not affect the height of the border, the padding and the margin that surrounds it. Here is an example code showing how the min height can be defined for a sheet:

p

{

min-height:200px;

}

 

In this example, the minimum height set for the element is 200 pixels.

The Max and Min Width Properties

These properties are used for defining the maximum and the minimum width that can be used for the elements. As with the height properties, it only affects the actual elements. It would have no bearing at all on the border, the margin or the padding that surrounds the element. So when you are setting the min and max width, you just have to consider the element itself. Here is an example of a code setting the max-width property:

p

{

max-width:100px;

}

 

In this example the max width has been set at 200 pixels. Now here is a sample code that sets the minimum width of an element:

p

{

min-height:50px;

}

 

In this example the minimum height of the element has been defined to be at 50 pixels.

The dimension properties of the CSS are some of the most basic properties that you should learn to use. It can be very useful in making the sheet look like the way that you wanted it.

CSS Grouping and Nesting Selectors

When using style sheets, you might encounter having to make elements that are very similar. This might seem like a very cumbersome way of making a page. The good news is that for anything that is highly repetitive, there is a good way of simplifying things.

CSS Grouping and Nesting Selectors

Instead of having to create similar elements, you can use nesting and grouping selectors in order to make things a lot simpler for you. Here is an example of a page with very similar elements to it:

h1

{

color:red;

}

h2

{

color:red;

}

p

{

color:red;

}

You can minimize this code by the use of groupings and selectors. When you use several selectors, you just have to separate each with a comma so that each would be indicated as separate. With the use of nesting, you can set the styles to be used on the whole selector. This method of creating the code could save space and more importantly, time. But you should remember that the use of nesting and selectors is only going to be possible if the sheet that you are creating has a good structure to it.

Benefits of Using Selectors

A developer would be able to benefit from the use of selectors by being able to handle codes of very large size. It can save a great deal of time since there would be a lot less code to be created. We have also mentioned earlier that it can save on the amount of space to be taken up in coding. Here is a good example of how the above code that we have shown, with very similar elements can be coded differently using grouping selectors:

h1,h2,p
{
color:red;
}

As compared with the original code, this one is much simpler and eats up less space. The end result would be the same.

Using Nesting Selectors

You can also define a selector within an existing selector that you have created. Here is an example code that uses nesting selectors:

p

{

color:green;

text-align:center;

}

.marked

{

background-color:blue;

}

.marked p

{

color:red;

}

 

In this code you would see that a style has been set for all of the p elements within it. Using selectors another style has been defined for the elements that would fall under the “marked” classification. Then there is a third style that is selected for all the p elements that would fall under the marked classification. Using this method you can set selectors within existing selectors that you have created.

The benefits of the use of grouping and nesting selectors could not be overemphasized. A developer would obviously benefit from such a simplified way of coding. By using this method as well, you can save on the space that would be taken up by the code.

If you are unfamiliar with selectors, then you better start with some simple examples first and then you can move on to even more complex codes that you can use.