CSS Property and values

CSS Color

CSS uses color values to specify a color.

You can specify your color values in various formats. The following table lists all the possible formats −

Format	Syntax	Example
Hex Code	#RRGGBB	p{color:#FF0000;}
Short Hex Code	#RGB	p{color:#6A7;}
RGB %	rgb(rrr%,ggg%,bbb%)	p{color:rgb(50%,50%,50%);}
RGB Absolute	rgb(rrr,ggg,bbb)	p{color:rgb(0,0,255);}
keyword	aqua, black, etc.	p{color:teal;}

CSS background-color Property

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

<html>
<head>
<style>
body {
background-color: coral;
}
</style>
</head>
<body>

<h1>The background-color Property</h1>

<p>The background color can be specified with a color name.</p>

</body>
</html>

CSS border-style Property

The border-style property sets the style of an element’s four borders. This property can have from one to four values.

Examples:

border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
border-style: dotted;
- all four borders are dotted

Example:

<html>
<head>
<style>
h1 {
border-style: dotted;
}

div {
border-style: dotted;
}
</style>
</head>
<body>

<h1>A Heading with a dotted border</h1>

<div>A div element with a dotted border.</div>

</body>
</html>

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, 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

All the margin properties can have the following values:

auto – the browser calculates the margin
length – specifies a margin in px, pt, cm, etc.
% – specifies a margin in % of the width of the containing element
inherit – specifies that the margin should be inherited from the parent element

<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

CSS Height, Width and Max-width

The CSS height and width properties are used to set the height and width of an element.

The CSS max-width property is used to set the maximum width of an element.

This element has a height of 50 pixels and a width of 100%.

SS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values

The height and width properties may have the following values:

auto – This is default. The browser calculates the height and width
length – Defines the height/width in px, cm, etc.
% – Defines the height/width in percent of the containing block
initial – Sets the height/width to its default value
inherit – The height/width will be inherited from its parent value

CSS height and width Examples

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

Example

Set the height and width of a <div> element:

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

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.

CSS has the following outline properties:

outline-style
outline-color
outline-width
outline-offset
outline

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.

<html>
<head>
<style>
p {
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: “Times New Roman”.

<html>
<head>
<style>
.p1 {
font-family: “Times New Roman”, Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: “Lucida Console”, “Courier New”, monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class=”p1″>This is a paragraph, shown in the Times New Roman font.</p>
<p class=”p2″>This is a paragraph, shown in the Arial font.</p>
<p class=”p3″>This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>

The float Property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

left – The element floats to the left of its container
right – The element floats to the right of its container
none – The element does not float (will be displayed just where it occurs in the text). This is default
inherit – The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

Example – float: right;

The following example specifies that an image should float to the right in a text: