CSS Height and Width

CSS Height and Width

---

Example

This element has a width of 100%.

Yourself Try

Setting height and width

The height and width properties are utilized to set the height and width of a component.
The height and width can be set to auto (this is default. Implies that the program computes the height and width), or be indicated long qualities, similar to px, cm, and so on., or in percent (%) of the containing square.

This element has a height of 200 pixels and a width of 50%

Example

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;}

Yourself Try

This element has a height of 100 pixels and a width of 500 pixels.

Example

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;}

Yourself Try

Wright © bestwebdesign and Graphics design

Read More

CSS Padding

CSS Padding

---

The CSS padding properties are utilized to create space around a component's substance, within any characterized fringes.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of a component (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

The following example sets different padding for all four sides of a <div> element: 

Example

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;}

Yourself Try

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

So, here is how it works:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

Example

div {
    padding: 25px 50px 75px 100px;}

Yourself Try

If the padding property has three values:

• padding: 25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

Example

div {
    padding: 25px 50px 75px;}

Yourself Try

Wright © bestwebdesign and Graphics design

Read More

CSS Box Model

CSS Box Model

---

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the expression "box show" is utilized when discussing plan and format. 

The CSS box demonstrate is basically a container that folds over each HTML component. It comprises of: margins, borders, padding, and the real substance. The picture beneath delineates the crate demonstrate:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements. 

Example

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;}

Yourself Try

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Assume we want to style a <div> element to have a total width of 350px:

Example

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; }

Yourself Try

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

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

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Wright © bestwebdesign and Graphics design

Read More

CSS Margins

---

CSS Margins

The CSS margin properties are utilized to make space around elements, outside of any characterized borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of a component (top, right, base, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;}

Yourself Try

---

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.
The margin property is a shorthand property for the following individual margin properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

So, here is how it works:
If the margin property has four values:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

Example

p {
    margin: 25px 50px 75px 100px;}

Yourself Try

If the margin property has three values:

• margin: 25px 50px 75px;
  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px

Example

p {
    margin: 25px 50px 75px;}

Yourself Try

If the margin property has two values:

• margin: 25px 50px;
  • top and bottom margins are 25px
  • right and left margins are 50px

Example

p {
    margin: 25px 50px;}

Yourself Try

If the margin property has one value:

• margin: 25px;
  • all four margins are 25px

Example

p {
    margin: 25px;}

Yourself Try

Auto Value

You can set the margin property to auto to horizontally center the element within its container.

Example

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;}

Yourself Try

Inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

Example

div {
    border: 1px solid red;
    margin-left: 100px;}

p.ex1 {
    margin-left: inherit;}

Yourself Try

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

Example

h1 {
    margin: 0 0 50px 0;}

h2 {
    margin: 20px 0 0 0;}

Yourself Try

Wright © bestwebdesign and Graphics design

Read More

CSS Borders

---

Border Style

The border-style property specifies what kind of border to display.
The following values are allowed:

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Yourself Try

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Yourself Try

---

Border Width

The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

5px border-width

Example

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Yourself Try

Border Color

The border-color property is used to set the color of the four borders.
The color can be set by:

• name - specify a color name, like "red"
• Hex - specify a hex value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
If border-color is not set, it inherits the color of the element.

Red border

Example

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;}

Yourself Try

Border - Individual Sides

From the examples above you have seen that it is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Different Border Styles

Example

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

Yourself Try

Border - Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:

• border-width
• border-style (required)
• border-color

Example

p {
    border: 5px solid red;}

Yourself Try

Result:

Some text

Yourself Try

You can also specify all the individual border properties for just one side:

Example

p {
    border-left: 6px solid red;
    background-color: lightgrey;}

Yourself Try

Result:

Some text

Yourself Try

Left Border

p {
    border-left: 6px solid red;
    background-color: lightgrey;}

Yourself Try

Result:

Some text

Yourself Try

Bottom Border

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;}

Yourself Try

Result:

Some text

Yourself Try

Rounded Borders

The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example

p {
    border: 2px solid red;
    border-radius: 5px;}

Yourself Try

Wright © bestwebdesign and Graphics design

Read More

CSS Backgrounds

CSS Backgrounds

---

The CSS background properties are used to define the background effects for elements.

CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

The background-color property specifies the background color of an element.
The background color of a page is set like this:

Example

body {
    background-color: blue;}

Yourself Try

With CSS, a color is most often specified by:

• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.
In the example below, the <h1>, <p>, and <div> elements have different background colors:

Example

h1 {
    background-color: green;}

div {
    background-color: lightblue;}

p {
    background-color: yellow;}

Yourself Try

Background Image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:

Example

body {
    background-image: url("paper.gif");}

Yourself Try

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
    background-image: url("gradient_bg.png");
}

Yourself Try

f the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Yourself Try

Background Image - Set position and no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

Yourself Try

The position of the image is specified by the background-position property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
} 

Yourself Try

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;}

Yourself Try

Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
The shorthand property for background is background:

Example

body {
    background: #ffffff url("img_tree.png") no-repeat right top;}

Yourself Try

Wright © bestwebdesign and Graphics design

Read More