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-topmargin-rightmargin-bottommargin-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.
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 widthlength– Defines the height/width in px, cm, etc.%– Defines the height/width in percent of the containing blockinitial– Sets the height/width to its default valueinherit– The height/width will be inherited from its parent value
CSS height and width Examples
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-styleoutline-coloroutline-widthoutline-offsetoutline
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 containerright– The element floats to the right of its containernone– The element does not float (will be displayed just where it occurs in the text). This is defaultinherit– 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: