CSS notes

CSS: Cascading Style Sheets
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
 CSS saves a lot of work. It can control the layout of multiple Web pages all at once
 External Style Sheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page. HTML was created
to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML specification, it started a
nightmare for web developers. Development of large web sites, where fonts and color
information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS was created to
specify the document's style, not its content.
Syntax:
A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag
like <h1> or <table> etc.
 Property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could becolor, border etc.
 Value - Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

EXAMPLE:
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a
later date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
Example
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */

CSS Selectors
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type,
attribute, and more.
 The element Selector
The element selector selects elements based on the element name.
Syntax:
p {
text-align: center;
color: red;
}
Example
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p> me to!</p>
</body>
</html>
 The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page, so the id selector is used if you want to select a single,
unique element.

To select an element with a specific id, write a hash character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
Syntax:
#para1 {
text-align: center;
color: red;
}
Example
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
 The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period character, followed by the name of the
class:
In the example below, all HTML elements with class="center" will be red and center-aligned:
Syntax
.center {
text-align: center;

color: red;
}
Example
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all <p> elements with class="center" will be center-aligned:
Syntax
p.center {
text-align: center;
color: red;
}
Example
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
 Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
You can group the selectors, to minimize the code.To group selectors, separate each selector
with a comma.
Syntax
h1, h2, p {
text-align: center;
color: red;
}
Example
<html>
<head>
<style>
h1, h2, p {
text-align: center;

color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS - Colors
CSS uses color values to specify a color. Typically, these are used to set a color either for the
foreground of an element (i.e., its text) or else for the background of the element. They can also
be used to affect the color of borders and other decorative effects.
You can specify your color values in various formats. 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;}
Example:
<html>
<head>

<body>
<h1>CSS background-color example!</h1>
<p>This paragraph has its own background color.</p>
</body>
</html>
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.
Example:
p{
background-image:url("location of image");
}
Example:
<html>
<head>
<style>
body {
background-image:url("image.jpg");
}
</style>
</head>
<body>
<h1>By default image repeated throughout the web page</h1>
</body>
</html>
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.
If the image is repeated only horizontally
(background-repeat: repeat-x;)
To repeat an image vertically set
(background-repeat: repeat-y;)
Background Image - Set position and no-repeat

Showing the backgound image only once is also specified by
(background-repeat: no-repeat;)
The position of the image is specified by
(background-position: right top;)
We can also specify the position of the image using pixels
(background-position:100px 200px;)
Background Image –No Scroll
To specify that the background image should be fixed (will not scroll with the rest of the
page;scrolling is default), use the background-attachment property:
(background-attachment: fixed;)
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.
Example
body {
background: #ffffffurl("img_tree.png") no-repeat right top;
}
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.
CSS TEXT FORMATTING
This chapter teaches you how to manipulate text using CSS properties. You can set
following text properties of an element −

 The color property is used to set the color of a text.
 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the
letters that make up a word.
 The word-spacing property is used to add or subtract space between the
words of a sentence.
 The text-indent property is used to indent the text of a paragraph.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and
strikethrough text.
 The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
 The white-space property is used to control the flow and formatting of text.
 The text-shadow property is used to set the text shadow around a text.
Set the Text Color
The following example demonstrates how to set the text color. Possible value could
be any color name in any valid format.
<html>
<head>
</head>
<body>
<h1 style="color:red;">
This text will be written in red.
</h1>
</body>
</html>
Set the Text Direction

The following example demonstrates how to set the direction of a text. Possible
values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style="direction:rtl;">
This text will be
renedered from right to left
</p>
</body>
</html>
Output:
Set the Space between Characters
The following example demonstrates how to set the space between characters.
Possible values are normal or a number specifying space..
<html>
<head>
</head>
<body>

