CSS and CSS3 Notes
CSS and CSS3 Notes
CSS and CSS3 Notes
CSS Introduction:
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
CSS Demo
An HTML document can be displayed with different styles: See how it works
In HTML 4.0, all formatting could be removed from the HTML document, and stored
in a separate CSS file.
A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
p {color:red;text-align:center;}
To make the CSS code more readable, you can put one declaration on each line, like
this:
Example:
p{
color: red;
text-align: center;
}
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 element(s).
CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types,
attributes, values of attributes and much more.
Example
p{
text-align: center;
color: red;
}
The id Selector:
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to
find a single, unique element.
To find 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":
Example
#para1 {
text-align: center;
color: red;
}
Example
p.center {
text-align: center;
color: red;
}
Grouping/Multiple Selectors
In style sheets there are often elements with the same style:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
To minimize the code, you can group selectors. To group selectors, separate each selector
with a comma. In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
text-align: center;
color: red;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing just one file.
Each page must include a link to the style sheet with the <link> tag. The <link> tag goes
inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain
any html tags. The style sheet file must be saved with .css extension. An example of a style
sheet file is shown below:
"myStyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Inline Styles
An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The style attribute can
contain any CSS property. The example shows how to change the color and the left margin
of a h1 element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet.
For example, assume that an external style sheet has the following properties for the h1
selector:
h1 {
color: navy;
margin-left: 20px;
}
then, assume that an internal style sheet also has the following property for the h1 selector:
h1 {
color: orange;
}
If the page with the internal style sheet also links to the external style sheet the properties
for the h1 element will be:
color: orange;
margin-left: 20px;
The left margin is inherited from the external style sheet and the color is replaced by the
internal style sheet. Multiple Styles Will Cascade into One Styles can be specified:
inside an HTML element
inside the head section of an HTML page
in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order :
What style will be used when there is more than one style specified for an
HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style
sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
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.
The background image for a page can be set like this:
Example
body {
background-image: url("paper.gif");
}
If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
All CSS Background Properties
Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
CSS Text:
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
The default color for a page is defined in the body selector.
Example
body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
color: rgb(255,0,0);
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width,
and the left and right margins are straight (like in magazines and newspapers).
Example
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design
purposes:
Example
a{
text-decoration: none;
}
It can also be used to decorate text:
Example
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a
text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word.
Example
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
Example
p{
text-indent: 50px;
}
All CSS Text Properties
Property Description
color Sets the color of text
unicode-bidi Used together with the direction property to set or return whether the text should
overridden to support multiple languages in the same document
CSS Font
CSS font properties define the font family, boldness, size, and the style of a text.
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar
font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks,
like: "Times New Roman". More than one font family is specified in a comma-separated list:
Example
p{
font-family: "Times New Roman, Times, serif”;
}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use
font size adjustments to make paragraphs look like headings, or headings look like
paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.The font-size value can be an absolute, or relative size.
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
CSS Lists
The CSS list properties allow you to:
o Set different list item markers for ordered lists
o Set different list item markers for unordered lists
o Set an image as the list item marker
List
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
The example above does not display equally in all browsers. IE and Opera will display the
image-marker a little bit higher than Firefox, Chrome, and Safari.
If you want the image-marker to be placed equally in all browsers, a crossbrowser solution
is explained below.
All CSS List Properties
Property Description
list-style Sets all the properties for a list in one declaration
list-style- Specifies if the list-item markers should appear inside or outside the
position content flow
CSS Tables
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:
Example
table, th, td {
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both
the table and the th/td elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single
border or separated:
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and content in a table, use the padding
property on td and th elements:
Example
td {
padding: 15px;
}
Table Color
The example below specifies the color of the borders, and the text and
background color of th elements:
Example
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used
when talking about design and layout. The CSS box model is essentially a box that wraps
around HTML elements, and it consists of: margins, borders, padding, and the actual
content. The box model allows us to add a border around elements, and to define space
between elements. The image below illustrates the box model:
Border Style
The border-style property specifies what kind of border to display.
Note: None of the border properties will have ANY effect unless the border-style property is set!
border-style values:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-
width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
Border Width
The border-width property is used to set the width of the border.The width is set in
pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style"
property to set the borders first.
Example
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
Border Color
The border-color property is used to set the color of the border. The color can be set by:
name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".
If the border color is not set it is inherited from the color property of the element.
Note: The "border-color" property does not work if it is used alone. Use the "border-style"
property to set the borders first.
Example
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
The border-style property is used in the example above. However, it also works with
border-width and border-color.
Static Positioning
HTML elements are positioned static by default. A static positioned element is
always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:
Example
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
Fixed positioned elements are removed from the normal flow. The document and
other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.
Relative Positioning
A relative positioned element is positioned relative to its normal position.
Example
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
The content of relatively positioned elements can be moved and overlap other
elements, but the reserved space for the element is still preserved in the normal flow.
Example
h2.pos_top {
position: relative;
top: -50px;
}
Absolute Positioning
An absolute position element is positioned relative to the first parent element that
has a position other than static. If no such element is found, the containing block is <html>:
Example
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be
placed in front of, or behind, the others).An element can have a positive or negative stack
order:
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
CSS Floating:
Navigation Bars:
Having easy-to-use navigation is important for any web site.With CSS you can transform
boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base. In our examples we will build the
navigation bar from a standard HTML list. A navigation bar is basically a list of links, so
using the <ul> and <li> elements makes perfect sense:
Example
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
Now let's remove the bullets and the margins and padding from the list:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Example explained:
list-style-type: none - Removes the bullets. A navigation bar does not need list
markers
Setting margins and padding to 0 to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal
navigation bars.
Example explained:
display: block - Displaying the links as block elements makes the whole link area
clickable (not just the text), and it allows us to specify the width
width: 60px - Block elements take up the full width available by default. We want to
specify a 60 px width
Note: Always specify the width for <a> elements in a vertical navigation bar. If you omit the width, IE
produce unexpected results.
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list
items. Both methods work fine, but if you want the links to be the same size, you have to
use the floating method.
Example explained:
display: inline; - By default, <li> elements are block elements. Here, we remove the
line breaks before and after each list item, to display them on one line
The first CSS block is similar to the code in Example 1. In addition, we have added
what should happen when a user hover over one of the images. In this case we want the
image to NOT be transparent when the user hover over it.
The CSS for this is: opacity=1.
IE8 and earlier: filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will be transparent again.
Example 3 - Text in Transparent Box
This is some text that is placed in the transparent box. This is some text that is
placed in the transparent box. This is some text that is placed in the transparent
box. This is some text that is placed in the transparent box. This is some text
that is placed in the transparent box.
The source code looks like this:
Example
<html>
<head>
<style>
div.background {
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
First, we create a div element (class="background") with a fixed height and width, a
background image, and a border. Then we create a smaller div (class="transbox") inside
the first div element. The "transbox" div have a fixed width, a background color, and a
border - and it is transparent. Inside the transparent div, we add some text inside a p
element.
Unit-7 CSS3
Introduction:
CSS3 Modules
CSS3 has been split into "modules". It contains the "old CSS specification" (which has
been split into smaller pieces). In addition, new modules are added.
Some of the most important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
CSS3 Recommendation
The CSS3 specification is still under development by W3C.
However, many of the new CSS3 properties have been implemented in modern browsers.
CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border -
without using a design program, like Photoshop.
In this chapter you will learn about the following border properties:
border-radius
box-shadow
border-image
Browser Support
The numbers in the table specify the first browser version that fully supports the
property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked
with a prefix.
Property Chrome IE Firefox Safari Opera
Example
Add rounded corners to a div element:
div {
border: 2px solid;
border-radius: 25px;
}
Example
Use an image to create a border around a div element:
div {
-webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 30 round;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the
property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked
with a prefix.
Property Chrome IE Firefox Safari Opera
Example
Position the background image within the content-box:
div {
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
CSS3 Multiple Background Images
CSS3 allows you to use several background images for an element.
Example
Set two background images for the body element:
body {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
CSS3 Gradients
CSS3 gradients let you display smooth transitions between two or more specified
colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can
reduce download time and bandwidth usage. In addition, elements with gradients look
better when zoomed, because the gradient is generated by the browser.
CSS3 defines two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Browser Support
The numbers in the table specify the first browser version that fully supports the
property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked
with a prefix.
Property Chrome IE Firefox Safari Opera
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Using Angles
If you want more control over the direction of the gradient, you can define an angle, instead
of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
Syntax
background: linear-gradient(angle, color-stop1, color-stop2);
The angle is specified as an angle between a horizontal line and the gradient line,
going counter-clockwise. In other words, 0deg creates a bottom to top gradient, while
90deg generates a left to right gradient.
The following example shows how to use angles on linear gradients:
Example
A linear gradient with a specified angle:
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
The following example shows how to create a linear gradient with the color of the rainbow
and some text:
Example
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Using Transparency
CSS3 gradients also support transparency, which can be used to create fading
effects. To add transparency, we use the rgba() function to define the color stops. The last
parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency
of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
The following example shows a linear gradient that starts from the left. It starts fully
transparent, transitioning to full color red:
Example
A linear gradient from left to right, with transparency:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-
6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
Repeating a linear-gradient
The repeating-linear-gradient() function is used to repeat linear gradients:
Example
A repeating linear gradient:
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}
Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
Example
A repeating radial gradient:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox 3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Standard syntax */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property Chrome IE Firefox Safari Opera
text-align-last Describes how the last line of a block or a line right before a forced line break i
aligned when text-align is "justify"
text-emphasis Applies emphasis marks, and the foreground color of the emphasis marks, to t
element's text
text-overflow Specifies what should happen when text overflows the containing element
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
CSS3 Web Fonts
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property Chrome IE Firefox Safari Opera
Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in
To use the font for an HTML element, refer to the name of the font (myFirstFont) through
the font-family property:
Example
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
The file "sansation_bold.woff" is another font file, that contains the bold characters for the
Sansation font. Browsers will use this whenever a piece of text with the font-family
"myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.
font-stretch normal Optional. Defines how the font should be stretched. Default is "n
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
font-style normal Optional. Defines how the font should be styled. Default is "norm
italic
oblique
font-weight normal Optional. Defines the boldness of the font. Default is "normal"
bold
100
200
300
400
500
600
700
800
900
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font sup
Default is "U+0-10FFFF"
CSS3 2D Transforms
CSS3 Transforms
With CSS3 transform, we can move, scale, turn, spin,and stretch elements. A
transformation is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.
CSS3 2D Transforms
In this chapter you will learn about the 2d transform methods:
translate()
rotate()
scale()
skew()
matrix()
You will learn about 3D transforms in the next chapter.
Example
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
The translate() Method
With the translate() method, the element moves from its current position,
depending on the parameters given for the left (X-axis) and the top (Y-axis) position:
Example
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
transform: translate(50px,100px);
}
The value translate(50px,100px) moves the element 50 pixels from the left, and 100
pixels from the top.
With the rotate() method, the element rotates clockwise at a given degree. Negative values
are allowed and rotates the element counter-clockwise.
Example
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
The value rotate(30deg) rotates the element clockwise 30 degrees.
With the scale() method, the element increases or decreases the size, depending on the
parameters given for the width (X-axis) and the height (Y-axis):
Example
div {
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4);
}
The value scale(2,4) transforms the width to be twice its original size, and the height 4
times its original size.
With the skew() method, the element turns in a given angle, depending on the
parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:
Example
div {
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
transform: skew(30deg,20deg);
}
The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20
degrees around the Y-axis.
The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows
you to: rotate, scale, move (translate), and skew elements.
Example
How to rotate a div element 30 degrees, using the matrix method:
div {
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
CSS3 Transform Properties
The following table lists all the transform properties:
Property Description
transform Applies a 2D or 3D transformation to an element
translate(x,y) Defines a 2D translation, moving the element along the X- and the
Y-axis
CSS3 3D Transforms
CSS3 allows you to format your elements using 3D transforms.
In this chapter you will learn about some of the 3D transform methods:
rotateX()
rotateY()
With the rotateX() method, the element rotates around its X-axis at a given degree.
Example
div {
-webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
transform: rotateX(120deg);
}
With the rotateY() method, the element rotates around its Y-axis at a given degree.
Example
div {
-webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
transform: rotateY(130deg);
}
Property Description
transform Applies a 2D or 3D transformation to an element
backface- Defines whether or not an element should be visible when not facing
visibility the screen
3D Transform Methods
Function Description
matrix3d Defines a 3D transformation, using a 4x4 matrix of 16 values
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without
using Flash animations or JavaScripts.
Mouse over the element below:
CSS3
Transition
Browser Support
The numbers in the table specify the first browser version that fully supports the
property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked
with a prefix.
Property Chrome IE Firefox Safari Opera
Note: When the cursor mouse out of the element, it gradually changes back to its original
style.
Multiple Changes
To add transition effects for more than one CSS property, separate the properties with a
comma:
Example
Add transition effects on width, height, and transformation:
div {
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
The same transition effects as the example above. However, here we are using the
shorthand transition property:
Example
div {
-webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s linear 2s;
}
transition-property Specifies the name of the CSS property the transition effect is 3
for
CSS3 Animations
With CSS3, we can create animations which can replace Flash animations, animated
images, and JavaScripts in existing web pages.
CSS3
Animation
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a
prefix.
Property Chrome IE Firefox Safari Opera
/* Standard syntax */
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Example
Change the background color and the position when the animation is 25%, 50%, 75%, and
again when the animation is 100% complete:
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
The same animation effect as the example above (except the animation-play-state
property). However, here we are using the shorthand animation property:
Example
div {
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
}
animation-fill- Specifies what styles will apply for the element when the 3
mode animation is not playing (when it is finished, or when it has a
"delay")
Browser Support
The numbers in the table specify the first browser version that fully supports the
property.Numbers followed by -webkit- or -moz- specify the first version that worked with
a prefix.
Property Chrome IE Firefox Safari Opera
column-count 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
Example
Some different cursors:
span.crosshair {
cursor: crosshair;
}
span.help {
cursor: help;
}
span.wait {
cursor: wait;
}
CSS Syntax: cursor: value;
Styling for print:
This is useful when you wish to display the contents of web page in different ways
while displaying the web page on television, projector, tab, or at the time of printing. Might
be text on web page is to big but while taking prints on paper it is not required. Such type
of formatting can be done by using media types.
CSS Media Types:
By using the @media rule, a website can have a different layout for screen, print,
mobile phone, tablet, etc.
Media Types
Some CSS properties are only designed for a certain media. For example the "voice-
family" property is designed for aural user agents. Some other properties can be used for
different media types. For example, the "font-size" property can be used for both screen
and print media, but perhaps with different values. A document usually needs a larger font-
size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while
serif fonts are easier to read on paper.
The @media Rule
The @media rule allows different style rules for different media in the same style sheet.
The style in the example below tells the browser to display a 14 pixels Verdana font on the
screen. But if the page is printed, it will be in a 20 pixels font, and in a red color:
Example
@media screen {
p{
font-family: verdana,sans-serif; font-size: 30px;
}
}
@media print {
p{
font-size: 20px; color: red;
}
}
Other Media Types
Media Type Description
All Used for all media type devices
Tty Used for media using a fixed-pitch character grid, like teletypes and terminals