CSS3 is the latest version of CSS2. In CSS3, they introduced modules that have a lot of benefits; it allows the specification to be finalized and accepted faster. Also, this is applicable to many search engines like Mozilla, Chrome, Safari, Opera, etc.
Some modules in CSS3 –
- Box model
- Image values and replaced content
- Text effects
- Selectors
- Backgrounds and borders
- Animations
- User interface (UI)
- Multiple column layouts
- 2D/3D transformations
Features of CSS3 –
Selectors
Selectors are used to styling the elements. These are based on the characteristics of the elements like id, class, tag name, etc.
Ex –
<style>
.hilite {
background: lightgreen;
color: white;
padding: 30px;
}
</style>
<div class=”hilite”>
We can style an element with a class selector.
</div>
CSS table-Layout
This property is used for table algorithms to render a table in its best way.
Ex –
<style>
.table-auto {
border: 2px solid lightblue;
border-collapse: collapse;
table-layout: auto;
}
.table-auto th,
.table-auto td {
border: 3px solid lightred;
padding: 6px;
}
</style>
<table class=”table-auto” style=”width: 250px”>
<tr>
<th>Full Name</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tr>
<td>Alfred Futter</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Michelle Ranger</td>
<td>Data Analyst</td>
<td>Female</td>
</tr>
<tr>
<td>John Heights</td>
<td>Graphic Artist</td>
<td>Male</td>
</tr>
</table>
<br />
<table class=”table-auto” style=”width:100%;”>
<tr>
<th>Full Name</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tr>
<td>Alfred Futter</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Michelle Ranger</td>
<td>Data Analyst</td>
<td>Female</td>
</tr>
<tr>
<td>John Heights</td>
<td>Graphic Artist</td>
<td>Male</td>
</tr>
</table>
Commands and Content
: focus => focus to an element
: active => display and select of an active element
: enabled => display an enabled element
: checked => display a checked element
: lang => put different language for different elements
: selection => for highlighted elements
: root => it is the root element in the document
:first-child => the first sibling element
:last-child => the last sibling element
:only-child => the only child element
:first-of-type => first sibling element with some specific type
:last-of-type => last sibling element with some specific type
:only-of-type => only sibling element with some specific type
: empty => the element without children
::first-letter => style to the first letter of a text
::first-line => style to the first line of a text
:: after => insert anything after a text element
:: before => insert anything before a text element
