Course
Quick Guide
CSS Tutorial
This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
Quick Guide
What is CSS?
- Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
- Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
- Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.
These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.
NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations about how the Internet works and how it should evolve.
CSS Versions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.
CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.
CSS - Syntax
selector { property: value }
Example − You can define a table border as follows −
table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property.
You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.
The Type Selectors
This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings −
h1 { color: #36CFFF; }The Universal Selectors
Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type −
* { color: #000000; }This rule renders the content of every element in our document in black.
The Descendant Selectors
Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.
ul em { color: #000000; }The Class Selectors
You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.
.black { color: #000000; }This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example −
h1.black { color: #000000; }This rule renders the content in black for only <h1> elements with class attribute set to black.
You can apply more than one class selectors to given element. Consider the following example −
<p class = "center bold"> This para will be styled by the classes center and bold.</p>The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.
#black { color: #000000; }This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example −
h1#black { color: #000000; }This rule renders the content in black for only <h1> elements with id attribute set to black.
The true power of id selectors is when they are used as the foundation for descendant selectors, For example −
#black h2 { color: #000000; }In this example all level 2 headings will be displayed in black color when those headings will lie with in tags having id attribute set to black.
The Child Selectors
You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example −
body > p { color: #000000; }This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.
The Attribute Selectors
You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text −
input[type = "text"] { color: #000000; }The advantage to this method is that the <input type = "submit" /> element is unaffected, and the color applied only to the desired text fields.
There are following rules applied to attribute selector.
- p[lang] − Selects all paragraph elements with a lang attribute.
- p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".
- p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".
- p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".
Multiple Style Rules
You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example −
h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase;}Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines.
For a while, don't bother about the properties mentioned in the above block. These properties will be explained in the coming chapters and you can find complete detail about properties in CSS References
Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example −
h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase;}This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.
You can combine the various id selectors together as shown below −
#content, #footer, #supplement { position: absolute; left: 510px; width: 200px;}CSS - Inclusion
<head> <style type = "text/css" media = "all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
It will produce the following result −
Attributes
Attributes associated with <style> elements are −
Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax −
<element style = "...style rules....">
Attributes
Example
Following is the example of inline CSS based on the above syntax −
<html> <head> </head>
<body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body></html>It will produce the following result −
External CSS - The <link> Element
The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file −
<head> <link type = "text/css" href = "..." media = "..." /></head>
Attributes
Attributes associated with <style> elements are −
Example
Consider a simple style sheet file with a name mystyle.css having the following rules −
h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase;}Now you can include this file mystyle.css in any HTML document as follows −
<head> <link type = "text/css" href = "mystyle.css" media = " all" /></head>Imported CSS - @import Rule
@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.
<head> @import "URL";</head>Here URL is the URL of the style sheet file having style rules. You can use another syntax as well −
<head> @import url("URL");</head>Example
Following is the example showing you how to import a style sheet file into HTML document −
<head> @import "mystyle.css";</head>
CSS Rules Overriding
We have discussed four ways to include style sheet rules in a an HTML document. Here is the rule to override any Style Sheet Rule.
- Any inline style sheet takes highest priority. So, it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.
- Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.
- Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.
Handling old Browsers
There are still many old browsers who do not support CSS. So, we should take care while writing our Embedded CSS in an HTML document. The following snippet shows how you can use comment tags to hide CSS from older browsers −
<style type = "text/css"> <!-- body, td { color: blue; } --></style>CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simple put your comments inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.
Example
<!DOCTYPE html><html> <head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ </style> </head>
<body> <p>Hello World!</p> </body></html>It will produce the following result −
CSS - Measurement Units
CSS - Colors
These formats are explained in more detail in the following sections −
CSS Colors - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to use Hexadecimal notation.
CSS Colors - Short Hex Codes
This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to use Hexadecimal notation.
CSS Colors - RGB Values
This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
NOTE − All the browsers does not support rgb() property of color so it is recommended not to use it.
Following is the example to show few colors using RGB values.
Building Color Codes
You can build millions of color codes using our Color Code Builder. Check our HTML Color Code Builder. To use this tool, you would need a Java Enabled Browser.
Browser Safe Colors
Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette −
CSS - Backgrounds
Set the Background Color
Following is the example which demonstrates how to set the background color for an element.
<html> <head> </head>
<body> <p style = "background-color:yellow;"> This text has a yellow background color. </p> </body></html> This will produce following result −
Set the Background Image
We can set the background image by calling local stored images as shown below −
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-color: #cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body><html>It will produce the following result −
Repeat the Background Image
The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.
By default background-repeat property will have repeat value.
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat; } </style> </head>
<body> <p>Tutorials point</p> </body></html>It will produce the following result −
The following example which demonstrates how to repeat the background image vertically.
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat-y; } </style> </head>
<body> <p>Tutorials point</p> </body></html>It will produce the following result −
The following example demonstrates how to repeat the background image horizontally.
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat-x; } </style> </head> <body> <p>Tutorials point</p> </body></html>It will produce the following result −
Set the Background Image Position
The following example demonstrates how to set the background image position 100 pixels away from the left side.
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-position:100px; } </style> </head>
<body> <p>Tutorials point</p> </body></html>It will produce the following result −
The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-position:100px 200px; } </style> </head>
<body> <p>Tutorials point</p> </body></html>It will produce the following result −
Set the Background Attachment
Background attachment determines whether a background image is fixed or scrolls with the rest of the page.
The following example demonstrates how to set the fixed background image.
<!DOCTYPE html><html> <head> <style> body { background-image: url('/css/images/css.jpg'); background-repeat: no-repeat; background-attachment: fixed; } </style> </head>
<body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> </body></html>It will produce the following result −
The following example demonstrates how to set the scrolling background image.
<!DOCTYPE html><html> <head> <style> body { background-image: url('/css/images/css.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-attachment:scroll; } </style> </head>
<body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> </body></html>It will produce the following result −
Shorthand Property
You can use the background property to set all the background properties at once. For example −
<p style = "background:url(/images/pattern1.gif) repeat fixed;"> This parapgraph has fixed repeated background image.</p>
CSS - Fonts
Set the Font Family
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>This will produce following result −
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> This will produce following result −
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> This will produce following result −
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:500;"> This font is 500 weight. </p> </body></html> This will produce following result −
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> This will produce following result −
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> This will produce following result −
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 <br>condensed or expanded version of the font being used. </p> </body></html> This will produce following result −
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>This will produce following result −
CSS - Text
- 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> <p style = "color:red;"> This text will be written in red. </p> </body></html>It will produce the following result −
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 rendered from right to left </p> </body></html>It will produce the following result −
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>It will produce the following result −
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> This will produce following result −
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>It will produce the following result −
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> This will produce following result −
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> This will produce following result −
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> This will produce following result −
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> This will produce following result −
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;"> If your browser supports the CSS text-shadow property, this text will have a blue shadow. </p> </body></html> It will produce the following result −
CSS - Using Images
The Image Border Property
The border property of an image is used to set the width of an image border. This property can have a value in length or in %.
A width of zero pixels means no border.
Here is the example −
<html> <head> </head>
<body> <img style = "border:0px;" src = "/css/images/logo.png" /> <br /> <img style = "border:3px dashed red;" src = "/css/images/logo.png" /> </body></html> It will produce the following result −
The Image Height Property
The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html> <head> </head>
<body> <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" /> <br /> <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" /> </body></html> It will produce the following result −
The Image Width Property
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html> <head> </head>
<body> <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" /> <br /> <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" /> </body></html> It will produce the following result −
The -moz-opacity Property
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.
In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.
Here is an example −
<html> <head> </head>
<body> <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" /> </body></html> It will produce the following result −
CSS - Links
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css"> a:link {color: #000000} a:visited {color: #006600} a:hover {color: #FFCC00} a:active {color: #FF00CC}</style>
Now, we will see how to use these properties to give different effects to hyperlinks.
Set the Color of Links
The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
<html> <head> <style type = "text/css"> a:link {color:#000000} </style> </head>
<body> <a href = "">Link</a> </body></html> It will produce the following black link −
Set the Color of Visited Links
The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.
<html> <head> <style type = "text/css"> a:visited {color: #006600} </style> </head>
<body> <a href = ""> link</a> </body></html> It will produce the following link. Once you will click this link, it will change its color to green.
Change the Color of Links when Mouse is Over
The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html> <head> <style type = "text/css"> a:hover {color: #FFCC00} </style> </head>
<body> <a href = "">Link</a> </body></html> It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.
Change the Color of Active Links
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
<html> <head> <style type = "text/css"> a:active {color: #FF00CC} </style> </head>
<body> <a href = "">Link</a> </body></html> It will produce the following link. It will change its color to pink when the user clicks it.
CSS - Tables
Now, we will see how to use these properties with examples.
The border-collapse Property
This property can have two values collapse and separate. The following example uses both the values −
<html> <head> <style type = "text/css"> table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; } td.b { border-style:solid; border-width:3px; border-color:#333333; padding:10px; } </style> </head>
<body> <table class = "one"> <caption>Collapse Border Example</caption> <tr><td class = "a"> Cell A Collapse Example</td></tr> <tr><td class = "b"> Cell B Collapse Example</td></tr> </table> <br /> <table class = "two"> <caption>Separate Border Example</caption> <tr><td class = "a"> Cell A Separate Example</td></tr> <tr><td class = "b"> Cell B Separate Example</td></tr> </table> </body></html>It will produce the following result −
The border-spacing Property
The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px; 15px;}</style>
Now let's modify the previous example and see the effect −
<html> <head> <style type = "text/css"> table.one { border-collapse:separate; width:400px; border-spacing:10px; } table.two { border-collapse:separate; width:400px; border-spacing:10px 50px; } </style> </head>
<body> <table class = "one" border = "1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Collapse Example</td></tr> <tr><td> Cell B Collapse Example</td></tr> </table> <br /> <table class = "two" border = "1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Separate Example</td></tr> <tr><td> Cell B Separate Example</td></tr> </table> </body></html> It will produce the following result −
The caption-side Property
The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table. The table that follows lists the possible values.
This property can have one of the four values top, bottom, left or right. The following example uses each value.
NOTE − These properties may not work with your IE Browser.
<html> <head> <style type = "text/css"> caption.top {caption-side:top} caption.bottom {caption-side:bottom} caption.left {caption-side:left} caption.right {caption-side:right} </style> </head>
<body> <table style = "width:400px; border:1px solid black;"> <caption class = "top"> This caption will appear at the top </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "bottom"> This caption will appear at the bottom </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "left"> This caption will appear at the left </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "right"> This caption will appear at the right </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> </body></html>It will produce the following result −
The empty-cells Property
The empty-cells property indicates whether a cell without any content should have a border displayed.
This property can have one of the three values - show, hide or inherit.
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<html> <head> <style type = "text/css"> table.empty { width:350px; border-collapse:separate; empty-cells:hide; } td.empty { padding:5px; border-style:solid; border-width:1px; border-color:#999999; } </style> </head>
<body> <table class = "empty"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td class = "empty">value</td> <td class = "empty">value</td> </tr> <tr> <th>Row Title</th> <td class = "empty">value</td> <td class = "empty"></td> </tr> </table> </body></html> It will produce the following result −
The table-layout Property
The table-layout property is supposed to help you control how a browser should render or lay out a table.
This property can have one of the three values: fixed, auto or inherit.
The following example shows the difference between these properties.
NOTE − This property is not supported by many browsers so do not rely on this property.
<html> <head> <style type = "text/css"> table.auto { table-layout: auto } table.fixed { table-layout: fixed } </style> </head> <body> <table class = "auto" border = "1" width = "100%"> <tr> <td width = "20%">1000000000000000000000000000</td> <td width = "40%">10000000</td> <td width = "40%">100</td> </tr> </table> <br /> <table class = "fixed" border = "1" width = "100%"> <tr> <td width = "20%">1000000000000000000000000000</td> <td width = "40%">10000000</td> <td width = "40%">100</td> </tr> </table> </body></html> It will produce the following result −
CSS - Borders
The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties −
- border-bottom-color changes the color of bottom border.
- border-top-color changes the color of top border.
- border-left-color changes the color of left border.
- border-right-color changes the color of right border.
The following example shows the effect of all these properties −
<html> <head> <style type = "text/css"> p.example1 { border:1px solid; border-bottom-color:#009900; /* Green */ border-top-color:#FF0000; /* Red */ border-left-color:#330000; /* Black */ border-right-color:#0000CC; /* Blue */ } p.example2 { border:1px solid; border-color:#009900; /* Green */ } </style> </head>
<body> <p class = "example1"> This example is showing all borders in different colors. </p> <p class = "example2"> This example is showing all borders in green color only. </p> </body></html> It will produce the following result −
The border-style Property
The border-style property allows you to select one of the following styles of border −
- none − No border. (Equivalent of border-width:0;)
- solid − Border is a single solid line.
- dotted − Border is a series of dots.
- dashed − Border is a series of short lines.
- double − Border is two solid lines.
- groove − Border looks as though it is carved into the page.
- ridge − Border looks the opposite of groove.
- inset