<p style="letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>
Set the Space between Words
The following example demonstrates how to set the space between words. Possible
values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style="word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>
Set the Text Indent
The following example demonstrates how to indent the first line of a paragraph.
Possible values are % or a number specifying indent space.
<html>
<head>
</head>
<body>
<p style="text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at its
actual position this is done by CSS text-indent property.
</p>
</body>
</html>
Output:

Set the Text Alignment
The following example demonstrates how to align a text. Possible values are left,
right, center, justify.
<html>
<head>
</head>
<body>
<p style="text-align:right;">
This will be right aligned.
</p>
<p style="text-align:center;">
This will be center aligned.
</p>
<p style="text-align:left;">
This will be left aligned.
</p>
</body>
</html>
Decorating the Text
The following example demonstrates how to decorate a text. Possible values
are none, underline, overline, line-through, blink.
<html>
<head>
</head>

<body>
<p style="text-decoration:underline;">
This will be underlined
</p>
<p style="text-decoration:line-through;">
This will be striked through.
</p>
<p style="text-decoration:overline;">
This will have a over line.
</p>
<p style="text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>
Set the Text Cases
The following example demonstrates how to set the cases for a text. Possible
values are none, capitalize, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style="text-transform:capitalize;">
This will be capitalized
</p>
<p style="text-transform:uppercase;">
This will be in uppercase
</p>
<p style="text-transform:lowercase;">
This will be in lowercase
</p>
</body>

</html>
Set the White Space between Text
The following example demonstrates how white space inside an element is
handled. Possible values are normal, pre, nowrap.
<html>
<head>
</head>
<body>
<p style="white-space:pre;">
This text has a line break and the white-space pre setting tells the browser to
honor
it just like the HTML pre tag.</p>
</body>
</html>
Set the Text Shadow
The following example demonstrates how to set the shadow around a text. This
may not be supported by all the browsers.
<html>
<head>
</head>
<body>
<p style="text-shadow:4px 4px 8px blue;">
this text will have a blue shadow.
</p>
</body>
</html>
The four values or coordinates of the text shadow are

1st value = The X-coordinate
2nd value = The Y-coordinate
3rd value = The blur radius
4th value = The color of the shadow
CSS Fonts
 The font-family property is used to change the face of a font.
 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font properties.
SettheFontFamily
Following is the example, which demonstrates how to set the font family of an element.
Possible value could be any font family name.
<html>
<head>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system.
</p>
</body>
</html>
Set the Font Style
Following is the example, which demonstrates how to set the font style of an element. Possible
values are normal, italic and oblique.
<html>
<head>
</head>
<body>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>

</body>
</html>
Set the Font Variant
The following example demonstrates how to set the font variant of an element. Possible values
are normal and small-caps.
<html>
<head>
</head>
<body>
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The font-weight
property provides the functionality to specify how bold a font is. Possible values could
be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is bolder.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
</body>
</html>
Set the Font Size
The following example demonstrates how to set the font size of an element. The font-size
property is used to control the size of fonts. Possible values could be xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html>
<head>
</head>
<body>
<p style="font-size:20px;">This font size is 20 pixels</p>
<p style="font-size:small;">This font size is small</p>
<p style="font-size:large;">This font size is large</p>

</body>
</html>
Set the Font Size Adjust
The following example demonstrates how to set the font size adjust of an element. This
property enables you to adjust the x-height to make fonts more legible. Possible value could be
any number.
<html>
<head>
</head>
<body>
<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>
Set the Font Stretch
The following example demonstrates how to set the font stretch of an element. This property
relies on the user's computer to have an expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed,
condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html>
<head>
</head>
<body>
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer doesn't have a
condensed or expanded version of the font being used.
</p>
</body>
</html>
Shorthand Property
You can use the font property to set all the font properties at once. For example −
<html>
<head>
</head>
<body>
<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>

