revision:
CSS color names : in CSS, a color can be specified by using a predefined color name: tomato, blue, red, gray, etc.
CSS background color : can be set for HTML elements.
<h3 style="background-color:blue;margin-left: 3vw;">Hello World</h3>
CSS text color : can be set for text.
<h3 style="color:blue; margin-left: 3vw;">Hello World</h3>
CSS border color : can be set for borders.
<h3 style="border:2px solid tomato; margin-left: 3vw;">Hello World</h3>
CSS color values: in CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
background - sets all the background properties in one declaration
background-attachment - sets whether a background image is fixed or scrolls with the rest of the page
background-clip - specifies the painting area of the background
background-color - sets the background color of an element
background-image - sets the background image for an element
background-origin - specifies where the background image(s) is/are positioned
background-position - sets the starting position of a background image
background-repeat - sets how a background image will be repeated
background-size - specifies the size of the background image(s)
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))"
You can set the background color for any HTML element.
By default, the image is repeated so it covers the entire element.
The background image can also be set for specific elements, like the <p> element.
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. To repeat an image only horizontally use "background-repeat: repeat-x;". To repeat an image vertically, set "background-repeat: repeat-y".
Showing the background image only once is specified by the background-repeat property: "background-repeat: no-repeat".
This property is used to specify the position of the background image.
This property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
When using the shorthand property the order of the property values is: background-color, background-image, background-repeat, background-attachment, background-position.
It does not matter if one of the property values is missing, as long as the other ones are in this order.
The "opacity property" specifies the opacity/transparency of an element.
It can take a value from 0.0 - 1.0. The lower value, the more transparent.
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.
Transparency using RGBA
If you do not want to apply opacity to child elements, use RGBA color values.
You can use RGB as a color value.
In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - 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 (fully opaque).
border - sets all the border properties in one declaration
border-bottom - sets all the bottom border properties in one declaration
border-bottom-color - sets the color of the bottom border
border-bottom-style - sets the style of the bottom border
border-bottom-width - sets the width of the bottom border
border-color - sets the color of the four borders
border-left - sets all the left border properties in one declaration
border-left-color - sets the color of the left border
border-left-style - sets the style of the left border
border-left-width - sets the width of the left border
border-radius - sets all the four border-*-radius properties for rounded corners
border-right - sets all the right border properties in one declaration
border-right-color - sets the color of the right border
border-right-style - sets the style of the right border
border-right-width - sets the width of the right border
border-style - sets the style of the four borders
border-top - sets all the top border properties in one declaration
border-top-color - sets the color of the top border
border-top-style - sets the style of the top border
border-top-width - sets the width of the top border
border-width - sets the width of the four borders
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).
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).
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)"), HSL (specify a HSL value, like "hsl(0, 100%, 50%)"), transparent. Note: if border-color is not set, it inherits the color of the element.
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). The color of the border can also be specified using a hexadecimal value (HEX), using RGB values, or using HSL values.
If the border-style property has "four values": (e.g. border-style: dotted solid double dashed) top border is dotted, right border is solid, bottom border is double, left border is dashed.
If the border-style property has "three values": (e.g. border-style: dotted solid double) top border is dotted, right and left borders are solid, bottom border is double.
if the border-style property has "two values":(e.g. border-style: dotted solid) top and bottom borders are dotted, right and left borders are solid.
If the border-style property has "one value": (e.g. border-style: dotted) all four borders are dotted./P>
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. You can also specify all the individual border properties for just one side.
The "border-radius property" is used to add rounded borders to an element.
margin - a shorthand property for setting the margin properties in one declaration
margin-bottom - sets the bottom margin of an element
margin-left - sets the left margin of an element
margin-right - sets the right margin of an element
margin-top - sets the top margin of an element
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.
The auto value: you can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
The inherit value: the margin of the element is inherited from the parent element.
Tip: negative values are allowed.
The margin property is a shorthand property for the following individual margin properties: margin-top, margin-right, margin-bottom, margin-left
If the margin property has "four values": (e.g. margin: 25px 50px 75px 100px) top margin is 25px, right margin is 50px, bottom margin is 75px. left margin is 100px.
If the margin property has "three values": (e.g. margin: 25px 50px 75px) top margin is 25px, right and left margins are 50px, bottom margin is 75px.
If the margin property has "two values": (e.g. margin: 25px 50px) top and bottom margins are 25px, right and left margins are 50px.
If the margin property has "one value": (e.g. margin: 25px) all four margins are 25px.
This does not happen on left and right margins! Only top and bottom margins!
Assume a 'h1' element has a bottom margin of 50px and a 'h2' element has a top margin set to 20px. Common sense would seem to suggest that the vertical margin between the 'h1' and the 'h2' would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.
The space is generated inside of any defined borders. With CSS, you have full control over the padding as there are are properties for setting the padding for each side of an element (top, right, bottom, and left).
padding - a shorthand property for setting all the padding properties in one declaration
padding-bottom - sets the bottom padding of an element
padding-left - sets the left padding of an element
padding-right - sets the right padding of an element
padding-top - sets the top padding of an element
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.
Note: Negative values are not allowed.
The padding property is a shorthand property for the following individual padding properties: padding-top, padding-right, padding-bottom, padding-left
If the padding property has "four values": (e.g. padding: 25px 50px 75px 100px) top padding is 25px, right padding is 50px, bottom padding is 75px, left padding is 100px.
If the padding property has "three values": (e.g. padding: 25px 50px 75px) top padding is 25px, right and left padding are 50px, bottom padding is 75px.
If the padding property has "two values": (e.g. padding: 25px 50px) top and bottom paddings are 25px, right and left paddings are 50px.
If the padding property has "one values": (e.g. padding: 25px) all four paddings are 25px.
The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).
So, if an element has a specified width, the padding added to that element will be added to the total width of the element.
This is often an undesirable result. To keep the width at the predefined value, no matter the amount of padding, you can use the box-sizing property.
This causes the element to maintain its width; if you increase the padding, the available content space will decrease.
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.
height - sets the height of an element
max-height - sets the maximum height of an element
max-width - sets the maximum width of an element
min-height - sets the minimum height of an element
min-width - sets the minimum width of an element
width - sets the width of an element
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.
The max-width can be specified in length values (like px, cm, etc.) or in percent (%) of the containing block, or set to none (this is default and means that there is no maximum width).
When the browser window is smaller than the width of the element, the browser then adds a horizontal scrollbar to the page. Using max-width instead, in this situation, will improve the browser's handling of small windows.
Note: The value of the max-width property overrides width.
An outline makes the element to "stand out".
outline - a shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color - sets the color of an outline
outline-offset - specifies the space between an outline and the edge or border of an element
outline-style - sets the style of an outline
outline-width - sets the width of an outline
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.
dotted - defines a dotted outline,
dashed - defines a dashed outline,
solid - defines a solid outline,
double - defines a double outline,
groove - defines a 3D grooved outline,
ridge - defines a 3D ridged outline,
inset - defines a 3D inset outline,
outset - defines a 3D outset outline,
none - defines no outline,
hidden - defines a hidden outline.
thin (typically 1px),
medium (typically 3px),
thick (typically 5px),
a specific size (in px, pt, cm, em, etc).
name - specify a color name, like "red",
HEX - specify a hex value, like "#ff0000",
RGB - specify a RGB value, like "rgb(255,0,0)",
HSL - specify a HSL value, like "hsl(0, 100%, 50%)",
invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)
The "outline property" is a shorthand property for setting the following individual outline properties: outline-width, outline-style (required), outline-color.
The "outline property" is specified as one, two, or three values from the list above. The order of the values does not matter.
The "outline-offset property" adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.