Introduction
This is the second part of my article. If you have not read the previous articles then please go through the first article:
CSS bottom Property example
The CSS bottom property is used to offset an element's bottom position. It moves the element upward and the position property of the element determines the behavior of the placement it gets.
- <style type="text/css">
- #div1
- {
- background: #B1D8E2;
- border: #3E95AE 2px dashed;
- width: 250px;
- height: 125px;
- margin-top: 40px;
- }
- #div2
- {
- bottom: 15px;
- left: 10px;
- position: relative;
- background: #FFE8B7;
- border: #E19D00 2px dashed;
- width: 140px;
- height: 20px;
- }
- </style>
- <div id="div1">
- <div id="div2">
- my div content ...</div>
- my div content ...
- </div>
CSS caption-side Property example
The CSS caption-side property is used to specify the position of a caption element in relation to its table element.
- <!DOCTYPE html>
- <style type="text/css">
- #myTable
- {
- color: red;
- }
- #myTable td
- {
- color: Green;
- }
- #myTable caption
- {
- caption-side: bottom;
- text-align: right;
- font-size: 12px;
- color: Red;
- }
- </style>
- <table id="myTable" border="1">
- <caption>
- My Favorite Flavors</caption>
- <tr>
- <td>
- Chocolate
- </td>
- <td>
- Strawberry
- </td>
- <td>
- Vanilla
- </td>
- </tr>
- </table>
CSS content Property example
The CSS content property is used to generate content to the document when using CSS selectors that are intended to generate or replace content in the document. ::before and ::after are two such selectors.
Specify a single value or a space-separated list of values to be generated.
- <!DOCTYPE html>
- <style type="text/css">
- .myClass::before
- {
- content: url(m5.jpg) " My ";
- }
- .myClass::after
- {
- content: "'s " attr(title) " section";
- }
- </style>
- <h3 class="myClass" title="cool">
- content</h3>
- <h3 class="myClass" title="sweet">
- content</h3>
- <h3 class="myClass" title="lucious">
- content</h3>
CSS absolute-position Property example
absolute
Allows the offset properties to apply to the element. The element will scroll with other content on the page. This setting takes the element out of its normal flow in the document.
- <style type="text/css">
- #container
- {
- border: #999 1px dashed;
- height: 100px;
- }
- #container div
- {
- position: absolute;
- background: #FFD5FF;
- border: #F0F 1px solid;
- padding: 10px;
- width: 20px;
- height: 20px;
- }
- #div1
- {
- top: 20px;
- left: 20px;
- }
- #div2
- {
- top: 40px;
- left: 40px;
- }
- #div3
- {
- top: 60px;
- left: 60px;
- }
- </style>
- <div id="container">
- <div id="div1">
- A</div>
- <div id="div2">
- B</div>
- <div id="div3">
- C</div>
- </div>
CSS box-shadow Property example
The CSS box-shadow property is used to render shadows for content containers (boxes). Each distinct shadow can get up to 4 parameters and an optional "inset" keyword.
You can create a comma-separated list of distinct shadows that will apply under the same box to create various looking effects, as well as setting shadows to "inset" for embossing and engraving effects.
specify shadow parameters
- The first value sets the horizontal offset of the shadow.
- The second value sets the vertical offset of the shadow.
- The third value sets the blur radius of the shadow.
- The fourth value sets the color of the shadow.
none
- <style type="text/css">
- #myDiv
- {
- background: #666;
- border: #999 1px solid;
- height: 90px;
- margin-bottom: 12px;
- padding: 10px;
- color: #FFF;
- box-shadow: inset 3px 3px 3px #000, 1px 1px 3px #FFF;
- }
- #container
- {
- background: #C0C0C0;
- padding: 20px;
- }
- </style>
- <div id="container">
- <div id="myDiv">
- Sonia ...Sonia ...Sonia ...Sonia ...Sonia ...Sonia ...Sonia ...Sonia ...Sonia ...Sonia
- ...Sonia ...Sonia ...Sonia ...Sonia ...</div>
- </div>
CSS ceneterd-image Property example
- <html>
- <head>
- <title>Css</title>
- <style type="text/css">
- body
- {
- background-image: url(4113.jpg);
- background-position: center top;
- background-repeat: no-repeat;
- background-attachment: scroll;
- background-color: #FFFFFF;
- }
- </style>
- </head>
- <body>
- <h1>
- sonia</h1>
- </body>
- </html>
CSS direction-property example
The CSS direction property is used to specify the writing direction in an element. It also affects the direction of a table column layout, as well as the horizontal content overflow direction of an element.
- <style type="text/css">
- #div1
- {
- direction: ltr;
- }
- #div2
- {
- direction: rtl;
- }
- #div1, #div2
- {
- width: 240px;
- background: #FEEAAB;
- padding: 12px;
- margin: 12px;
- }
- </style>
- <div id="div1">
- My DIV content.</div>
- <div id="div2">
- My DIV content.</div>
CSS empty-cells-hide Property example
The CSS empty-cells property is used to specify whether or not tables should render empty cells.
- <!DOCTYPE html>
- <style type="text/css">
- #myTable
- {
- empty-cells: hide;
- border: #F0F 3px double;
- background: #FFDDFC;
- }
- #myTable td
- {
- border: #000 1px solid;
- background: #CCC;
- }
- </style>
- <table id="myTable">
- <tr>
- <td>
- sonia
- </td>
- <td>
- sonia
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- sonia
- </td>
- <td>
- </td>
- <td>
- sonia
- </td>
- </tr>
- </table>
CSS empty-cells-show Property example
- <!DOCTYPE html>
- <style type="text/css">
- #myTable
- {
- empty-cells: show;
- border: #F0F 3px double;
- background: #FFDDFC;
- }
- #myTable td
- {
- border: #000 1px solid;
- background: #CCC;
- }
- </style>
- <table id="myTable">
- <tr>
- <td>
- sonia
- </td>
- <td>
- sonia
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- sonia
- </td>
- <td>
- </td>
- <td>
- sonia
- </td>
- </tr>
- </table>
CSS visibility Property example
The CSS visibility property is used to hide content while maintaining the real estate it would occupy in the document layout. It will make the element disappear but its real estate remains.
To let other page elements occupy the real estate where invisible content resides, use the display property with a value of "none" instead of the visibility property set to "hidden".
Possible Values
hidden- Hide the element.
- <style type="text/css">
- .divClass
- {
- background: #C6E2FF;
- border: #09F 1px solid;
- height: 30px;
- }
- #div2
- {
- visibility: hidden;
- }
- </style>
- <div id="div1" class="divClass">
- div content ...</div>
- <div id="div2" class="divClass">
- div content ...</div>
- <div id="div3" class="divClass">
- div content ...</div>
visible- Show the element.
- <style type="text/css">
- .divClass
- {
- background: #C6E2FF;
- border: #09F 1px solid;
- height: 30px;
- }
- #div2
- {
- visibility: visible;
- }
- </style>
- <div id="div1" class="divClass">
- div content ...</div>
- <div id="div2" class="divClass">
- div content ...</div>
- <div id="div3" class="divClass">
- div content ...</div>
CSS horizontal-image-repetititon Property example
- <html>
- <head>
- <title></title>
- <style>
- body
- {
- background-image: url(4113.jpg);
- background-repeat: repeat-x;
- background-attachment: scroll;
- }
- </style>
- </head>
- <body>
- sonia
- </body>
- </html>
CSS left Property example
The CSS left property is used to offset an element's left position. It moves the element to the right and the position property of the element determines the behavior of the placement it gets.
- <style type="text/css">
- .divClass
- {
- background: #AFF;
- border: #0BB 1px solid;
- width: 200px;
- position: relative;
- }
- #myDiv
- {
- left: 100px;
- }
- </style>
- <div class="divClass">
- my 1st div</div>
- <div class="divClass" id="myDiv">
- my 2nd div</div>
- <div class="divClass">
- my 3rd div</div>
Join the conversation! Your thoughts help the community grow.