</body>
</html>
CSS Lists
In HTML, there are two main types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
The list-style-type Property
The list-style-type property allows you to control the shape or style of bullet
point (also known as a marker) in the case of unordered lists and the style
of numbering characters in ordered lists.
Here are the values which can be used for an unordered list −
Value Description
none NA
disc (default) A filled-in circle
circle An empty circle
square A filled-in square
Here are the values, which can be used for an ordered list −
Value Description Example
decimal Number 1,2,3,4,5

decimal-leading-
zero
0 before the number 01, 02, 03,
04, 05
lower-alpha Lowercase alphanumeric characters a, b, c, d, e
upper-alpha Uppercase alphanumeric characters A, B, C, D, E
lower-roman Lowercase Roman numerals i, ii, iii, iv, v
upper-roman Uppercase Roman numerals I, II, III, IV,
V
lower-greek The marker is lower-greek alpha, beta,
gamma
lower-latin The marker is lower-latin a, b, c, d, e
upper-latin The marker is upper-latin A, B, C, D, E
hebrew The marker is traditional Hebrew numbering
armenian The marker is traditional Armenian numbering
georgian The marker is traditional Georgian numbering
cjk-ideographic The marker is plain ideographic numbers
Hiragana The marker is hiragana a, i, u, e, o,
ka, ki
Katakana The marker is katakana A, I, U, E,
O, KA, KI
hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni,
ho, he, to
katakana-iroha The marker is katakana-iroha I, RO, HA,
NI, HO, HE,
TO
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>

</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Physics</li>
</ol>
</body>
</html>
The list-style-position Property
The list-style-position property indicates whether the marker should appear
inside or outside of the box containing the bullet points. It can have one the
two values −
Value Description
none NA
inside If the text goes onto a second line, the text will wrap underneath the
marker. It will also appear indented to where the text would have started
if the list had a value of outside.
outside If the text goes onto a second line, the text will be aligned with the start
of the first line (to the right of the bullet).
Here is an example −
<html>
<head>
</head>
<body>
<ul style="list-style-type:square; list-style-position:inside;">
<li>Maths</li>
<li>Physics</li>
</ul>
</body>
</html>

The list-style-image Property
The list-style-image allows you to specify an image so that you can use
your own bullet style. The syntax is similar to the background-image
property with the letters url starting the value of the property followed by
the URL in brackets. If it does not find the given image then default bullets
are used.
<html>
<head>
</head>
<body>
<ul>
<li style="list-style-image: url(/https/www.slideshare.net/images/bullet.gif);">Maths</li>
<li>Physics</li>
</ul>
</body>
</html>
The list-style Property
The list-style allows you to specify all the list properties into a single
expression. These properties can appear in any order.
<html>
<head>
</head>
<body>
<ul style="list-style: inside square;">
<li>Maths</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha;">

<li>Maths</li>
<li>Physics</li>
</ol>
</body>
</html>
The marker-offset Property
The marker-offset property allows you to specify the distance between the
marker and the text relating to that marker. Its value should be a length as
shown in the following example −
Unfortunately, this property is not supported in IE 6 or Netscape 7.
<html>
<head>
</head>
<body>
<ul style="list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Physics</li>
</ol>
</body>
</html>

CSS Effects
I. Opacity / Transparency Effect
The CSS property for transparency is opacity.
<html>
<head>
<style>
img {opacity: 0.4;}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
</body>
</html>
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent.
 Image Transparency - Hover Effect
Mouse over the images:
<html>
<head>
<style>
img {opacity: 0.4;}
img:hover {opacity: 1.0;}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis2.jpg" width="150" height="113" alt="klematis">
</body>
</html>

II. Transform Property
The transform property applies a 2D or 3D transformation to an element. This property allows you to
rotate, scale, move, skew, etc., elements.
<html>
<head>
<style>
img {transform: rotate(7deg);}
</style>
</head>
<body>
</body>
</html>
Property Values
Value Description
none Defines that there should be no transformation
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y) Defines a 2D translation
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a translation, using only the value for the X-axis
translateY(y) Defines a translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale(x,y) Defines a 2D scale transformation
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis
scaleY(y) Defines a scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis

