Introduction
Term: CSS
Description: CSS stands for Cascading Style Sheets. We can use CSS to add design/style to an
HTML page. Becoming familiar with CSS allows
us to do a a good design for a webpage.
When we add a CSS style, we should broadly keep two things in
mind. First is the selection of an element (or elements) where we apply the
style. Second, is the CSS design that we would apply to the selected
element (or elements).
The reason CSS is called Cascading Style Sheet is because we can provide design
for an element by using multiple input (often in terms of CSS input files). CSS
uses rules to select the value, if there are multiple conflicting designs from
these multiple style sheets.
Term: Stylesheet
Description: A CSS Stylesheet is a file that contains one or more CSS rules. Typically a CSS stylesheet is
attached to an HTML file using either the <link> tag or the @import directive.
Example: The following link element includes the CSS file with file-name as "t-rex.css".
<head>
<link type="text/css" rel="stylesheet" href="t-rex.css">
</head>
Example: The following @import directive includes the CSS file with file-name as "t-rex.css". please note that
unlike the link tag, the @import directive is included within the <style> tags.
<head>
<style>
@import url(./t-rex.css);
</style>
</head>
Term: Property
Description: The building block for CSS design is a CSS property. When we specify a CSS rule for a selector (or
selectors), it can have one or more properties. Also, each property must also have a value.
Example: The following rule has one property: font-family.
This property is used to specify the font type for the paragraph element (identified by the <p> tag).
p {
font-family: Verdana, sans-serif;
}
Example: The following rule has two properties: font-family and color.
The font-family and color properties are used to specify the font type and color for the
paragraph element (identified by the <p> tag) respectively.
p {
font-family: Verdana, sans-serif;
color: blue;
}
Term: Rule
Description: CSS designs are applied using CSS rules. A CSS rule starts with the selector followed by a block.
The block holds one or more CSS properties.
Example: The following block is one CSS rule. It has two properties.
p {
font-family: Verdana, sans-serif;
color: blue;
}
Keyword: link
Description: We can use the link tag to include an external CSS file.
Example: The following link element includes the CSS file with file-name as "t-rex.css".
<head>
<link type="text/css" rel="stylesheet" href="t-rex.css">
</head>
Keyword: @import
Description: We can use the @import directive to include an external CSS file. This is similar to the link tag.
Example: The following @import directive includes the CSS file with file-name as "t-rex.css". please note that
unlike the link tag, the @import directive is included within the <style> tags.
<head>
<style>
@import url(./t-rex.css);
</style>
</head>
Selectors
Term: Selector
Description: A selector is the element to which we apply a CSS rule. A CSS rule can have one or more selectors.
If we have more than one rules, then we need to separate them by a comma.
Example: The following rule has one selector: the para element (identified by the p tag).
p {
font-family: Verdana, sans-serif;
color: blue;
}
Example: The following rule has two selectors: the para element (identified by the p tag) and the list element
(identified by the li tag).
p, li {
font-family: Verdana, sans-serif;
color: blue;
}
Keyword: class
Description: CSS provides us a way to select an element or a group of elements using CSS class.
When specifying selectors for a CSS class, the (common) convention
is to use a dot character ("."). CSS allows multiple elements on a page to have
the same CSS class. An easy way to remember this is to think of a class room full
of students and the class (like the CSS class) can have many students.
Example: We can add a class to an HTML element using the "class" attribute. Here is an HTML
snippet that adds a class named "blue" to a paragraph element. Once we have an element
with "blue" class, we can add the class name as a selector ".blue" and assign CSS rule to it.
<html>
<body>
<p class="blue">
This is a simple HTML paragraph.
</p>
</body>
</html>
Keyword: id
Description: CSS provides us a way to select a specific element in a give page using CSS id.
When specifying a selector for a CSS id, the (common) convention is to use a hash
character ("#"). CSS allows only one element on a page to have
a given CSS id. Imagine a class full of students -- each student needs to have a unique
student id.
Example: We can add an id to an HTML element using the "id" attribute. Here is an HTML
snippet that adds an id named "blue" to a paragraph element. Once we have an element
with "blue" id, we can add the id name as a selector "#blue" and assign CSS rule to it.
<html>
<body>
<p id="blue">
This is a simple HTML paragraph.
</p>
</body>
</html>
Box Model
Property: border-width
Usage: border-width: [thin | medium | thick | <width_in_px>] {1,4} | inherit
Description: Specifies the width of the border. When added, the value applies to all four sides of
the border; default value is "medium".
Values like "thin", "medium", and "thick" are preset value in terms of pixels.
Does not support width value in percentage.
We can also specify more than one value. If we provide two values, then the
first value applies to the top/bottom borders and the second value applies to left/right
borders. If we provide
three values, then the first value applies to the top border, the second value applies
to the left/right borders, and the third values apply to the bottom border. If we specify
all four, then they apply to the top, right, bottom, and left, in the order of first,
second, third, and fourth values, respectively.
For border-width to work, the border-style should NOT be set to "none".
Example: Specifying "border-width: thick" means a border with a thick line.
Example: Specifying "border-width: 8px" means a border with a thickness of 8px width.
Property: border-style
Usage: border-style: [solid | dotted | dashed | double | groove | ridge | none | inset | outset | hidden] {1,4} | inherit
Description: Set the style of the border to be one of the above values. If we set it to none, then we would have no border at all.
We can also specify more than one value. If we provide two values, then the
first value applies to the top/bottom border style and the second value applies to left/right
borders. If we provide
three values, then the first value applies to the top border, the second value applies
to the left/right borders, and the third values apply to the bottom border. If we specify
all four, then they apply to the top, right, bottom, and left, in the order of first,
second, third, and fourth values, respectively.
Default value is "none"!
Example: Specifying "border-style: solid" means we have a border that will have a solid line.
Example: Specifying "border-style: double" means we have a border that will have two solid lines.
Property: border-color
Usage: border-color: [<color> | transparent] {1,4} | inherit
Description: Sets the color of the border. To be more precise, it sets the color of the (border) line.
We can specify the value of color in both text (as in "blue", "red", etc) or the RGB
notation as #0000FF, #FF0000, etc.
We can also specify the border-color to be "transparent" -- you can still provide
border-width to the border. However, because the border-color is transparent, the width
would not be seen!
We can also specify more than one value. If we provide two values, then the
first value applies to the top/bottom border color and the second value applies to left/right
border colors. If we provide
three values, then the first value applies to the top border, the second value applies
to the left/right borders, and the third values apply to the bottom border. If we specify
all four, then they apply to the top, right, bottom, and left, in the order of first,
second, third, and fourth values, respectively.
Example: Specifying "border-color: blue" means we have a border will have a line of blue color.
Example: Specifying "border-color: #0000FF" would specify the border-color to #0000FF, which BTW, is also blue.
Property: border
Usage: border: [<values_width> | <values_style> | <values_color>] | inherit
Description: A shorthand to neatly tuck the following three properties (in order): border-width, border-style,
and border-color. See the API border-width for the values of width, border-style
for values of style, and border-color for values of color. It is allowed to not provide
all three properties. It does not add border-radius.
Example: Specifying "border: thick solid blue" means we have a border that has "thick" width,
is solid in style, and is blue in color.
Example: Specifying "border: thick solid" means we have a border that has "thick" width and
is solid in style. Since we do not specify the color, it would be the default value.
Property: border-radius
Usage: border-radius: [<length_value> | <percentage>] {1,4} [/ [<length> | <percentage>] {1,4} | inherit
Description: Specifies the radius of the border corners. To be more precise, the radius specifies the
quarter of an ellipse that replaces the square corners. For each corner, it can accept two
values. The first value is the horizontal radius of the ellipse. The second value is the vertical
radius of the ellipse. If we specify a single value, then both the horizontal and the vertical
radii are same and in that case, the quarter ellipse becomes a quarter circle. If we want to
have different values for each corners, then we can specify up to 4 values, followed by a "/"
and then another 4 values. Does not accept any negative values.
Example: Specifying "border-radius: 10px" would mean that both horizontal radius
and vertical radius would be 10px and this would be applied to all corners.
Example: Specifying "border-radius: 10px/20px" would mean that the horizontal radius would
be 10px and the vertical radius would be 20px and this would be applied to all corners.
Example: We can specify up to 8 values, two for each corner.
Thus, "border-radius: 10px 11px 12px 13px/20px 21px 22px 23px" would mean that
we have 10px/20px for top-left corner, 11px/21px for top-right corner,
12px/22px for bottom-right corner, and 13px/23px for bottom-left corner.
Property: border-top-width
Usage: border-top-width: [thin | medium | thick | <length>] | inherit
Description: Specifies the width of the top border.
For border-top-width to work, the border-style should NOT be set to "none".
Does not support width value in percentage.
Values like "thin", "medium", and "thick" are preset value in terms of pixels.
See "border-width" property for more details.
Example: Specifying "border-top-width: thick" means a top border with a thick line.
Example: Specifying "border-top-width: 8px" means a border on the top with a thickness of 8px.
Property: border-right-width
Usage: border-right-width: [thin | medium | thick | <length>] | inherit
Description: Specifies the width of the right border.
For border-right-width to work, the border-style should NOT be set to "none".
Does not support width value in percentage.
Values like "thin", "medium", and "thick" are preset value in terms of pixels.
See "border-width" property for more details.
Example: Specifying "border-right-width: thick" means a right border with a thick line.
Example: Specifying "border-right-width: 8px" means a border on the right with a thickness of 8px.
Property: border-bottom-width
Usage: border-bottom-width: [thin | medium | thick | <length>] | inherit
Description: Specifies the width of the bottom border.
For border-right-width to work, the border-style should NOT be set to "none".
Does not support width value in percentage.
Values like "thin", "medium", and "thick" are preset value in terms of pixels.
See "border-width" property for more details.
Example: Specifying "border-bottom-width: thick" means a bottom border with a thick line.
Example: Specifying "border-bottom-width: 8px" means a border on the bottom with a thickness of 8px.
Property: border-left-width
Usage: border-left-width: [thin | medium | thick | <length>] | inherit
Description: Specifies the width of the left border.
For border-right-width to work, the border-style should NOT be set to "none".
Does not support width value in percentage.
Values like "thin", "medium", and "thick" are preset value in terms of pixels.
See "border-width" property for more details.
Example: Specifying "border-left-width: thick" means a left border with a thick line.
Example: Specifying "border-left-width: 8px" means a border on the left with a thickness of 8px.
Property: border-top-style
Usage: border-top-style: [solid | dotted | dashed | double | groove | ridge | none | inset | outset | hidden] | inherit
Description: Set the style of the border at the top to be one of the above values. If we set it to none, then we would have no top border at all.
Example: Specifying "border-top-style: solid" means we have a border that will have a solid line on the top.
Example: Specifying "border-top-style: double" means we have a border that will have two solid lines on the top.
Property: border-right-style
Usage: border-right-style: [solid | dotted | dashed | double | groove | ridge | none | inset | outset | hidden] | inherit
Description: Set the style of the border on the right to be one of the above values. If we set it to none, then we would have no right border at all.
Example: Specifying "border-right-style: solid" means we have a border that will have a solid line on the right side.
Example: Specifying "border-right-style: double" means we have a border that will have two solid lines on the right side.
Property: border-bottom-style
Usage: border-bottom-style: [solid | dotted | dashed | double | groove | ridge | none | inset | outset | hidden] | inherit
Description: Set the style of the border at the bottom to be one of the above values. If we set it to none, then we would have no bottom border at all.
Example: Specifying "border-bottom-style: solid" means we have a border that will have a solid line at the bottom side.
Example: Specifying "border-bottom-style: double" means we have a border that will have two solid lines at the bottom side.
Property: border-left-style
Usage: border-left-style: [solid | dotted | dashed | double | groove | ridge | none | inset | outset | hidden] | inherit
Description: Set the style of the border on the left to be one of the above values. If we set it to none, then we would have no left border at all.
Example: Specifying "border-left-style: solid" means we have a border that will have a solid line on the left side.
Example: Specifying "border-left-style: double" means we have a border that will have two solid lines on the left side.
Property: border-top-color
Usage: border-top-color: [<color> | transparent] | inherit
Description: Sets the color of the top border. To be more precise, it sets the color of the (top border) line.
We can specify the value of color in both text (as in "blue", "red", etc) or the RGB
notation as #0000FF, #FF0000, etc.
We can also specify the border-color to be "transparent" -- you can still provide
border-width to the top border. However, because the border-top-color is transparent, the width
cannot be seen.
More specific version of "border-color" property.
Example: Specifying "border-top-color: red" means we have a top border will have a line of red color.
Example: Specifying "border-top-color: #FF0000" would specify the top border color to #FF0000, which BTW, is also red.
Property: border-right-color
Usage: border-right-color: [<color> | transparent] | inherit
Description: Sets the color of the right border. To be more precise, it sets the color of the (right border) line.
We can specify the value of color in both text (as in "blue", "red", etc) or the RGB
notation as #0000FF, #FF0000, etc.
We can also specify the border-color to be "transparent" -- you can still provide
border-width to the right border. However, because the border-right-color is transparent, the width
cannot be seen.
More specific version of "border-color" property.
Example: Specifying "border-right-color: yellow" means we have a right border will have a line of yellow color.
Example: Specifying "border-right-color: #FFFF00" would specify the right border color to #FFFF00, which BTW, is also yellow.
Property: border-bottom-color
Usage: border-bottom-color: [<color> | transparent] | inherit
Description: Sets the color of the bottom border. To be more precise, it sets the color of the (bottom border) line.
We can specify the value of color in both text (as in "blue", "red", etc) or the RGB
notation as #0000FF, #FF0000, etc.
We can also specify the border-color to be "transparent" -- you can still provide
border-width to the bottom border. However, because the border-bottom-color is transparent, the width
cannot be seen.
More specific version of "border-color" property.
Example: Specifying "border-bottom-color: black" means we have a bottom border will have a line of black color.
Example: Specifying "border-bottom-color: #000000" would specify the bottom border color to #000000, which BTW, is also black.
Property: border-left-color
Usage: border-left-color: [<color> | transparent] | inherit
Description: Sets the color of the left border. To be more precise, it sets the color of the (left border) line.
We can specify the value of color in both text (as in "blue", "red", etc) or the RGB
notation as #0000FF, #FF0000, etc.
We can also specify the border-color to be "transparent" -- you can still provide
border-width to the left border. However, because the border-left-color is transparent, the width
cannot be seen.
More specific version of "border-color" property.
Example: Specifying "border-left-color: green" means we have a left border will have a line of green color.
Example: Specifying "border-left-color: #008000" would specify the left border color to #008000, which BTW, is also blue.
Property: border-top
Usage: border-top: [<values_width> | <values_style> | <values_color>] | inherit
Description: A shorthand to neatly tuck the following three properties (in order) for the top border: border-width,
border-style, and border-color. See the API border-width for the values of width, border-style
for values of style, and border-color for values of color. It is allowed to not provide
all three properties. It does not add border-radius.
Example: A value of "thick solid blue" would mean we would have a top border that has "thick" width,
is solid in style, and is blue in color.
Example: A value of "thick solid" would mean we have a top border that has "thick" width and
is solid in style. Since we do not specify the color, it would be the default value.
Property: border-right
Usage: border-right: [<values_width> | <values_style> | <values_color>] | inherit
Description: A shorthand to neatly tuck the following three properties (in order) for the right border: border-width,
border-style, and border-color. See the API border-width for the values of width, border-style
for values of style, and border-color for values of color. It is allowed to not provide
all three properties. It does not add border-radius.
Example: A value of "thick solid blue" would mean we would have a right border that has "thick" width,
is solid in style, and is blue in color.
Example: A value of "thick solid" would mean we have a right border that has "thick" width and
is solid in style. Since we do not specify the color, it would be the default value.
Property: border-bottom
Usage: border-bottom: [<values_width> | <values_style> | <values_color>] | inherit
Description: A shorthand to neatly tuck the following three properties (in order) for the bottom border: border-width,
border-style, and border-color. See the API border-width for the values of width, border-style
for values of style, and border-color for values of color. It is allowed to not provide
all three properties. It does not add border-radius.
Example: A value of "thick solid blue" would mean we would have a bottom border that has "thick" width,
is solid in style, and is blue in color.
Example: A value of "thick solid" would mean we have a bottom border that has "thick" width and
is solid in style. Since we do not specify the color, it would be the default value.
Property: border-left
Usage: border-left: [<values_width> | <values_style> | <values_color>] | inherit
Description: A shorthand to neatly tuck the following three properties (in order) for the left border: border-width,
border-style, and border-color. See the API border-width for the values of width, border-style
for values of style, and border-color for values of color. It is allowed to not provide
all three properties. It does not add border-radius.
Example: A value of "thick solid blue" would mean we would have a left border that has "thick" width,
is solid in style, and is blue in color.
Example: A value of "thick solid" would mean we have a left border that has "thick" width and
is solid in style. Since we do not specify the color, it would be the default value.
Property: border-top-left-radius
Usage: border-top-left-radius: [<length_value> | <percentage>] {1,2} | inherit
Description: Specifies the radius of the top-left corner of the border. To be more precise, the radius specifies the quarter of an ellipse that
replaces the square corners. For each corner, it can accept two values. The first value is the horizontal radius of the ellipse.
The second value is the vertical radius of the ellipse. If we specify a single value, then both the horizontal
and the vertical radii are same and in that case, the quarter ellipse becomes a quarter circle.
Does not accept any negative values.
Example: We can specify a single value. A value of "10px" would mean that both horizontal radius and vertical
radius would be 10px and this would be applied to the top-left corner.
Example: A value of "10px/20px" means that the horizontal radius would be 10px and the vertical radius would be 20px
and this would be applied to the top-left corner.
Property: border-top-right-radius
Usage: border-top-right-radius: [<length_value> | <percentage>] {1,2} | inherit
Description: Specifies the radius of the top-right corner of the border. To be more precise, the radius specifies the quarter of an ellipse that
replaces the square corners. For each corner, it can accept two values. The first value is the horizontal radius of the ellipse.
The second value is the vertical radius of the ellipse. If we specify a single value, then both the horizontal
and the vertical radii are same and in that case, the quarter ellipse becomes a quarter circle.
Does not accept any negative values.
Example: We can specify a single value. A value of "10px" would mean that both horizontal radius and vertical
radius would be 10px and this would be applied to the top-right corner.
Example: A value of "10px/20px" means that the horizontal radius would be 10px and the vertical radius would be 20px
and this would be applied to the top-right corner.
Property: border-bottom-right-radius
Usage: border-bottom-right-radius: [<length_value> | <percentage>] {1,2} | inherit
Description: Specifies the radius of the bottom-right corner of the border. To be more precise, the radius specifies the quarter of an ellipse that
replaces the square corners. For each corner, it can accept two values. The first value is the horizontal radius of the ellipse.
The second value is the vertical radius of the ellipse. If we specify a single value, then both the horizontal
and the vertical radii are same and in that case, the quarter ellipse becomes a quarter circle.
Does not accept any negative values.
Example: We can specify a single value. A value of "10px" would mean that both horizontal radius and vertical
radius would be 10px and this would be applied to the bottom-right corner.
Example: A value of "10px/20px" means that the horizontal radius would be 10px and the vertical radius would be 20px
and this would be applied to the bottom-right corner.
Property: border-bottom-left-radius
Usage: border-bottom-left-radius: [<length_value> | <percentage>] {1,2} | inherit
Description: Specifies the radius of the bottom-left corner of the border. To be more precise, the radius specifies the quarter of an ellipse that
replaces the square corners. For each corner, it can accept two values. The first value is the horizontal radius of the ellipse.
The second value is the vertical radius of the ellipse. If we specify a single value, then both the horizontal
and the vertical radii are same and in that case, the quarter ellipse becomes a quarter circle.
Example: We can specify a single value. A value of "10px" would mean that both horizontal radius and vertical
radius would be 10px and this would be applied to the bottom-left corner.
Example: A value of "10px/20px" means that the horizontal radius would be 10px and the vertical radius would be 20px
and this would be applied to the bottom-left corner.
Property: padding
Usage: padding: [<value_in_percentage> | <value_in_pixels>] {1,4} | inherit
Description: Specifies the padding-width for a box.
If we provide a single value, then that will be applied to all four
sides. If we provide two values, then the first would apply to top/bottom sides and the
second would apply to right/left sides. If we provide three values, then the first would apply
to top, second would apply to left/right sides, and the third would apply to bottom. If we
provide four values, then they would apply to top, right, bottom, and left, respectively.
Can also be specified in as percentage (e.g 1em). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
This value does not inherit automatically; if we want, then we should use the "inherit" value.
Specifying padding property is optional.
Example: A value of "padding: 16px;" means that we would add a 16px wide padding around the content.
Example: Specifying "padding: 1em 2em;" would add a 1em wide padding on top/bottom and 2em wide padding on left/right.
The em value is calculated based on the font-size of the parent.
Property: margin
Usage: margin: [<value_in_percentage> | <value_in_pixels>] {1,4} | inherit
Description: We can use this property to specify margin for a box. We can specify up to 4 values.
If we provide a single value, then that will be applied to all
sides. If we provide two values, then the first would apply to top/bottom sides and the
second would apply to right/left sides. If we provide three values, then the first would apply
to top, second would apply to left/right sides, and the third would apply to bottom. If we
provide four values, then they would apply to top, right, bottom, and left, respectively.
Can also be specified in as percentage (e.g 1em). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
This value does not inherit automatically; if we want, then we should use the "inherit" value.
Specifying margin property is optional.
Example: Specifying "margin: 40px;" would add a 40px wide margin around the border.
Example: Specifying "margin: 1em 2em;" would add a 1em wide margin on top/bottom and 2em wide margin on left/right.
The em value is calculated based on the font-size of the parent.
Property: padding-top
Usage: padding-top: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: Specifies the width of the top padding for a box.
Can also be specified in as percentage (e.g 1em). We should note that 1em is equivalent
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying padding-top is optional.
Example: A value of "padding-top: 16px;" means that we would add a 16px wide top-padding around the content.
Property: padding-right
Usage: padding-right: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: Specifies the padding-width of the right side for a box.
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying padding-right is optional.
Example: A value of "padding-right: 16px;" means that we would add a 16px wide right-padding around the content.
Property: padding-bottom
Usage: padding-bottom: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: Specifies the padding-width of the bottom side for a box.
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying padding-bottom is optional.
Example: A value of "padding-bottom: 16px;" means that we would add a 16px wide bottom-padding around the content.
Property: padding-left
Usage: padding-left: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: Specifies the padding-width of the left side for a box.
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying padding-left is optional.
Example: A value of "padding-left: 16px;" means that we would add a 16px wide left-padding around the content.
Property: margin-top
Usage: margin-top: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: We can use this property to specify top margin for a box.
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying margin-top is optional.
Example: Specifying "margin-top: 40px;" would add a 40px wide top margin around the border.
Property: margin-right
Usage: margin-right: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: We can use this property to specify top margin for a box.
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying margin-right is optional.
Example: Specifying "margin-right: 40px;" would add a 40px wide right margin around the border.
Property: margin-bottom
Usage: margin-bottom: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: We can use this property to specify top margin for a box.
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying margin-bottom is optional.
Example: Specifying "margin-bottom: 40px;" would add a 40px wide bottom margin around the border.
Property: margin-left
Usage: margin-left: [<value_in_percentage> | <value_in_pixels>] | inherit
Description: We can use this property to specify top margin for a box.
Can be specified as percentage (e.g 1em) or size (e.g. 10px). We should note that 1em is equivalent
to the font-size of the element in this question and is based on the font-size of the parent;
thus, if we add a margin around a div element, then 1em is the font-size of the div element.
A value of inherit means that it gets that value from its parent; this value is not inherited automatically.
Specifying margin-left is optional.
Example: Specifying "margin-left: 40px;" would add a 40px wide left margin around the border.
Divs and Spans
Keyword: div
Description: We can use <div> to organize content into logical divisions for adding design.
The <div> is a block-level construct, meaning that it would add a line break
before and after the content.
Let us say that
we have a group of paragraphs that form a single logical group -- then in that
case, we cannot apply the same design to all paragraphs for that group. For such
a case, we can put those paragraphs into a single <div> element and apply a common
design to all of those paragraphs.
Example: The following HTML code has a <div> element that encompasses two paragraph elements.
<html>
<div>
<p>
This is a simple HTML paragraph.
</p>
<p>
This is another simple HTML paragraph.
</p>
</div>
</html>
Keyword: span
Description: We can use <span> to organize content into logical divisions for adding design.
The <span> is an in-line construct and we can use it for adding design to elements within
a block. Since it is an inline element, it does not add any line-breaks.
We can have a list of words that do not naturally belong to an HTML element. In such
cases, we can use <span> to club these words (or in-line elements) together into a
logical group and apply a specific design to them.
Example: The following HTML code has a <span> element that encompasses two words and thus,
provides a logic grouping within a block (in this case, <p>) element.
<html>
<p>
This is a simple <span> HTML paragraph </span> and can have one or more spans in it.
</p>
</html>
Inheritance
Term: Inheritance
Description: Inheritance means that if we apply a design to a parent element, then CSS automatically applies
that design to all the child elements. Let us say, we have a paragraph element with some <em> elements
within the paragraph. If we apply a design rule to the paragraph, then that rule would also apply to
the <em> element.
Thus, if we want to keep the text on a page the same color for all elements, then we can set
the font color for the root element and all elements would inherit that text color. We can do
that using the "*" selector. What this means is that
if we have any child element on the page, then they inherit the parent-level properties.
Inheritance scales better because if there is a property that would affect a parent and all
of its child elements, then we can simply set the property for the parent and would not
have to worry about setting it explicitly for each and every child element. This can be
a big time-saver as well!
Term: Conflict
Description: Conflict means that we have multiple possible CSS design values for a given
element. As an example, it is possible that an element can have a property defined
by a parent as well as parents of the parent (aka ancestors).
As the size of the website increases and the number of CSS files catering to
different pages increase, inheritance-based conflicts do happen. There are
other types of conflicts as well and we will read about them later.
CSS is called Cascading Style Sheets since the design cascades from multiple
sheets (sources), which can sometimes be conflicting. It is CSS that takes
up the onerous task of resolving these conflicts! Hence the word "Cascading"
in CSS.
One of the rules for handling inheritance-based conflict is that the
nearest ancestor wins. Yet another rule is that when we have multiple sources for
the design, then the most specific one wins.
Keyword: inherit
Description: We can use the "inherit" keyword to inherit the value for an element from its nearest
neighbor. You might think that this should be obvious since an element would inherit
a value from its parent, anyways! Well, there are cases, where this may not be the case.
First, it is possible that a given element may be values specified by some CSS stylesheet
and for a particular case, you would want it to inherit the value rather than the one
that is specified by the stylesheet.
Second, there may be cases, where the value is inherited automatically. For such cases, if
you must apply the parent rule that does not automatically pass on to the
child elements, then you can use the "inherit" value to force inheritance.
This keyword is not supported in some older versions of Microsoft Internet Explorer (before
and including IE 7).
Example: In the following example, the <p> element would inherit both the border and the border-radius
properties from its parent, the <body> element. These values are not automatically inherited
by the child elements.
body {
border: thick solid blue;
border-radius: 10px;
}
p{
border: inherit;
border-radius: inherit;
}
Cascade
Term: Specificity
Description: Browsers use specificity to select a rule, if there are multiple rules for the same
element. Specificity is a value and the browser calculates this value to figure out
which CSS property would be the most specific and hence should be given more
preference. The order in which we do that is the following (in the order of higher
to lower preference): (1) Inline style (using the <style> tag in the page), (2) CSS
ID, (3) CSS class, and (4) HTML Tags. In other
words, if we have two rules, one is specified with a CSS ID and the other is specified
with the tag, then the one that is specified with the CSS ID wins.
To calculate specificity, we start with an empty tuple (0,0,0,0), where
the first value represents the case when the style is specified as inline,
the second value represents the case when the style as CSS id,
the third value represents the case when the style as CSS class, and
the last value represents the case when the style as HTML tag.
Next, we assign a value of 1 to the location or locations for the given rule.
Lastly, we multiply the value in the above tuple with its 10's place value
to get the decimal value. Thus, a value of (1,0,0,0) would be a 1000,
where as a value of (0,1,0,1) would be 101.
Example: In the following snippet, we present a few example for the color property. In this
case, the specificity value for the first rule would be (0,0,0,1) or 1.
For the second rule, we would have the value as (0,0,1,1) or 11.
For the third rule, we would have the value as (0,1,0,1) or 101. Since the specificity
value for the third rule is the highest among all three, the value of the color
would be green.
/* Specificity: (0,0,0,1) or 1*/
p {
color: blue;
}
/* Specificity: (0,0,1,1) or 11 */
p.class_name_foo {
color: red;
}
/* Specificity: (0,1,0,1) or 101 */
p#id_name_bar {
color: green;
}
Keyword: initial
Description: The "initial" keyword is an instruction to the browser to use the very first value
for the specified property. Basically, it is the value that the browser uses to
initialize the specified property in the beginning.
You may ask, when would we need this keyword? In certain cases, we can have the
value for a property
being specified by many CSS rules (coming from many CSS stylesheets, say). Using
the "initial" keyword means that we would like the browser to ignore all of
these rules and merely use the very first value that the property is initialized with.
Example: In the following code-snippet, we use the "initial" value for the color property.
With that, the browser would use the color value that the selector (in this case, the
<p> element) is initialized with. By the way, the initial value would be "white"
in most of the cases.
p {
color: initial;
}
Keyword: !important
Description: The "!important" keyword is an instruction to the browser to ignore all other rules and
merely follow the property value that is specified with the "!important" keyword. This can
be used, when due to inheritance (and possibly, conflicts), we would like to ignore
the earlier value for the property. However, this should be used only sparingly, if at all.
On a higher-level, the browser, in fact, picks up the declaration of the source based on
the following preference (listed from highest order to the lowest order): (1) user agent CSS,
(2) normal (with no !important keyword) declarations in user style CSS, (3) normal (with
no !important keyword) declarations in author style CSS, (4) Important ((with the !important
keyword) declarations in author CSS, and (5) Important (with the !important keyword) declarations
in user style sheets.
Example: In the following code-snippet, we are using the "!important" keyword after the value of the
color property. What we are saying is that no matter what the color should be (based on
inheritance from earlier CSS rules), we would like to use the color "blue". This way, we are essentially
ignoring any other value of the color that might be calculated because of previous inheritance.
p {
color: blue !important;
}
Styling Fonts
Property: font-family
Usage: font-family: [<font1>, <font2>, ..., <generic_font>] | inherit
Description: This property can take one or more font types, each separated using commas. The fonts are provided in the
decreasing order of priority. The objective is that the client-side browser would go through the list
and pick the first available one.
If we set the value as "inherit", then the font-family list is set to that of the parent.
Example: Specifying "font-family: Helvetica, sans-serif;" means that the browser would try to get Helvetica
font first. If that is available, then it will use that. Else, it will try "sans-serif", which would
usually be available. Worst case, if that is not available, then it will select the default font.
Property: font-size
Usage: font-size: [medium | small | smaller | x-small | xx-small | large | larger | x-large | xx-large | <length_in_percent> | <length_in_em>] | inherit
Description: Specifies the size of the font. Notable among the above values are xx-small, x-small for extra-extra-small and
extra-small respectively. These two also have their larger counter-parts: xx-large and x-large for extra-extra-large and
extra-large, respectively.
If we set the value as "inherit", then the font-size is set to that of the parent.
Example: Specifying "font-size: medium;" would set the font-size of the selector to be of medium size.
Example: Specifying "font-size: 20px;" would set the font-size of the selector to be 20px in size. Usually,
the default font-size is 16px.
Property: font-weight
Usage: font-weight: [bold | bolder | lighter | normal | <numeric value>] | inherit
Description: Sets the boldness of a font.
If we set the value as "inherit", then the font-weight is set to that of the parent.
The numeric value can be 100, 200, 300, and so on till 900. The value "normal" is
same as the numeric value 400 and the value "bold" is same as 700.
Example: Specifying "font-weight: bold;" would mean that we set the font weight as bold.
Property: font-style
Usage: font-style: [normal | italic | oblique] | inherit
Description: Sets the style of a font. Used for making a font italics. Setting it to normal would make
the font style non-italics. Italics style is usually cursive in nature where as oblique style
is usually with a right sloped versions of the regular font.
If we set the value as "inherit", then the font-style is set to that of the parent.
Example: Specifying "font-style: italic;" would make the text font italic.
Property: color
Usage: color: <color> | inherit
Description: Sets the color of the border. To be more precise, it sets the color of the (border) line.
We can specify the value of color in both text (as in "blue", "red", etc) or the RGB
notation as #0000FF, #FF0000, etc.
Yet another way to specify the RGB notation would be to specify the individual values
using the rgb() input rgb(0, 255, 255). If the value is set to inherit, then the font would
inherit the value from its parent.
Is applicable to other non-font types as well, like paragraph elements.
Example: Specifying "color: blue;" would set the selector color as blue.
Property: font
Usage: font: [<font_stretch> | <font_style> | <font_variant> | <font_weight> | <font_size> | <line_height> | <font_family> ] | inherit
Description: The font property allows us to specify font-related properties in one-shot.
It can specify various font-properties. The first one is the font-stretch property -- this property
indicates the font-stretch, whether it can be dense or stretched. Possible values include
normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded,
expanded, extra-expanded, and ultra-expanded.
The font-variant provides an ability to convert the font to lower-caps; possible values
include normal, small-caps, and inherit.
The line-height specifies the length that is used to calculate the line box height.
The remaining properties are the font-style, font-weight, font-size, and font-size; we have already
seen these properties above.
We do not have to necessarily specify all of the properties but specifying font-size and font-family
is a must. If we do not do that, then the browser would happily ignore the CSS declaration. Beyond that,
we can specify additional values, if needed.
Example: Specifying "font: condensed, italics, small-caps, bold, small, 1.4em, Helvetica, sans-serif;" means
that we would have a font that would be condensed in font-stretch, font-style as italics,
font-variant specifying that it would be a lower-caps, font-weight as bold, font-size as small,
line-height as 1.4em and font-family consisting of two fonts: Helvetica and sans-serif.
Example: Specifying "font: small, Helvetica, sans-serif;" means that we are specifying the minimum
two values. The font-size is small and the font-family consisting of two fonts: Helvetica and sans-serif.
Example: Specifying "font: small-caps small, Helvetica, sans-serif;" means that we are specifying
the minimum three values. The font-variant is small-caps, the font-size is small and the
font-family consisting of two fonts: Helvetica and sans-serif.
Styling Lists
Property: list-style-type
Usage: list-style-type: [square | circle | disc | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | lower-latin | lower-greek | armenian | georgian | none] | inherit;
Description: Provides the style for both ordered lists and unordered lists. Typically, unordered lists are displayed with round circles.
We can use list-style-type property to change that. For unordered lists, we can choose values from square, circle, disc, or none.
For ordered lists, we have far more options. We can choose from decimal (like 1, 2, 3,..), decimal-leading-zero (like 01, 02, 03, ..),
upper-roman (like I, II, III, ..), lower-roman (like i, ii, iii, ..) etc.
If we set the value as "inherit", then the list-style-type is set to that of the parent.
Example: Setting "list-style-type: square;" would set the style for lists to be square.
Example: Setting "list-style-type: none;" would mean there would be no style for lists. List text would be kept without any list legend.
Property: list-style-image
Usage: list-style-image: url(<url_of_the_image>);
Description: Allows to use an image instead of the bullet or other list-style-types. There is no requirement to add quotation
marks around the url. But, to be consistent, it is probably a good idea to add quotation marks.
If we set the value as "inherit", then the list-style-image is set to that of the parent.
Example: Setting "list-style-image: url("./image-file.png")" would set each list bullet as the image specified as "image-file.png".
Need to make sure that the image size should not be too big else it could occupy a space that would be bigger
than the content itself!
Property: list-style-position
Usage: list-style-position: inside | outside;
Description: Defines the location of the list-style with respect to the list element. A value of "inside" places the list-style
within the list element content but the value of "outside" places it outside of the list element block.
If we set the value as "inherit", then the list-style-position is set to that of the parent.
Example: Specifying "list-style-position: outside;" would keep the bullet on the outside of the content area.
This is also the default.
Example: Specifying "list-style-position: inside;" would keep the bullet on the inside of the content area.
The default is the "outside" value.
Property: list-style
Usage: list-style: [<list-style-type> || <list-style-position> || <list-style-image>] | inherit;
Description: We can use this property to set all of the above properties in one go. Thus, we can say:
{ list-style: square url('../img/square.png') outside};. If both list-style-type and list-style-image
are specified, then list-style-image is used. However, if the list-style-image is not available,
then the list-style-type is the fall-back option.
If we set the value as "inherit", then the list-style is set to that of the parent.
Example: Specifying "list-style: square outside url("./image-file.png")" would keep the bullet as square, would
place them on the outside, and keep the bullet as the image specified from the "image-file.png" file.
Styling Tables
Property: caption-side
Usage: caption-side: [top | bottom | left | right] | inherit;
Description: Specifies the location for adding the caption for the table. A value of top means that the
caption would be kept above the table. On the other hand, a value of "bottom" means that it
would be placed beneath the table. Similar argument holds for "left" and "right" values.
If we do not specify the value, then the default value is "top". If we set the value as
"inherit", then the caption-side value is taken from that of the parent.
Example: Specifying "caption-side: top;" would keep the caption on top of the table.
Property: border-collapse
Usage: border-collapse: [collapse | separate] | inherit
Description: This property allows us to specify if we would like to collapse the borders of individual cells of a table.
If the value is "separate", then the borders of the individual cells is kept separate and we can see
the space between them. However, if we set the value as "collapse", then the borders are show as
one single line.
If we set the value as "inherit", then the border-collapse value is taken from that of the parent.
Example: Setting "border-collapse: collapse;" would collapse the border between two adjoining cells.
Property: border-spacing
Usage: border-spacing: <value> {1,2} | inherit;
Description: The value specifies the distance between the two neighboring cell borders.
If one length is specified, then it specifies both the horizontal and vertical spacing. However, if we
want we can specify horizontal and vertical spacing separately -- the first is for the horizontal
spacing and the second is for the vertical spacing. The specified length cannot be negative.
If we set the value as "inherit", then the border-spacing value is taken from that of the parent.
Example: Setting "border-spacing: 5px;" would set the border spacing between two adjoining cells as 5px.
This property works opposite of border-collapse.