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

CSS Colors

CSS Colors

Color Names

HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Yourself Try

Background Color

You can set the background color for HTML elements:

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Yourself Try

Text Color

You can set the color of text:

Hello World

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.

Example

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Yourself Try

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Yourself Try

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Example

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Yourself Try

RGB Value

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

Example

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Yourself Try

Shades of gray are often defined using equal values for all the 3 light sources:

Example

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

Yourself Try

HEX Value

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Example

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

Yourself Try

Shades of gray are often defined using equal values for all the 3 light sources:

Example

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

Yourself Try

---

HSL Value

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Example

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Yourself Try

Saturation

Saturation can be describe as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.

Example

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Yourself Try

Lightness

The lightness off a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Example

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Yourself Try

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:

Example

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

Yourself Try

RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

Yourself Try

HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Yourself Try

Wright © bestwebdesign and Graphics design

Read More