rotateZ(angle) Defines a 3D rotation along the Z-axis
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis
perspective(n) Defines a perspective view for a 3D transformed element
initial Sets this property to its default value.
inherit Inherits this property from its parent element
 Transform-origin
The transform-origin property allows you to change the position of transformed elements.
2D transformations can change the x- and y-axis of an element. 3D transformations can also
change the z-axis of an element.
 Transform-style
The transform-style property specifies how nested elements are rendered in 3D space.
Note: This property must be used together with the transform property.
Syntax
transform-style: flat|preserve-3d|initial|inherit;
Property Values
Property Value Description
flat Specifies that child elements will NOT preserve its 3D position. This is default
preserve-3d Specifies that child elements will preserve its 3D position
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
III. Transition Property

CSS transitions allows you to change property values smoothly (from one value
to another), over a given duration.
To create a transition effect, you must specify two things:
 the CSS property you want to add an effect to
 the duration of the effect
Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.
The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a
duration of 2 seconds:
The transition effect will start when the specified CSS property (width) changes
value.
Now, let us specify a new value for the width property when a user mouses over
the <img> element:
<html>
<head>
<style>
img{transition: width 2s;}
img:hover {width: 300px;}
</style>
</head>
<body>
</body>
</html>
Notice that when the cursor mouses out of the element, it will gradually change
back to its original style.
 Change Several Property Values:
The following example adds a transition effect for both the width and height
property, with a duration of 2 seconds for the width and 4 seconds for the
height:
Example

img {
transition: width 2s, height 4s;
}
 Delay the Transition Effect:
The transition-delay property specifies a delay (in seconds) for the transition
effect.
The following example has a 1 second delay before starting:
Example
img {transition-delay: 1s;
}
IV. Animations
CSS animations allows animation of most HTML elements without using JavaScript or Flash!.
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
 The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from
the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the <div> element. The animation will lasts
for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to
"yellow":
Example:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;

background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div> Hello </div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>
Note: If the animation-duration property is not specified, the animation will have no effect, because
the default value is 0.
In the example above we have specified when the style will change by using the keywords "from"
and "to" (which represents 0% (start) and 100% (complete)).
It is also possible to use percent. By using percent, you can add as many style changes as you like.
The following example will change the background-color of the <div> element when the animation
is 25% complete, 50% complete, and again when the animation is 100% complete:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
}
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
The following example will change both the background-color and the position of the <div>
element when the animation is 25% complete, 50% complete, and again when the animation is
100% complete:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
}
/* Standard syntax */
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>

 Delay an Animation
The animation-delay property specifies a delay for the start of an animation.
The following example has a 2 seconds delayed before starting the animation:
animation-delay: 2s;
 Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the number of times an animation should
run.
The following example will run the animation 3 times before it stops:
animation-iteration-count: 3;
to run always use animation-iteration-count: infinite;
 Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property is used to let an animation run in reverse direction or
alternate cycles.
The following example will run the animation in reverse direction:
animation-direction: reverse; or alternate;
 Shorthand animation property:
Example
div {
animation: example 5s linear 2s infinite alternate;
}

CSS - Tables
We can set following properties of a table −
 The border-collapse specifies whether the browser should control the
appearance of the adjacent borders that touch each other or whether each cell
should maintain its style.
 The border-spacing specifies the width that should appear between table cells.
 The caption-side captions are presented in the <caption> element. By default,
these are rendered above the table in the document. You use the caption-
side property to control the placement of the table caption.
 The empty-cells specifies whether the border should be shown if a cell is
empty.
 The table-layout allows browsers to speed up layout of a table by using the
first width properties it comes across for the rest of a column rather than having
to load the whole table before rendering it.

CSS notes

Recommended

More Related Content

What's hot (20)

Similar to CSS notes (20)

Recently uploaded (20)

CSS notes