CSS paddings are used to create space around the element, inside any defined
border. We can set different paddings for
individual sides(top, right, bottom, left). It is important to add border
properties to implement padding properties.
Height and width of Image: It is used to set the height and width of an image.
It’s value can be in px, cm, percent, … etc.
Box-Model has multiple properties in CSS. Some of them are given below:
Border Area: It is the area between the box’s padding and margin. Its dimensions
are given by the width and height of border.
Margin Area: This area consists of space between border and margin. The
dimensions of Margin area are the margin-box width and the margin-box height. It
is useful to separate the element from its neighbors.
Padding Area: It includes the element’s padding. This area is actually the space
around the content area and within the border box. Its dimensions are given by
the width of the padding-box and the height of the padding-box Content Area:
This area consists of content like text, image, or other media content. It is
bounded by the content edge and its dimensions are given by content box width
and height.
CSS outline property allows us to draw a line around the element, outside the
border.
CSS text formatting properties is used to format text and style text.
CSS text formatting include following properties:
1.Text-color
2.Text-alignment
3.Text-decoration
4.Text-transformation
5.Text-indentation
6.Letter spacing
7.Line height
8.Text-direction
9.Text-shadow
10.Word spacing
The CSS font property is used to set the fonts content of HTML element. There are
many font property in CSS which are discussed below:
Choosing the right font has a huge impact on how the readers experience a
website.
The right font can create a strong identity for your brand.
Using a font that is easy to read are important. The font adds
value to your text. It is also important to choose the correct color and
text size
for the font.
All the different font names belong to one of the generic font
families.
The simplest way to add an icon to your HTML page, is with an icon library,
such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like
<i> or
<span>).
All the icons in the icon libraries below, are scalable vectors that can
be customized with CSS (size, color, shadow, etc.)
With CSS, links can be styled in different ways.
Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
In addition, links can be styled
differently depending on what state they are in.
When setting the style for several link states, there are some order rules:
This example demonstrates a more advanced example where we combine several
CSS properties to display links as boxes/buttons:
Note: Some of the values are for unordered lists, and some for ordered lists.
"list-style-position: outside;" means that the bullet points will be outside
the list item. The start of each line of a list item will be aligned
vertically.
This is default:
"list-style-position: inside;" means that the bullet points will be inside
the list item. As it is part of the list item, it will be part of the text
and
push the text at the start:
If one of the property values above are missing, the default value for the
missing property will be inserted, if any.
We can also style lists with colors, to make them look a little more
interesting.
Anything added to the <ol> or <ul> tag, affects the entire list,
while
properties added to the <li> tag will affect the individual list
items:
The example below specifies a black border for <table>, <th>, and
<td> elements:
The table above might seem small in some cases. If you need a table that
should span the entire screen (full-width), add width:
100% to the
<table> element:
If you only want a border around the table, only
specify the border property for
<table>:
elements to be left-aligned, with the text-align: left property:
th {
text-align: left;
}
Vertical Alignment
The vertical-align property sets the
vertical alignment (like top, bottom, or middle)
of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for
both <th>
and <td> elements).
The following example sets the vertical text alignment to bottom for
<td> elements:
td {
height: 50px;
vertical-align: bottom;
}
Css Table Style
To control the space between the border and the content in a table, use the
padding property on
<td> and <th> elements:
The padding Property
This property adds space between the border and the content in a table.
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
Add the border-bottom property to <th>
and <td> for horizontal dividers:
Example
th, td {
border-bottom:
1px solid #ddd;
}
Hoverable Table
Use the :hover selector on <tr> to
highlight table rows on mouse
over:
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
Example
tr:hover {background-color:
#f5f5f5;}
Striped Tables
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
For zebra-striped tables, use the nth-child()
selector and add a background-color to all even
(or odd) table
rows:
Example
tr:nth-child(even) {background-color:
#f2f2f2;}
Table Color
The example below specifies the background color
and text color of
<th> elements:
| Codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
| codolearn |
codolearn |
codolearn |
Example
th {
background-color: aqua / #00ffff;
color:
white;
}
CSS CSS Responsive Table
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content:
| First Name |
Last Name |
Points |
Points |
Points |
Points |
Points |
Points |
Points |
Points |
Points |
Points |
Points |
Points |
| Jill |
Smith |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
| Eve |
Jackson |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
| Adam |
Johnson |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
Add a container element (like <div>) with overflow-x:auto around the <table>
element to make it responsive:
Example
<div style"overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Note: In OS X Lion (on Mac), scrollbars are hidden by
default and only shown when being used (even though "overflow:scroll" is
set).
More Examples
Make a fancy table
This example demonstrates how to create a fancy table.
Set the position of the table caption
This example demonstrates how to position the table caption.
CSS Table Properties
| Property |
Description |
| border |
Sets all the border properties in one declaration |
| border-collapse |
Specifies whether or not table borders should be collapsed |
| border-spacing |
Specifies the distance between the borders of adjacent cells
|
| caption-side |
Specifies the placement of a table caption |
| empty-cells |
Specifies whether or not to display borders and background on
empty cells in a table |
| table-layout |
Sets the layout algorithm to be used for a table |
CSS Layout - The display Property
The display property is the
most important CSS property for controlling layout.
The display Property
The display property specifies if/how an
element is displayed.
Every HTML element has a default display value depending on what type
of element it is. The default display value for most elements is block or
inline.
This panel contains a <div> element, which is hidden by default
(display: none).
It is styled with CSS, and we use JavaScript to show it (change it to
(display: block).
Block-level Elements
A block-level element always starts on a new line and takes up the full width
available
(stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Elements
An inline element does not start on a new line and only takes up as much
width as necessary.
This is an inline
<span>
element
inside a paragraph.
Examples of inline elements:
Display: none;
display: none; is commonly used with
JavaScript to hide
and show elements without deleting and recreating them. Take a look at our
last
example on this page if you want to know how this can be achieved.
The <script> element uses display: none;
as default.
Override The Default Display Value
As mentioned, every element has a default display value. However, you can
override this.
Changing an inline element to a block element, or vice versa, can be useful
for
making the page look a specific way, and still follow the web standards.
A common example is making inline <li>
elements for horizontal menus:
Example
li {
display:
inline;
}
Note: Setting the display property of an element only
changes how the element is displayed,
NOT what kind of element it is. So, an inline element with display: block; is not allowed
to have other block elements inside it.
The following example displays <span> elements as block elements:
Example
span {
display:
block;
}
The following example displays <a> elements as block elements:
Example
a {
display: block;
}
Hide an Element - display:none or visibility:hidden?
display:none
visibility:hidden
Reset
Hiding an element can be done by setting the display
property to
none.
The element will be hidden, and the page will be displayed as if the element
is not
there:
visibility:hidden; also hides an element.
However, the element will still take up the same space
as before. The element will be hidden, but still affect the layout:
More Examples
Differences between display: none; and visibility: hidden;
This example demonstrates display: none; versus visibility: hidden;
Using CSS together with JavaScript to show content
This example demonstrates how to use CSS and JavaScript to show an element
on
click.
CSS Display/Visibility Properties
| Property |
Description |
| display |
Specifies how an element should be displayed |
| visibility |
Specifies whether or not an element should be visible |
CSS width and max-width
Using width, max-width and margin: auto;
As mentioned in the previous chapter; a block-level element always takes up
the full width available
(stretches out to the left and right as far as it can).
Setting the width of a block-level element
will prevent it from stretching
out to the edges of its container. Then, you can set the
margins to auto, to horizontally center the element within its container.
The
element will take up the specified width, and the remaining space will be
split
equally between the two margins:
This <div> element has a width of 500px, and margin set to auto.
Note: The problem with the <div>
above occurs when the browser
window is
smaller than the width of
the element. The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation,
will improve the
browser's handling of small windows. This is important when making a site
usable
on small devices:
This <div> element has a max-width of 500px, and margin set to auto.
Tip: Resize the browser window to less than 500px wide, to
see the difference between
the two divs!
Here is an example of the two divs above:
Example
div.ex1 {
width:
500px;
margin:
auto;
border:
3px solid #73AD21;
}
div.ex2 {
max-width:
500px;
margin: auto;
border: 3px solid
#73AD21;
}
CSS Layout - The position Property
The position property
specifies the type of
positioning method used for an element (static, relative, fixed, absolute or
sticky).
The position Property
The position property specifies the type of
positioning method used for an element.
There are five different position values:
staticrelativefixedabsolutesticky
Elements are then positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position
property is set first. They also work differently depending on the position
value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and
right properties.
An element with position: static; is not
positioned in any special way; it is
always positioned according to the normal flow of the page:
This <div> element has position: static;
Here is the CSS that is used:
Example
div.static {
position:
static;
border:
3px solid #73AD21;
}
position: relative;
An element with position: relative; is
positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause
it to be adjusted away from its normal position. Other content will not be
adjusted to fit into any gap left by the
element.
This <div> element has position: relative;
Here is the CSS that is used:
Example
div.relative {
position:
relative;
left: 30px;
border: 3px solid
#73AD21;
}
position: fixed;
An element with position: fixed; is
positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have
been located.
Notice the fixed element in the lower-right corner of the page. Here is the
CSS that is used:
Example
div.fixed {
position:
fixed;
bottom: 0;
right:
0;
width:
300px;
border: 3px solid
#73AD21;
}
position: absolute;
An element with position: absolute; is
positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors,
it uses the document body, and moves along with page scrolling.
Note: A "positioned" element is one whose position is
anything except
static.
Here is a simple example:
This <div> element has position: relative;
This <div> element has position: absolute;
Here is the CSS that is used:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
All CSS Positioning Properties
| Property |
Description |
| bottom |
Sets the bottom margin edge for a positioned box |
| clip |
Clips an absolutely positioned element |
| left |
Sets the left margin edge for a positioned box |
| position |
Specifies the type of positioning for an element |
| right |
Sets the right margin edge for a positioned box |
| top |
Sets the top margin edge for a positioned box |
| z-index |
Sets the stack order of an element |
CSS Layout - Overflow
The CSS overflow property controls what happens to content that is too big to fit into
an
area.
This text is really long and the height of its container is only 100 pixels. Therefore, a
scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent
claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
The overflow property specifies whether to
clip
the content or
to add scrollbars when the content of an element is too big to fit in the
specified
area.
The overflow property has the following
values:
visible - Default. The overflow is not
clipped.
The content renders outside the element's boxhidden - The overflow is clipped, and
the rest of the content will be invisiblescroll - The overflow is clipped, and a
scrollbar is added to see the rest of the contentauto - Similar to scroll,
but it adds scrollbars only when necessary
Note: The overflow
property only works for block elements with a specified height.
Note: In OS X Lion (on Mac), scrollbars are hidden by
default and only shown when being used (even though "overflow:scroll" is
set).
overflow: visible
By default, the overflow is visible, meaning
that it is not clipped and it
renders outside the element's box:
You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what happens
if content overflows an element's box.
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
Try It Yourself »
overflow: hidden
With the hidden value, the overflow is
clipped, and the rest of the content is hidden:
You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what happens
if content overflows an element's box.
div {
overflow: hidden;
}
Try It Yourself »
overflow: scroll
Setting the value to scroll, the overflow is
clipped and a scrollbar is added to scroll inside the box. Note that this
will add a scrollbar both horizontally and vertically (even if you do not
need it):
You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what happens
if content overflows an element's box.
div {
overflow: scroll;
}
Try It Yourself »
overflow: auto
The auto value is similar to scroll,
but it adds scrollbars only when necessary:
You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens if
content overflows an element's box.
div {
overflow: auto;
}
Try It Yourself »
overflow-x and overflow-y
The overflow-x and overflow-y properties specifies
whether to change the overflow of content just horizontally or vertically
(or
both):
overflow-x specifies what to do with the
left/right edges of the
content.
overflow-y specifies what to do with the
top/bottom edges of the
content.
You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what happens
if content overflows an element's box.
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
Try It Yourself »
All CSS Overflow Properties
| Property |
Description |
| overflow |
Specifies what happens if content overflows an element's box
|
| overflow-x |
Specifies what to do with the left/right edges of the content if
it overflows the element's content area |
| overflow-y |
Specifies what to do with the top/bottom edges of the content if
it overflows the element's content area |
CSS Layout - float and clear
The CSS float property
specifies
how an element should float.
The CSS clear property
specifies what elements can float beside the cleared element and on which
side.
left
right
The float Property
The float property is used for
positioning and formatting content e.g. let an image float left to the text
in a
container.
The float property can have one of the
following values:
- left - The element floats to the left of its container
- right - The element floats to the right of its container
- none - The element does not float (will be displayed just where it
occurs in the text). This is default
- inherit - The element inherits the float value of its parent
In its simplest use, the float property can
be used to wrap text around images.
Example - float: right;
The following example specifies that an image should float to the
right in a text:
 Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed
ornare eu, lobortis in odio. Praesent convallis urna a lacus
interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
img {
float: right;
}
Try It Yourself »
Example - float: left;
The following example specifies that an image should float to the
left in a text:
 Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed
ornare eu, lobortis in odio. Praesent convallis urna a lacus
interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
img {
float: left;
}
Try It Yourself »
Example - No float
In the following example the image will be displayed just where it occurs in
the text (float: none;):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce
luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
img {
float: none;
}
Try It Yourself »
CSS Layout - clear and clearfix
The clear Property
The clear property specifies what
elements can float beside the cleared element and on which side.
The clear property can have one of the
following values:
- none - Allows floating elements on both sides. This is default
- left - No floating elements allowed on the left side
- right- No floating elements allowed on the right side
- both - No floating elements allowed on either the left or the right
side
- inherit - The element inherits the clear value of its parent
The most common way to use the clear
property is after you have used a float
property on an element.
When clearing floats, you should match the clear to the float: If an element
is floated to the left, then you should clear to the left. Your floated
element
will continue to float, but the cleared element will appear below it on the
web
page.
The following example clears the float to the left. Means that no floating
elements are allowed on the left side (of the div):
Example
div {
clear:
left;
}
The clearfix Hack
If an element is taller than the element containing it, and it is floated, it
will "overflow" outside of its container:
Then we can add overflow: auto; to the
containing element to fix
this problem:
Example
.clearfix {
overflow:
auto;
}
The overflow: auto clearfix works well as
long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the
following code is used for most webpages:
Example
.clearfix::after {
content:
"";
clear:
both;
display:
table;
}
You will learn more about the ::after
pseudo-element in a later chapter.
CSS Layout - display: inline-block
The display: inline-block Value
Compared to display: inline, the major
difference is that display: inline-block
allows
to set a width and height on the element.
Also, with
display: inline-block, the top and bottom margins/paddings are
respected,
but with display: inline they are not.
Compared to display: block, the major
difference is that display: inline-block
does
not add a line-break after the element, so the element can sit next to other
elements.
The following example shows the different behavior of display: inline, display: inline-block
and display: block:
Example
span.a {
display:
inline;
width: 100px;
height:
100px;
padding: 5px;
border: 1px solid
blue;
background-color:
yellow;
}
span.b
{
display:
inline-block;
width:
100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display:
block;
width:
100px;
height:
100px;
padding: 5px;
border: 1px solid
blue;
background-color: yellow;
}
Using inline-block to Create Navigation Links
One common use for display: inline-block
is to display list items horizontally instead of vertically. The following
example creates horizontal navigation links:
Example
.nav {
background-color:
yellow;
list-style-type:
none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav
li {
display:
inline-block;
font-size: 20px;
padding:
20px;
}
CSS Layout - Horizontal & Vertical Align
Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the
edges of its container.
The element will then take up the specified width, and the remaining space
will be split equally between the two margins:
This div element is centered.
Example
.center
{
margin: auto;
width: 50%;
border: 3px solid
green;
padding: 10px;
}
Note: Center aligning has no effect if the width
property is not set
(or set to 100%).
Center Align Text
To just center the text inside an element, use text-align: center;
Example
.center {
text-align:
center;
border: 3px solid
green;
}
Tip: For more examples on how to align text, see the CSS Text chapter.
Center an Image
To center an image, set left and right margin to auto and
make it into a block element:
Example
img
{
display:
block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Left and Right Align - Using position
One method for aligning elements is to use position:
absolute;:
In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since.
Example
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding:
10px;
}
Note: Absolute positioned elements are removed from the
normal flow, and can overlap elements.
Left and Right Align - Using float
Another method for aligning elements is to use the float
property:
Example
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding:
10px;
}
Note: If an element is taller than the element
containing it, and it is floated, it
will overflow outside of its container. You can use the
"clearfix" hack to fix this (see example below).
The clearfix Hack
Then we can add overflow: auto; to the
containing element to fix
this problem:
Example
.clearfix {
overflow:
auto;
}
Center Vertically - Using padding
There are many ways to center an element vertically in CSS. A simple solution
is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding:
70px 0;
border:
3px solid
green;
}
To center both vertically and horizontally, use padding and
text-align:
center:
I am vertically and horizontally centered.
Example
.center {
padding:
70px 0;
border:
3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height
property with a value that is equal
to the height property:
I
am vertically and horizontally centered.
Example
.center {
line-height:
200px;
height:
200px;
border: 3px solid green;
text-align:
center;
}
.center p {
line-height:
1.5;
display:
inline-block;
vertical-align:
middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I
am vertically and horizontally centered.
Example
.center {
height:
200px;
position:
relative;
border: 3px solid
green;
}
.center p {
margin:
0;
position: absolute;
top:
50%;
left: 50%;
transform: translate(-50%,
-50%);
}
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not
supported in IE10 and earlier versions:
I am vertically and horizontally centered.
Example
.center {
display:
flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
CSS Combinators
CSS Combinators
A combinator is something that explains the relationship between the
selectors.
A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
There are four different combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a
specified
element.
The following example selects all <p> elements inside <div>
elements:
Example
div p {
background-color:
yellow;
}
Child Selector (>)
The child selector selects all elements that are the children of a
specified element.
The following example selects all <p> elements that are
children of a <div>
element:
Example
div > p {
background-color:
yellow;
}
Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly
after another specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
The following example selects the first <p> element that are placed
immediately after <div> elements:
Example
div + p {
background-color:
yellow;
}
General Sibling Selector (~)
The general sibling selector selects all elements that are siblings of a
specified element.
The following example selects all <p> elements that are siblings of
<div> elements:
Example
div ~ p {
background-color:
yellow;
}
All CSS Combinator Selectors
| Selector |
Example |
Example description |
| element element |
div p |
Selects all <p> elements inside <div> elements
|
| element>element |
div > p |
Selects all <p> elements where the parent is a
<div> element |
| element+element |
div + p |
Selects the first <p> element that are placed
immediately after <div> elements |
| element1~element2 |
p ~ ul |
Selects every <ul> element that are preceded by a
<p> element |
CSS Pseudo-classes
What are Pseudo-classes?
A pseudo-class is used to define a special state
of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property:
value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
a:link {
color:
#FF0000;
}
a:visited {
color:
#00FF00;
}
a:hover {
color:
#FF00FF;
}
a:active {
color: #0000FF;
}
Note: a:hover MUST come after
a:link and
a:visited in the CSS definition in
order to be effective! a:active MUST
come after
a:hover in the CSS definition in order
to be effective!
Pseudo-class names are not case-sensitive.
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
When you hover over the link in the example, it will change color:
Example
a.highlight:hover {
color:
#ff0000;
}
Hover on <div>
An example of using the :hover pseudo-class
on a <div> element:
Example
div:hover {
background-color:
blue;
}
Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a
tooltip):
Hover over me to show the
<p> element.
Tada! Here I am!
Example
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display:
block;
}
CSS - The :first-child Pseudo-class
The :first-child pseudo-class matches a
specified element that is the first child of another element.
Match the first <p> element
In the following example, the selector matches any <p> element that is
the first child of any element:
Example
p:first-child
{
color: blue;
}
Match the first <i> element in all <p> elements
In the following example, the selector matches the first <i> element in
all <p> elements:
Example
p i:first-child
{
color: blue;
}
Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in
<p> elements that are the first child of another element:
Example
p:first-child i
{
color: blue;
}
CSS - The :lang Pseudo-class
The :lang pseudo-class allows you to define
special rules for different languages.
In the example below, :lang defines the
quotation marks for <q> elements with lang="no":
Example
<html>
<head>
<style>
q:lang(no) {
quotes:
"~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A
quote in a paragraph</q>
Some text.</p>
</body>
</html>
All CSS Pseudo Classes
| Selector |
Example |
Example description |
| :active |
a:active |
Selects the active link |
| p">:checked |
input:checked |
Selects every checked <input> element |
| sp">:disabled |
input:disabled |
Selects every disabled <input> element |
| :empty |
p:empty |
Selects every <p> element that has no children |
| :enabled |
input:enabled |
Selects every enabled <input> element |
| :first-child |
p:first-child |
Selects every <p> elements that is the first child of its
parent |
| :first-of-type |
p:first-of-type |
Selects every <p> element that is the first <p>
element of its parent |
| >:focus |
input:focus |
Selects the <input> element that has focus |
| >:hover |
a:hover |
Selects links on mouse over |
| :in-range |
input:in-range |
Selects <input> elements with a value within a specified
range |
| :invalid |
input:invalid |
Selects all <input> elements with an invalid value |
| :lang(language) |
p:lang(it) |
Selects every <p> element with a lang attribute value
starting with "it" |
| :last-child |
p:last-child |
Selects every <p> elements that is the last child of its
parent |
| :last-of-type |
p:last-of-type |
Selects every <p> element that is the last <p>
element of its parent |
| :link |
a:link |
Selects all unvisited links |
| :not(selector) |
:not(p) |
Selects every element that is not a <p> element |
| :nth-child(n) |
p:nth-child(2) |
Selects every <p> element that is the second child of its
parent |
| :nth-last-child(n) |
p:nth-last-child(2) |
Selects every <p> element that is the second child of its
parent, counting from the last child |
| :nth-last-of-type(n) |
p:nth-last-of-type(2) |
Selects every <p> element that is the second <p>
element of its parent, counting from the last child |
| :nth-of-type(n) |
p:nth-of-type(2) |
Selects every <p> element that is the second <p>
element of its parent |
| :only-of-type |
p:only-of-type |
Selects every <p> element that is the only <p>
element of its parent |
| :only-child |
p:only-child |
Selects every <p> element that is the only child of its
parent |
| :optional |
input:optional |
Selects <input> elements with no "required" attribute |
| :out-of-range |
input:out-of-range |
Selects <input> elements with a value outside a specified
range |
|
<:read-only< /a>
|
input:read-only
|
Selects <input> elements with a "readonly" attribute
specified |
| :read-write |
input:read-write |
Selects <input> elements with no "readonly" attribute |
| :required |
input:required |
Selects <input> elements with a "required" attribute
specified |
| :root |
root |
Selects the document's root element |
| :target |
#news:target |
Selects the current active #news element (clicked on a URL
containing that anchor name) |
| :valid |
input:valid |
Selects all <input> elements with a valid value |
| :visited |
a:visited |
Selects all visited links |
All CSS Pseudo Elements
| Selector |
Example |
Example description |
| ::after |
p::after |
Insert content after every <p> element |
| ::before |
p::before |
Insert content before every <p> element |
| ::first-letter |
p::first-letter |
Selects the first letter of every <p> element |
| ::first-line |
p::first-line |
Selects the first line of every <p> element |
| ::selection |
p::selection |
Selects the portion of an element that is selected by a user
|
CSS Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property:
value;
}
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to
add a special style
to the first line of a text.
The following example formats the first line of the text in all <p>
elements:
Example
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
Note: The ::first-line
pseudo-element can only be applied to block-level
elements.
The following properties apply to the ::first-line
pseudo-element:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Notice the double colon notation - ::first-line versus
:first-line
The double colon
replaced the single-colon
notation for pseudo-elements in CSS3. This was an attempt from W3C to
distinguish between pseudo-classes
and pseudo-elements.
The single-colon syntax was
used
for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
For
backward compatibility, the single-colon syntax is acceptable for CSS2
and CSS1
pseudo-elements.
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to
add a special style to the first
letter of a text.
The following example formats the first letter of the text in all <p>
elements:
Example
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
Note: The ::first-letter
pseudo-element can only be applied to block-level
elements.
The following properties apply to the ::first-letter pseudo- element:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:
Example
p.intro::first-letter {
color:
#ff0000;
font-size: 200%;
}
The example above will display the first letter of paragraphs with
class="intro", in
red and in a larger size.
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in
an xx-large font size. The rest of the first line will be blue, and in
small-caps. The rest of the paragraph will be the default font size and
color:
Example
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to
insert some content before the content of an element.
The following example inserts an image before the content of each <h1>
element:
Example
h1::before
{
content: url(smiley.gif);
}
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to
insert some content after the content of an element.
The following example inserts an image after the content of each <h1>
element:
Example
h1::after
{
content: url(smiley.gif);
}
Transparent Hover Effect
The opacity property is often used together
with the :hover
selector to change the opacity on mouse-over:
Example
img {
opacity:
0.5;
}
img:hover {
opacity:
1.0;
}
Example explained
The first CSS block is similar to the code in Example 1. In addition, we have
added what should happen when a user hovers over one of the images. In this
case we want the image to NOT be transparent when the user hovers over it.
The CSS for this is opacity:1;.
When the mouse pointer moves away from the image, the image will be
transparent again.
Example
img:hover {
opacity:
0.5;
}
Transparent Box
When using the opacity property to add
transparency to the background of an element, all of its child elements
inherit the same transparency. This can make the text inside a fully
transparent element hard to read:
Example
div {
opacity:
0.3;
}
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example
above, use RGBA color values.
The following example sets the opacity for the background color and not the
text:
An RGBA color value is specified with: rgba(red, green, blue,
alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0
(fully opaque).
Example
div {
background:
rgba(76, 175, 80, 0.3)
}
Text in Transparent Box
This is some text that is placed in the transparent box.
Example
<html>
<head>
<style>
div.background {
background: url(codolearn.jpg)
repeat;
border: 2px solid
black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid
black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
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.</p>
</div>
</div>
</body>
</html>
Example explained
First, we create a <div> element (class="background") with a background
image, and a border.
Then we create another <div> (class="transbox") inside the first
<div>.
The
<div class="transbox"> have a background color, and a border -
the div is transparent.
Inside the transparent
<div>, we add some text inside a <p> element.
CSS Navigation Bar
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.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Try it Yourself »
Now let's remove the bullets and the margins and padding from the list:
Example explained:
list-style-type: none; - Removes the
bullets. A navigation bar
does not need list markers- Set
margin: 0; and padding: 0;
to remove browser default settings
The code in the example above is the standard code used in both vertical, and
horizontal navigation bars, which you will learn more about in the next
chapters.
CSS Vertical Navigation Bar
To build a vertical navigation bar, you can style the <a> elements
inside the list, in addition to the code from the previous page:
Example
li a
{
display: block;
width: 60px;
}
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
(and padding, margin, height, etc. if you want)width: 60px; - Block elements take
up
the full width available by default. We want to specify a 60 pixels
width
You can also set the width of <ul>, and remove the width of
<a>,
as they will take up the full width available when displayed as block
elements.
This will produce the same result as our previous example:
Example
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width:
60px;
}
li
a
{
display: block;
}
Vertical Navigation Bar Examples
Create a basic vertical navigation bar with a gray background
color and
change the background color of the links when the user moves the
mouse over
them:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li
a {
display:
block;
color:
#000;
padding: 8px 16px;
text-decoration: none;
}
li
a:hover {
background-color: #555;
color:
white;
}
Active/Current Navigation Link
Add an "active" class to the current link to let the user
know which page
he/she is on:
Example
.active {
background-color:
#4CAF50;
color:
white;
}
Center Links
& Add Borders
Add text-align:center
to <li> or
<a> to center the links.
Add the border
property to <ul> add a
border around the navbar. If you also want
borders inside the navbar, add a border-bottom to
all <li> elements,
except for the
last one:
Example
ul {
border:
1px solid #555;
}
li
{
text-align:
center;
border-bottom:
1px solid #555;
}
li:last-child
{
border-bottom:
none;
}
Full-height Fixed
Vertical Navbar
Create a full-height, "sticky" side
navigation:
Example
ul {
list-style-type:
none;
margin:
0;
padding:
0;
width:
25%;
background-color:
#f1f1f1;
height:
100%;
position:
fixed;
overflow:
auto;
}
Note: This
example might not work properly on
mobile
devices.
CSS Horizontal
Navigation Bar
Horizontal Navigation Bar
There are two ways to create a
horizontal navigation bar. Using
inline or floating
list items.
Inline List Items
One way to build a horizontal
navigation bar is to specify the
<li>
elements
as inline, in addition to the
"standard" code from the previous
page:
Example
li
{
display:
inline;
}
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
Floating List Items
Another way of creating a horizontal
navigation bar is to float the
<li>
elements, and specify a layout for
the navigation links:
Example
li
{
float:
left;
}
a
{
display:
block;
padding:
8px;
background-color:
#dddddd;
}
Example explained:
float:
left; - use float to
get block
elements to slide next to each
otherdisplay:
block; -
Allows us to specify padding
(and
height, width, margins, etc. if
you want)padding:
8px; - Since block
elements
take up the full width
available, they
cannot float next to each other.
Therefore, specify some padding
to make
them look goodbackground-color:
#dddddd; - Add a gray
background-color to each a
element
Tip: Add the
background-color to <ul>
instead of each
<a> element if you want
a full-width background color:
Example
ul
{
background-color:
#dddddd;
}
Horizontal Navigation Bar Examples
Create a basic horizontal navigation
bar with a dark background color and
change the background color of the
links when the user moves the mouse
over
them:
Example
ul {
list-style-type:
none;
margin:
0;
padding:
0;
overflow:
hidden;
background-color:
#333;
}
li
{
float:
left;
}
li a {
display:
block;
color:
white;
text-align:
center;
padding:
14px 16px;
text-decoration:
none;
}
li a:hover
{
background-color:
#111;
}
Example
.active {
background-color:
#4CAF50;
}
Right-Align
Links
Right-align links by floating the
list items to the right (float:right;):
Example
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li
style="float:right"><a
class="active"
href="#about">About</a></li>
</ul>
Border
Dividers
Add the border-right
property to <li>
to create link dividers:
Example
li {
border-right:
1px solid #bbb;
}
li:last-child {
border-right:
none;
}
Fixed
Navigation Bar
Fixed Top
ul {
position:
fixed;
top:
0;
width:
100%;
}
Fixed Bottom
ul {
position:
fixed;
bottom:
0;
width:
100%;
}
Note: Fixed
position might not work properly
on mobile
devices.
Example
ul {
border:
1px solid
#e7e7e7;
background-color:
#f3f3f3;
}
li
a {
color:
#666;
}
Sticky
Navbar
Add position:
sticky; to <ul> to
create a sticky navbar.
A sticky element toggles between
relative and fixed, depending on the
scroll
position. It is positioned relative
until a given offset position is met
in
the viewport - then it "sticks" in
place (like position:fixed).
style="width:100%;border:3px solid #e9e9e9;height:400px;padding:0">
Example
ul {
position:
-webkit-sticky;
position:
sticky;
top:
0;
}
Note: Internet
Explorer do not support sticky
positioning. Safari requires a
-webkit-
prefix (see example above). You
must also specify at least one
of top,
right,
bottom
or left
for
sticky positioning to work.
CSS Dropdowns
Create a hoverable
dropdown with CSS.
Demo: Dropdown Examples
Move the mouse over the examples
below:
Basic Dropdown
Create a dropdown box that appears
when the user moves the mouse over
an
element.
Example
<style>
.dropdown
{
position:
relative;
display:
inline-block;
}
.dropdown-content
{
display:
none;
position:
absolute;
background-color:
#f9f9f9;
min-width:
160px;
box-shadow:
0px 8px 16px 0px
rgba(0,0,0,0.2);
padding:
12px 16px;
z-index:
1;
}
.dropdown:hover
.dropdown-content {
display:
block;
}
</style>
<div
class="dropdown">
<span>Mouse
over me</span>
<div
class="dropdown-content">
<p>Hello
World!</p>
</div>
</div>
Example Explained
HTML) Use any
element to open the dropdown
content, e.g. a
<span>, or a <button>
element.
Use a container element (like
<div>) to create the dropdown
content and
add
whatever you want inside of it.
Wrap a <div> element around the
elements to position the dropdown
content
correctly with CSS.
CSS) The .dropdown
class
uses position:relative,
which is needed
when we want the
dropdown content to be placed right
below the dropdown button (using
position:absolute).
The .dropdown-content
class holds the actual
dropdown content. It is hidden by
default, and will be displayed on
hover (see below). Note the min-width
is set to 160px. Feel free to
change
this. Tip: If you
want the width of the dropdown
content to
be
as wide as the dropdown button, set
the width
to 100% (and overflow:auto
to
enable scroll on small screens).
Instead of using a border, we have
used the CSS box-shadow
property to make the
dropdown menu look like a "card".
The :hover
selector is used to show the
dropdown menu when the user moves
the
mouse over the dropdown button.
Dropdown Menu
Create a dropdown menu that allows
the user to choose an option from a
list:
This example is similar to the
previous one, except that we add
links inside
the dropdown box and style them to
fit a styled dropdown button:
Example
<style>
.dropbtn
{
background-color:
#4CAF50;
color:
white;
padding:
16px;
font-size:
16px;
border:
none;
cursor:
pointer;
}
.dropdown
{
position:
relative;
display:
inline-block;
}
.dropdown-content {
display:
none;
position:
absolute;
background-color:
#f9f9f9;
min-width:
160px;
box-shadow:
0px 8px 16px 0px
rgba(0,0,0,0.2);
z-index:
1;
}
.dropdown-content a {
color:
black;
padding:
12px 16px;
text-decoration:
none;
display:
block;
}
.dropdown-content a:hover
{background-color:
#f1f1f1}
.dropdown:hover
.dropdown-content {
display:
block;
}
.dropdown:hover
.dropbtn {
background-color:
#3e8e41;
}
</style>
<div
class="dropdown">
<button
class="dropbtn">Dropdown</button>
<div
class="dropdown-content">
<a
href="#">Link
1</a>
<a
href="#">Link
2</a>
<a
href="#">Link
3</a>
</div>
</div>
Right-aligned Dropdown Content
If you want
the dropdown menu to go from right
to
left, instead of left to right, add
right:
0;
Example
.dropdown-content {
right:
0;
}
More Examples
Dropdown Image
How to add an image and other
content inside the dropdown box.
Hover over the image:
Dropdown Image
Move the mouse
over the image
below to open
the dropdown
content.
CODOLEARN
Dropdown Navbar
How to add a dropdown menu inside
a navigation bar.
CSS Image
Gallery
CSS can be used to
create an image gallery.
Add a
description of the image
here
Image Gallery
The following image gallery is
created with CSS:
Example
<html>
<head>
<style>
div.gallery {
margin:
5px;
border:
1px solid #ccc;
float:
left;
width:
180px;
}
div.gallery:hover {
border:
1px solid #777;
}
div.gallery img {
width:
100%;
height:
auto;
}
div.desc {
padding:
15px;
text-align:
center;
}
</style>
</head>
<body>
<div
class="gallery">
<a
target="_blank"
href="img_5terre.jpg">
<img
src="img_5terre.jpg"
alt="Cinque
Terre"
width="600"
height="400">
</a>
<div
class="desc">Add
a description of the image
here</div>
</div>
<div
class="gallery">
<a
target="_blank"
href="img_forest.jpg">
<img
src="img_forest.jpg"
alt="Forest"
width="600"
height="400">
</a>
<div
class="desc">Add
a description of the image
here</div>
</div>
<div
class="gallery">
<a
target="_blank"
href="img_lights.jpg">
<img
src="img_lights.jpg"
alt="Northern
Lights"
width="600"
height="400">
</a>
<div
class="desc">Add
a description of the image
here</div>
</div>
<div
class="gallery">
<a
target="_blank"
href="img_mountains.jpg">
<img
src="img_mountains.jpg"
alt="Mountains"
width="600"
height="400">
</a>
<div
class="desc">Add
a description of the image
here</div>
</div>
</body>
</html>
More Examples
Responsive Image Gallery
How to use CSS media queries to
create a responsive image
gallery that
will
look good on desktops, tablets
and smart phones.
CSS Image
Sprites
Image Sprites
An image sprite is a collection of
images put into a single image.
A web page with many images can take
a long time to load and generates
multiple server requests.
Using image sprites will reduce the
number of server requests and save
bandwidth.
Image Sprites - Simple Example
Instead of using three separate
images, we use this single image
("img_navsprites.gif"):
With CSS, we can show just the part
of the image we need.
In the following example the CSS
specifies which part of the
"img_navsprites.gif"
image to show:
Example
#home
{
width:
46px;
height:
44px;
background:
url(img_navsprites.gif)
0
0;
}
Try it
Yourself »
Example explained:
<img
id="home"
src="img_trans.gif">
- Only defines a small
transparent image
because the src attribute cannot
be empty. The displayed image
will be
the background image we specify
in CSSwidth:
46px; height: 44px; -
Defines
the portion of the image we want
to usebackground:
url(img_navsprites.gif) 0
0;
- Defines the background image
and its position (left 0px, top
0px)
This is the easiest way to use image
sprites, now we want to expand it by
using links and hover effects.
Image Sprites - Create a Navigation
List
We want to use the sprite image
("img_navsprites.gif") to create a
navigation
list.
We will use an HTML list, because it
can be a link and also supports a
background image:
Example
#navlist {
position:
relative;
}
#navlist li {
margin:
0;
padding:
0;
list-style:
none;
position:
absolute;
top:
0;
}
#navlist li, #navlist a
{
height:
44px;
display:
block;
}
#home {
left:
0px;
width:
46px;
background:
url('img_navsprites.gif')
0 0;
}
#prev {
left:
63px;
width:
43px;
background:
url('img_navsprites.gif')
-47px 0;
}
#next {
left:
129px;
width:
43px;
background:
url('img_navsprites.gif')
-91px 0;
}
Try it
Yourself »
Example explained:
- #navlist {position:relative;} -
position is set to relative to
allow
absolute positioning inside it
- #navlist li
{margin:0;padding:0;list-style:none;position:absolute;top:0;}
- margin and padding are set to
0, list-style is removed, and
all list
items
are absolute positioned
- #navlist li, #navlist a
{height:44px;display:block;} -
the height of all
the images are 44px
Now start to position and style for
each specific part:
- #home {left:0px;width:46px;} -
Positioned all the way to the
left, and
the width of the image is 46px
- #home
{background:url(img_navsprites.gif)
0 0;} -
Defines the background
image and its position (left
0px, top 0px)
- #prev {left:63px;width:43px;} -
Positioned 63px to the
right (#home width 46px + some
extra space between items), and
the width is 43px.
- #prev
{background:url('img_navsprites.gif')
-47px 0;} - Defines the
background
image 47px to the right (#home
width 46px + 1px line
divider)
- #next {left:129px;width:43px;}-
Positioned 129px to
the right (start of #prev is
63px + #prev width 43px +
extra space), and the width is
43px.
- #next
{background:url('img_navsprites.gif')
-91px 0;} -
Defines the background
image 91px to the right (#home
width 46px + 1px
line divider + #prev width 43px
+ 1px line divider )
Image Sprites - Hover Effect
Now we want to add a hover effect to
our navigation list.
Tip: The :hover
selector can be used on all
elements,
not only on links.
Our new image
("img_navsprites_hover.gif")
contains three navigation images
and three images to use for hover
effects:
Because this is one single image, and
not six separate files, there will
be
no
loading delay when a user
hovers over the image.
We only add three lines of code to
add the hover effect:
Example
#home a:hover {
background:
url('img_navsprites_hover.gif')
0 -45px;
}
#prev a:hover {
background:
url('img_navsprites_hover.gif')
-47px
-45px;
}
#next a:hover {
background:
url('img_navsprites_hover.gif')
-91px
-45px;
}
Try it
Yourself »
Example explained:
- #home a:hover {background:
url('img_navsprites_hover.gif')
0 -45px;} -
For all three hover images we
specify the same background
position, only
45px further down
Forms In CSS
The look of an HTML form can be greatly
improved with CSS:
CSS Forms
Styling Input Fields
Use the width
property to determine the
width of the input field:
The example above applies to all
<input> elements. If you only
want to
style a specific input type, you can
use attribute selectors:
input[type=text]
- will only select
text fieldsinput[type=password]
- will only select
password fieldsinput[type=number]
- will only select
number fields- etc..
Padded Inputs
Use the padding
property to add space inside
the text field.
Tip: When you have
many inputs after each other, you
might
also want to add some margin,
to add more
space
outside of them:
Example
input[type=text]
{
width:
100%;
padding:
12px 20px;
margin:
8px 0;
box-sizing:
border-box;
}
Try it
Yourself »
Note that we have set the box-sizing
property to
border-box.
This makes sure that the
padding and eventually borders
are included in the
total width and height of the
elements.
Read more about
the box-sizing
property in our CSS
Box Sizing chapter.
Bordered Inputs
Use the border
property to change the border
size and color, and
use the border-radius
property to add
rounded corners:
Example
input[type=text]
{
border:
2px solid red;
border-radius:
4px;
}
Try it
Yourself »
If you only want a bottom border, use
the border-bottom
property:
Example
input[type=text]
{
border:
none;
border-bottom:
2px solid red;
}
Try it
Yourself »
Colored Inputs
Use the background-color
property to add a
background color to the input, and
the color
property to change the text
color:
Example
input[type=text]
{
background-color:
#3CBC8D;
color:
white;
}
Try it
Yourself »
Focused Inputs
By default, some browsers will add a
blue outline around the input when
it
gets
focus. You can remove this behavior
by adding outline:
none; to the input.
Use the :focus
selector to do something with
the input field when it gets focus:
Animated Search Input
In this example we use the CSS transition
property to animate
the width of the search input when
it gets focus. You will learn more
about
the
transition property
later, in our CSS Transitions
chapter.
ssss
Example
input[type=text] {
transition:
width 0.4s ease-in-out;
}
input[type=text]:focus
{
width:
100%;
}
Try it
Yourself »
Styling Textareas
Tip: Use the resize
property to prevent textareas from being
resized (disable the "grabber" in
the bottom right corner):
Example
textarea
{
width:
100%;
height:
150px;
padding:
12px 20px;
box-sizing:
border-box;
border:
2px solid #ccc;
border-radius:
4px;
background-color:
#f8f8f8;
resize:
none;
}
Try it
Yourself »
Styling Select Menus
A styled select menu.
Example
select
{
width:
100%;
padding:
16px 20px;
border:
none;
border-radius:
4px;
background-color:
#f1f1f1;
}
Try it
Yourself »
Styling Input Buttons
Example
input[type=button],
input[type=submit],
input[type=reset]
{
background-color:
#4CAF50;
border:
none;
color:
white;
padding:
16px 32px;
text-decoration:
none;
margin:
4px 2px;
cursor:
pointer;
}
Try it
Yourself »
Responsive Form
Resize the browser window to see the effect.
When the screen is less than
600px wide, make the two columns stack on
top of each other instead of next
to each other.
Try it Yourself
»
Website Layout In CSS
A website can be divided into various sections
comprising of header, menus,
content and footer based on which there are many
different layout design
available for developer. Different layouts can
be created by using div tag and
use CSS property to style it.
The most common structure of website layout is
given below:
Notice: Header section contains a website logo,
a search bar and profile of
user. The navigation menu contains link to
various categories of articles
available and content section is divided into 3
parts(columns) with left and
right sidebar containing links to other articles
and advertisements whereas the
main content section is the one
containing this article, then at the bottom
there is a footer section which
contains address, links, contacts etc.
Header Section: The header section is generally
placed either at the top of the
Website or just below
a top navigation menu. It often comprises of the
name of the Website or the logo
of the Website.
<!DOCTYPE html>
<html>
<head>
<title>
Website Layouts
</title>
<style>
.header {
background-color: green;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class = "header">
<h2 style = "color:white;">
CODOLEARN
</h2>
</div>
<br>
<center style="font-size:200%;">
Section
</center>
</body>
</html>
Navigation Menu: A Navigation Bar/Menu is
basically a list of links that allows
visitor to navigate through the website
comfortably with easy access.
<!DOCTYPE html>
<html>
<head>
<title>
Website Layout
</title>
<style>
.header {
background-color: green;
padding: 15px;
text-align: center;
}
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
</style>
</head>
<body>
<!-- header of website layout -->
<div class = "header">
<h2 style =
"color:white;font-size:200%;">
CODOLEARN
</h2>
</div>
<!-- nevigation menu for website layout
-->
<div class = "nav_menu">
<a href = "#">
HOME</a>
<a href = "#">
CONTACT</a>
<a href = "#">
ABOUT</a>
</div>
<br>
<center style = "font-size:200%;">
Section
</center>
</body>
</html>
example:
<!DOCTYPE html>
<html>
<head>
<title>
Website Layout
</title>
<style>
* {
box-sizing: border-box;
}
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for nevigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
/* CSS property for content section */
.columnA, .columnB, .columnC {
float: left;
width: 31%;
padding: 15px;
text-align:justify;
}
h2 {
color:green;
text-align:center;
}
/* Media query to set website layout
according to screen size */
@media screen and (max-width:600px) {
.columnA, .columnB, .columnC {
width: 50%;
}
}
@media screen and (max-width:400px) {
.columnA, .columnB, .columnC {
width: 100%;
}
}
</style>
</head>
<body>
<!-- header of website layout -->
<div class = "header">
<h2 style = "color:white;font-size:200%">
GeeksforGeeks
</h2>
</div>
<!-- nevigation menu of website layout
-->
<div class = "nav_menu">
<a href = "#">
Algo</a>
<a href = "#">
DS</a>
<a href = "#">
Language</a>
</div>
<!-- Content section of website layout
-->
<div class = "row">
<div class = "columnA">
<h2>
Column A</h2>
<p>
Prepare for the Recruitment drive of
product
based companies like Microsoft, Amazon,
Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
<div class = "columnB">
<h2>
Column B</h2>
<p>
Prepare for the Recruitment drive of
product
based companies like Microsoft, Amazon,
Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
<div class = "columnC">
<h2>
Column C</h2>
<p>
Prepare for the Recruitment drive of
product
based companies like Microsoft, Amazon,
Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
</div>
</body>
</html>
CSS ADVANCED
CSS Rounded
Corners
CSS Rounded Corners
With the CSS border-radius
property, you
can give any element "rounded corners".
CSS border-radius Property
The CSS
border-radius
property defines the radius
of an
element's corners.
Tip: This property allows
you to add rounded corners to
elements!
Here are three examples:
1. Rounded corners for an element with a
specified background color:
Rounded
corners!
2. Rounded corners for an element with a
border:
Rounded corners!
3. Rounded corners for an element with a
background image:
Rounded corners!
Here is the code:
Example
#rcorners1 {
border-radius:
25px;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
#rcorners2
{
border-radius:
25px;
border:
2px solid #73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
#rcorners3
{
border-radius:
25px;
background:
url(paper.gif);
background-position:
left top;
background-repeat:
repeat;
padding:
20px;
width:
200px;
height:
150px;
}
Try it
Yourself »
Tip: The border-radius
property
is actually a shorthand property for the
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius
and border-bottom-left-radius
properties.
CSS border-radius - Specify Each Corner
The border-radius
property can have from one
to four values. Here are the rules:
Four values - border-radius: 15px
50px 30px 5px; (first
value applies to top-left corner, second
value applies to top-right corner,
third value applies to bottom-right corner,
and fourth value applies to
bottom-left corner):
Three values - border-radius: 15px
50px 30px; (first value
applies to top-left corner, second value
applies to top-right and
bottom-left
corners, and third value applies to
bottom-right corner):
Two values - border-radius: 15px
50px; (first value applies
to top-left and bottom-right corners, and
the second value applies to
top-right
and bottom-left corners):
One value - border-radius:
15px; (the value applies to all
four corners, which are rounded equally:
Here is the code:
Example
#rcorners1 {
border-radius:
15px 50px 30px 5px;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
#rcorners2
{
border-radius:
15px 50px 30px;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
#rcorners3
{
border-radius:
15px 50px;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
#rcorners4
{
border-radius:
15px;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
Try it
Yourself »
You could also create elliptical corners:
Example
#rcorners1 {
border-radius:
50px / 15px;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
#rcorners2
{
border-radius:
15px / 50px;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
#rcorners3
{
border-radius:
50%;
background:
#73AD21;
padding:
20px;
width:
200px;
height:
150px;
}
Try it
Yourself »
CSS Rounded Corners Properties
| Property |
Description |
| border-radius
|
A shorthand property for setting all the four
border-*-*-radius
properties |
| border-top-left-radius
|
Defines the shape of the border of the top-left corner |
| border-top-right-radius
|
Defines the shape of the border of the top-right corner |
| border-bottom-right-radius
|
Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius |
Defines the shape of the border of the bottom-left corner |
CSS Border Images
CSS Border Images
With the CSS border-image property, you
can set an image to be used as the border around an element.
CSS border-image Property
The CSS border-image property allows you to
specify an image to be used instead of the normal border around an element.
The property has three parts:
- The image to use as the border
- Where to slice the image
- Define whether the middle sections should be repeated or stretched
We will use the following image (called "border.png"):
The border-image property takes the image
and slices it into nine sections,
like a tic-tac-toe board. It then places the corners at the corners, and the
middle sections are repeated or stretched as you specify.
Note: For border-image to
work, the element also needs the
border property set!
Here, the middle sections of the image are repeated to create the border:
Here is the code:
Example
#borderimg
{
border: 10px solid transparent;
padding:
15px;
border-image: url(border.png)
30 round;
}
Try it
Yourself »
Here, the middle sections of the image are stretched to create the border:
An image as a border!
Here is the code:
Example
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Try it
Yourself »
Tip: The border-image property is
actually a shorthand property for the
border-image-source, border-image-slice, border-image-width,
border-image-outset
and border-image-repeat properties.
CSS border-image - Different Slice Values
Different slice values completely changes the look of the border:
Example 1:
border-image: url(border.png) 50 round;
Example 2:
border-image: url(border.png) 20% round;
Example 3:
border-image: url(border.png) 30% round;
Here is the code:
Example
#borderimg1 {
border:
10px solid transparent;
padding: 15px;
border-image: url(border.png)
50 round;
}
#borderimg2
{
border: 10px solid
transparent;
padding: 15px;
border-image: url(border.png) 20%
round;
}
#borderimg3 {
border:
10px solid transparent;
padding: 15px;
border-image:
url(border.png)
30% round;
}
Try it
Yourself »
CSS Border Image Properties
| Property |
Description |
| border-image |
A shorthand property for setting all the border-image-*
properties |
| border-image-source
|
Specifies the path to the image to be used as a border |
| border-image-slice
|
Specifies how to slice the border image |
| border-image-width
|
Specifies the widths of the border image |
| border-image-outset
|
Specifies the amount by which the border image area extends
beyond the border box |
| border-image-repeat
|
Specifies whether the border image should be repeated, rounded
or stretched |
CSS Multiple Backgrounds
In this chapter you will learn how to add multiple background images to
one
element.
You will also learn about the following properties:
background-sizebackground-originbackground-clip
CSS Multiple Backgrounds
CSS allows you to add multiple background images for an element, through the
background-image property.
The different background images are separated by commas, and the images are
stacked on top of each other, where the first image is closest to the
viewer.
The following example has two background images, the first image is a flower
(aligned to the bottom and right) and the second image is a paper background
(aligned to the top-left corner):
Example
#example1 {
background-image:
url(url), url(paper.gif);
background-position:
right bottom, left top;
background-repeat:
no-repeat, repeat;
}
Try it
Yourself »
Multiple background images can be specified using either the individual
background properties (as above) or the background
shorthand property.
The following example uses the background
shorthand property (same result as
example above):
Example
#example1 {
background:
url(url) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Try it
Yourself »
CSS Background Size
The CSS background-size property allows you
to specify the size of background images.
The size can be specified in lengths, percentages, or by using one of the two
keywords: contain or cover.
The following example resizes a background image to much smaller than the
original image (using pixels):
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Here is the code:
Example
#div1
{
background:
url(img_flower.jpg);
background-size: 100px 80px;
background-repeat:
no-repeat;
}
Try it
Yourself »
The two other possible values for background-size are
contain
and cover.
The contain keyword scales the background
image to be as large as possible
(but both its width and its height must fit inside the content area). As
such, depending on the proportions of the background
image and the background positioning area, there may be some areas of
the background which are not covered by the background image.
The cover keyword scales the background
image so that the content area is
completely covered by the background image (both its width and height are
equal to or
exceed the content area). As such, some parts of the background image may
not be
visible in the background positioning area.
The following example illustrates the use of contain and
cover:
Example
#div1
{
background:
url(img_flower.jpg);
background-size: contain;
background-repeat:
no-repeat;
}
#div2
{
background:
url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Try it
Yourself »
Define Sizes of Multiple Background Images
The background-size property also accepts
multiple values for background size
(using a comma-separated list), when working with multiple backgrounds.
The following example has three background images specified, with different
background-size value for each image:
Example
#example1 {
background:
url(img_tree.gif) left top
no-repeat, url(url) right bottom no-repeat, url(paper.gif)
left top
repeat;
background-size: 50px, 130px, auto;
}
Try it
Yourself »
Full Size Background Image
Now we want to have a background image on a website that covers the entire
browser window at all times.
The requirements are as follows:
- Fill the entire page with the image (no white space)
- Scale image as needed
- Center image on page
- Do not cause scrollbars
The following example shows how to do it; Use the <html> element
(the <html> element is always at least the height of the browser
window). Then set a fixed and centered background on it.
Then adjust its size with the
background-size property:
Example
html {
background:
url(img_man.jpg) no-repeat
center fixed;
background-size:
cover;
}
Try it
Yourself »
Hero Image
You could also use different background properties on a <div> to create
a hero image (a large image with text), and place it where you want.
Example
.hero-image {
background:
url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Try it
Yourself »
CSS background-origin Property
The CSS background-origin property specifies
where the background image is
positioned.
The property takes three different values:
- border-box - the background image starts from the upper left corner of
the border
- padding-box - (default) the background image starts from the upper left
corner of the padding edge
- content-box - the background image starts from the upper left corner of
the content
The following example illustrates the background-origin
property:
Example
#example1
{
border: 10px solid black;
padding: 35px;
background: url(url);
background-repeat: no-repeat;
background-origin: content-box;
}
Try it
Yourself »
CSS background-clip Property
The CSS background-clip property specifies
the painting area of the background.
The property takes three different values:
- border-box - (default) the background is painted to the outside edge of
the border
- padding-box - the background is painted to the outside edge of the
padding
- content-box - the background is painted within the content box
The following example illustrates the background-clip
property:
Example
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Try it
Yourself »
CSS Advanced Background Properties
| Property |
Description |
| background |
A shorthand property for setting all the background properties
in one declaration |
| background-clip |
Specifies the painting area of the background |
| background-image |
Specifies one or more background images for an element |
| background-origin |
Specifies where the background image(s) is/are positioned |
| background-size |
Specifies the size of the background image(s) |
CSS Shadow Effects
CSS Shadow Effects
With CSS you can add shadow to text and to elements.
In these chapters you will learn about the following properties:
CSS Text Shadow
The CSS text-shadow property applies shadow
to text.
In its simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px):
Text shadow effect!
Next, add a color to the shadow:
Text shadow effect!
Then, add a blur effect to the shadow:
Text shadow effect!
The following example shows a white text with black shadow:
Text shadow effect!
The following example shows a red neon glow shadow:
Text shadow effect!
Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated list
of shadows.
The following example shows a red and blue neon glow shadow:
Text shadow effect!
The following example shows a white text with black, blue, and darkblue
shadow:
Text shadow effect!
Example
h1
{
color:
white;
text-shadow: 1px 1px 2px black, 0 0 25px
blue, 0 0 5px darkblue;
}
Try it
Yourself »
You can also use the text-shadow property to create a plain border around
some text (without shadows):
Border around text!
Example
h1
{
color:
yellow;
text-shadow:
-1px 0 black, 0 1px
black, 1px 0 black, 0 -1px black;
}
Try it
Yourself »
CSS Box Shadow
CSS box-shadow Property
The CSS box-shadow property applies shadow
to elements.
In its simplest use, you only specify the horizontal shadow and the vertical
shadow:
This is a div element with a box-shadow
Next, add a color to the shadow:
Next, add a blur effect to the shadow:
Cards
You can also use the box-shadow property to
create paper-like cards:
Example
div.card
{
width: 250px;
box-shadow: 0
4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Try it
Yourself»
CSS Shadow Properties
The following table lists the CSS shadow properties:
| Property |
Description |
| box-shadow |
Adds one or more shadows to an element |
| text-shadow |
Adds one or more shadows to a text |
CSS 2D Transforms
CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.
Mouse over the element below to see a 2D transformation:
In this chapter you will learn about the following CSS property:
CSS 2D Transforms Methods
With the CSS transform property you can use
the following 2D transformation methods:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Tip: You will learn about 3D transformations in the next
chapter.
The translate() Method
The translate() method moves an element from
its current position (according
to the parameters given for the X-axis and the Y-axis).
The following example moves the <div> element 50 pixels to the right,
and 100 pixels down from its current position:
The rotate() Method
The rotate() method rotates an element
clockwise or counter-clockwise according to a given degree.
The following example rotates the <div> element clockwise with 20
degrees:
Using negative values will rotate the element counter-clockwise.
The following example rotates the <div> element counter-clockwise with
20 degrees:
The scale() Method
The scale() method increases or decreases
the size of an element (according to the parameters given for the width and
height).
The following example increases the <div> element to be two times of
its original width, and three times of its original height:
The following example decreases the <div> element to be half of its
original width and height:
The scaleX() Method
The scaleX() method increases or decreases
the
width of an element.
The following example increases the <div> element to be two times of
its original width:
The following example decreases the <div> element to be half of its
original width:
The scaleY() Method
The scaleY() method increases or decreases
the
height of an element.
The following example increases the <div> element to be three times of
its original
height:
The following example decreases the <div> element to be half of its
original
height:
The skewX() Method
The skewX() method skews an element along
the X-axis by the given angle.
The following example skews the <div> element 20 degrees along the
X-axis:
The skewY() Method
The skewY() method skews an element along
the Y-axis by the given angle.
The following example skews the <div> element 20 degrees along the
Y-axis:
The skew() Method
The skew() method skews an element along the
X and Y-axis by the given angles.
The following example skews the <div> element 20 degrees along the
X-axis, and 10 degrees along the Y-axis:
If the second parameter is not specified, it has a zero value. So, the
following example skews the <div> element 20 degrees along the X-axis:
The matrix() Method
The matrix() method combines all 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.
The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
CSS Transform Properties
The following table lists all the 2D transform properties:
| Property |
Description |
| transform |
Applies a 2D or 3D transformation to an element |
| transform-origin |
Allows you to change the position on transformed elements |
CSS 2D Transform Methods
| Function |
Description |
| matrix(n,n,n,n,n,n) |
Defines a 2D transformation, using a matrix of six values |
| translate(x,y) |
Defines a 2D translation, moving the element along the X- and
the Y-axis |
| translateX(n) |
Defines a 2D translation, moving the element along the X-axis
|
| translateY(n) |
Defines a 2D translation, moving the element along the Y-axis
|
| scale(x,y) |
Defines a 2D scale transformation, changing the elements width
and height |
| scaleX(n) |
Defines a 2D scale transformation, changing the element's width
|
| scaleY(n) |
Defines a 2D scale transformation, changing the element's height
|
| rotate(angle) |
Defines a 2D rotation, the angle is specified in the parameter
|
| 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 |
CSS 3D Transforms
CSS 3D Transforms
CSS also supports 3D transformations.
CSS 3D Transforms Methods
With the CSS transform property you can use
the following 3D transformation methods:
rotateX()rotateY()rotateZ()
The rotateX() Method
The rotateX() method rotates an element
around its X-axis at a given degree:
The rotateY() Method
The rotateY() method rotates an element
around its Y-axis at a given degree:
The rotateZ() Method
The rotateZ() method rotates an element
around its Z-axis at a given degree:
CSS Transform Properties
The following table lists all the 3D transform properties:
| Property |
Description |
| transform |
Applies a 2D or 3D transformation to an element |
| transform-origin |
Allows you to change the position on transformed elements |
| transform-style |
Specifies how nested elements are rendered in 3D space |
| perspective |
Specifies the perspective on how 3D elements are viewed |
| perspective-origin |
Specifies the bottom position of 3D elements |
| backface-visibility |
Defines whether or not an element should be visible when not
facing the screen |
CSS 3D Transform Methods
| Function |
Description |
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
|
| translate3d(x,y,z) |
Defines a 3D translation |
| 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
|
| scale3d(x,y,z) |
Defines a 3D scale transformation |
| scaleX(x) |
Defines a 3D scale transformation by giving a value for the
X-axis |
| scaleY(y) |
Defines a 3D 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 |
| 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 |
| perspective(n) |
Defines a perspective view for a 3D transformed element |
CSS Transitions
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given
duration.
In this chapter you will learn about the following properties:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
How to Use CSS Transitions?
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:
Example
div
{
width:
100px;
height:
100px;
background: red;
transition:
width 2s;
}
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 <div> element:
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:
Specify the Speed Curve of the Transition
The transition-timing-function property
specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
ease - specifies a transition effect
with a slow start, then fast, then end slowly (this is default)linear - specifies a transition effect
with the same speed from start to endease-in - specifies a transition effect
with a slow startease-out - specifies a transition
effect with a slow endease-in-out - specifies a transition
effect with a slow start and endcubic-bezier(n,n,n,n) - lets you define
your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can
be used:
Example
#div1 {transition-timing-function:
linear;}
#div2
{transition-timing-function:
ease;}
#div3
{transition-timing-function:
ease-in;}
#div4
{transition-timing-function:
ease-out;}
#div5
{transition-timing-function:
ease-in-out;}
Try it
Yourself »
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:
Transition + Transformation
The following example adds a transition effect to the transformation:
More Transition Examples
The CSS transition properties can be specified one by one, like this:
Example
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Try it
Yourself »
or by using the shorthand property transition:
CSS Transition Properties
The following table lists all the CSS transition properties:
| Property |
Description |
| transition |
A shorthand property for setting the four transition properties
into a single property |
| transition-delay |
Specifies a delay (in seconds) for the transition effect |
| transition-duration |
Specifies how many seconds or milliseconds a transition effect
takes to complete |
| transition-property |
Specifies the name of the CSS property the transition effect is
for |
| transition-timing-function |
Specifies the speed curve of the transition effect |
CSS Animations
CSS Animations
CSS allows animation of HTML elements without using JavaScript or Flash!
In this chapter you will learn about the following properties:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
What are CSS Animations?
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 last for 4 seconds, and it will gradually change the
background-color of the <div> element from "red" to "yellow":
Example
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width:
100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration:
4s;
}
Note: The animation-duration property
defines how long time an animation should take to complete. If the animation-duration property is not specified,
no animation will occur, because
the default value is 0s (0 seconds).
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:
Example
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color:
red;
animation-name:
example;
animation-duration:
4s;
}
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:
Example
@keyframes example
{
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;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color:
red;
animation-name:
example;
animation-duration:
4s;
}
Delay an Animation
The animation-delay property specifies a
delay for the start of an animation.
The following example has a 2 seconds delay before starting the animation:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color:
red;
animation-name:
example;
animation-duration: 4s;
animation-delay: 2s;
}
Negative values are also allowed. If using negative values, the animation
will start as if it had already been playing for N seconds.
In the following example, the animation will start as if it had already been
playing for 2 seconds:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
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:
Example
div {
width:
100px;
height:
100px;
position:
relative;
background-color:
red;
animation-name:
example;
animation-duration:
4s;
animation-iteration-count:
3;
}
The following example uses the value "infinite" to make the animation
continue for ever:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color:
red;
animation-name:
example;
animation-duration:
4s;
animation-iteration-count:
infinite;
}
Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property specifies
whether an animation should be played forwards, backwards or in alternate
cycles.
The animation-direction property can have the following values:
normal - The animation is played as
normal
(forwards). This is defaultreverse - The animation is played in
reverse direction (backwards)alternate - The animation is played
forwards first, then backwardsalternate-reverse - The animation is
played
backwards first, then forwards
The following example will run the animation in reverse direction
(backwards):
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color:
red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
The following example uses the value "alternate" to make the animation
run forwards first, then backwards:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name:
example;
animation-duration:
4s;
animation-iteration-count:
2;
animation-direction:
alternate;
}
The following example uses the value "alternate-reverse" to make the
animation
run backwards first, then forwards:
Example
div {
width:
100px;
height: 100px;
position: relative;
background-color:
red;
animation-name:
example;
animation-duration:
4s;
animation-iteration-count:
2;
animation-direction:
alternate-reverse;
}
Specify the Speed Curve of the Animation
The animation-timing-function property
specifies the speed curve of the
animation.
The animation-timing-function property can have the following values:
ease - Specifies an animation with a
slow start, then fast, then end slowly (this is default)linear - Specifies an animation with
the same speed from start to endease-in - Specifies an animation with a
slow startease-out - Specifies an animation with
a slow endease-in-out - Specifies an animation
with a slow start and endcubic-bezier(n,n,n,n) - Lets you define
your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can
be used:
Example
#div1 {animation-timing-function:
linear;}
#div2
{animation-timing-function:
ease;}
#div3
{animation-timing-function:
ease-in;}
#div4
{animation-timing-function:
ease-out;}
#div5
{animation-timing-function:
ease-in-out;}
Specify the fill-mode For an Animation
CSS animations do not affect an element before the first keyframe is played
or after the last keyframe is played. The animation-fill-mode property can
override this behavior.
The animation-fill-mode property specifies a
style for the target element when the animation is not playing (before it
starts, after it ends, or both).
The animation-fill-mode property can have the following values:
none - Default value. Animation will
not
apply any styles to the element before or after it is executingforwards - The element will retain the
style values that is set by the last keyframe (depends on
animation-direction
and animation-iteration-count)backwards - The element will get the
style
values that is set by the first keyframe (depends on
animation-direction), and
retain this during the animation-delay periodboth - The animation will follow the
rules
for both forwards and backwards, extending the animation properties in
both
directions
The following example lets the <div> element retain the style values
from the
last keyframe when the animation ends:
Example
div {
width:
100px;
height: 100px;
background:
red;
position:
relative;
animation-name:
example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Try it
Yourself »
The following example lets the <div> element get the style values set
by the
first keyframe before the animation starts (during the animation-delay
period):
Example
div {
width:
100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode:
backwards;
}
Try it
Yourself »
The following example lets the <div> element get the style values set
by the first keyframe before the animation starts, and retain the style
values
from the last keyframe when the animation ends:
Example
div {
width:
100px;
height: 100px;
background:
red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Try it
Yourself »
Example Explained
HTML: Use a container element (like <div>) and add the
"tooltip" class to it. When the user mouse
over this <div>, it will show the
tooltip text.
The tooltip text is placed inside an inline element (like <span>) with
class="tooltiptext".
CSS: The tooltip class use
position:relative,
which is needed to position the tooltip text (position:absolute).
Note: See examples below on how to position the tooltip.
The tooltiptext class holds the actual
tooltip text. It is
hidden by default, and will be visible on hover (see below). We have also
added
some basic styles to it: 120px width, black background color, white text
color,
centered text, and 5px top and bottom padding.
The CSS border-radius property is used to
add rounded corners to the tooltip
text.
The :hover selector is used to show the
tooltip text when the user moves the
mouse over the <div> with class="tooltip".
Positioning Tooltips
In this example, the tooltip is placed to the right (left:105%) of the "hoverable"
text (<div>). Also note that top:-5px
is used to place it in the middle of its container element.
We use the number 5 because the tooltip text has a top and
bottom padding of
5px. If you increase its padding, also increase the value of the top property to
ensure that it stays in the middle (if this is something you want). The same
applies if you want the tooltip placed to the left.
Right Tooltip
.tooltip .tooltiptext {
top:
-5px;
left:
105%;
}
Result:
Hover over me
Tooltip text
Left Tooltip
.tooltip .tooltiptext {
top:
-5px;
right:
105%;
}
Hover over me
Tooltip text
If you want the tooltip to appear on top or on the bottom, see examples
below. Note that we use the margin-left
property with a value of minus 60
pixels. This is to center the tooltip above/below the hoverable text. It is
set
to the half of the tooltip's width (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width:
120px;
bottom: 100%;
left:
50%;
margin-left: -60px;
}
Hover over me
Tooltip text
Bottom Tooltip
.tooltip .tooltiptext {
width:
120px;
top:
100%;
left:
50%;
margin-left: -60px;
}
Hover over me
Tooltip text
Tooltip Arrows
To create an arrow that should appear from a specific side of the tooltip,
add "empty"
content after
tooltip, with the pseudo-element class ::after together
with the content
property. The arrow itself is created using borders. This will make the
tooltip
look like a speech bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
Bottom Arrow
.tooltip .tooltiptext::after {
content: "
";
position: absolute;
top: 100%;
left:
50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent
transparent transparent;
}
Hover over me
Tooltip text
Example Explained
Position the arrow inside the tooltip: top:
100% will place the arrow at the
bottom of the tooltip. left: 50% will
center the arrow.
Note: The border-width
property specifies the size of the
arrow. If you change this, also change the margin-left
value to the same. This
will keep the arrow centered.
The border-color is used to transform the
content into an arrow. We set the
top border to black, and the rest to transparent. If all sides were black,
you
would end up with a black square box.
This example demonstrates how to add an arrow to the top of the tooltip.
Notice that we set the bottom border color this time:
Top Arrow
.tooltip .tooltiptext::after {
content: "
";
position:
absolute;
bottom:
100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent
transparent
black transparent;
}
Hover over me
Tooltip text
This example demonstrates how to add an arrow to the left of the tooltip:
Left Arrow
.tooltip .tooltiptext::after {
content: "
";
position:
absolute;
top:
50%;
right: 100%;
margin-top:
-5px;
border-width: 5px;
border-style: solid;
border-color: transparent black
transparent transparent;
}
Hover over me
Tooltip text
This example demonstrates how to add an arrow to the right of the tooltip:
Right Arrow
.tooltip .tooltiptext::after {
content: "
";
position: absolute;
top: 50%;
left:
100%;
margin-top:
-5px;
border-width: 5px;
border-style: solid;
border-color: transparent
transparent
transparent black;
}
Result:
Hover over me
Tooltip text
Fade In Tooltips (Animation)
If you want to fade in the tooltip text when it is about to be visible, you
can use the CSS transition property
together with the opacity
property, and go from being completely invisible to 100% visible, in a
number of specified seconds
(1 second in our example):
Example
.tooltip .tooltiptext {
opacity:
0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity:
1;
}
CSS The object-fit Property
The CSS object-fit property is
used to specify how an
<img> or <video> should be resized to fit its container.
The CSS object-fit Property
The CSS object-fit property is used to
specify how an <img> or <video> should
be resized to fit its container.
This property tells the content to fill the container in a variety of ways;
such as
"preserve that aspect ratio" or "stretch up and take up as much space as
possible".
Look at the following image from Paris, which is 400x300 pixels:
However, if we style the image above to be 200x400 pixels, it will look like
this:
Example
img {
width:
200px;
height:
400px;
}
We see that the image is being
squeezed to fit the container of 200x400 pixels, and its
original aspect ratio is destroyed.
If we use object-fit: cover; it will cut off
the sides of the image,
preserving the aspect ratio, and also filling in the space, like this:
Example
img {
width:
200px;
height:
400px;
object-fit: cover;
}
Another Example
Here we have two images and we want them to fill the width of 50% of the
browser window and 100% of the height.
In the following example we do NOT use object-fit, so when
we resize the browser
window, the aspect ratio of the images will be destroyed:
In the next example, we use object-fit:
cover;, so when we resize the browser window, the aspect ratio of
the images
is preserved:
All Values of The CSS object-fit Property
The object-fit property can have the
following values:
fill - This is default. The replaced
content is sized to fill the element's content box. If necessary, the
object
will be stretched or squished to fitcontain - The replaced content is
scaled
to maintain its aspect ratio while fitting within the element's content
boxcover - The replaced content is sized
to maintain its aspect ratio while
filling the element's entire content box. The object will be clipped to
fitnone - The replaced content is not
resizedscale-down - The content is sized as if
none or contain were specified
(would result in a smaller concrete object size)
The following example demonstrates all the possible values of the object-fit property:
Example
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS Multiple Columns
CSS Multi-column Layout
The CSS multi-column layout allows easy definition of multiple columns of
text - just like in newspapers:
CSS Multi-column Properties
In this chapter you will learn about the following multi-column properties:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
CSS Create Multiple Columns
The column-count property specifies the
number of columns an element should
be divided into.
The following example will divide the text in the <div> element into 3
columns:
Example
div
{
column-count: 3;
}
CSS Specify the Gap Between Columns
The column-gap property specifies the gap
between the columns.
The following example specifies a 40 pixels gap between the columns:
Example
div
{
column-gap: 40px;
}
CSS Column Rules
The column-rule-style property specifies the
style of the rule between
columns:
Example
div
{
column-rule-style: solid;
}
The column-rule-width property specifies the
width of the rule between columns:
Example
div
{
column-rule-width: 1px;
}
The column-rule-color property specifies the
color of the rule between columns:
Example
div
{
column-rule-color: lightblue;
}
The column-rule property is a shorthand
property for setting all the column-rule-* properties above.
The following example sets the width, style, and color of the rule between
columns:
Example
div
{
column-rule: 1px solid lightblue;
}
Specify How Many Columns an Element Should Span
The column-span property specifies how many
columns an element should span across.
The following example specifies that the <h2> element should span
across all columns:
Example
h2 {
column-span: all;
}
Specify The Column Width
The column-width property specifies a
suggested, optimal width for the columns.
The following example specifies that the suggested, optimal width for the
columns
should be 100px:
Example
div {
column-width: 100px;
}
CSS Multi-columns Properties
The following table lists all the multi-columns properties:
| Property |
Description |
| column-count |
Specifies the number of columns an element should be divided
into |
| column-fill |
Specifies how to fill columns |
| column-gap |
Specifies the gap between the columns |
| column-rule |
A shorthand property for setting all the column-rule-*
properties |
| column-rule-color |
Specifies the color of the rule between columns |
| column-rule-style |
Specifies the style of the rule between columns |
| column-rule-width |
Specifies the width of the rule between columns |
| column-span |
Specifies how many columns an element should span across |
| column-width |
Specifies a suggested, optimal width for the columns |
| columns |
A shorthand property for setting column-width and column-count
|
CSS User Interface
CSS User Interface
In this chapter you will learn about the following CSS user interface
properties:
CSS Resizing
The resize property specifies if (and how)
an element should be resizable by the user.
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
The following example lets the user resize only the width of a <div>
element:
The following example lets the user resize only the height of a <div>
element:
The following example lets the user resize both the height and width of a
<div> element:
In many browsers, <textarea> is resizable by default. Here, we have
used the resize property to disable the resizability:
CSS Outline Offset
The outline-offset property adds space
between an outline and the edge or
border of an element.
This div has an outline 15px outside the border edge.
Note: Outline differs from borders! Unlike border, the outline is
drawn outside the element's border, and may overlap other content. Also,
the outline is
NOT a part of the element's dimensions; the element's total width and
height
is not affected by the width of the outline.
The following example uses the outline-offset property to
add space
between the border and the outline:
Example
div.ex1 {
margin:
20px;
border:
1px solid black;
outline: 4px solid
red;
outline-offset: 15px;
}
div.ex2 {
margin:
10px;
border:
1px solid black;
outline:
5px dashed blue;
outline-offset:
5px;
}
Try it
Yourself »
CSS User Interface Properties
The following table lists all the user interface properties:
| Property |
Description |
| outline-offset |
Adds space between an outline and the edge or border of an
element |
| resize |
Specifies whether or not an element is resizable by the user
|
CSS Variables - The var() Function
CSS Variables
The var() function is used to insert the
value of a
CSS variable.
CSS variables have access to the DOM, which means that you can create
variables with local or global scope, change the variables with JavaScript,
and
change the variables based on media queries.
A good way to use CSS variables is when it comes to the colors of your
design. Instead of copy and paste the same colors over and over again, you
can
place them in variables.
The Traditional Way
The following example shows the traditional way of defining some colors in a
style sheet
(by defining the colors to use, for each specific element):
Example
body { background-color:
#1e90ff;
}
h2
{ border-bottom:
2px solid #1e90ff;
}
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color:
#1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Syntax of the var() Function
The var() function is used to insert the
value of a
CSS variable.
The syntax of the var() function is as
follows:
| Value |
Description |
| name |
Required. The variable name (must start with two
dashes) |
| value |
Optional. The fallback value (used if the variable is not found)
|
Note: The variable name must begin with two dashes (--) and
it is case sensitive!
How var() Works
First of all: CSS variables can have a global or local scope.
Global variables can be accessed/used through the entire document, while
local variables can be used only inside the selector where it is declared.
To create a variable with global scope, declare it inside the :root
selector. The :root selector matches the
document's root element.
To create a variable with local scope, declare it inside the selector that is
going to use it.
The following example is equal to the example above, but here we use the
var() function.
First, we declare two global variables (--blue and --white). Then, we use the
var() function to insert the value of the
variables later in the style sheet:
Example
:root {
--blue:
#1e90ff;
--white: #ffffff;
}
body { background-color:
var(--blue); }
h2
{ border-bottom:
2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid
var(--blue);
padding: 5px;
}
Advantages of using var() are:
- makes the code easier to read (more understandable)
- makes it much easier to change the color values
To change the blue and white color to a softer blue and white, you just need
to change the two variable values:
Example
:root {
--blue:
#6495ed;
--white: #faf0e6;
}
body { background-color:
var(--blue); }
h2
{ border-bottom:
2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid
var(--blue);
padding: 5px;
}
CSS var() Function
| Property |
Description |
| Var() |
Inserts the value of a CSS variable |
CSS Overriding Variables
Overriding Global Variables With Local Variables
From the previous page we have learned that global variables can be
accessed/used through the entire document, while
local variables can be used only inside the selector where it is declared.
Look at the example from the previous page:
Example
:root {
--blue:
#1e90ff;
--white: #ffffff;
}
body {
background-color:
var(--blue);
}
h2
{
border-bottom: 2px solid
var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid
var(--blue);
padding: 5px;
}
Sometimes we want the variables to change only in a specific section of the
page.
Assume we want a different color of blue for button elements. Then, we can
re-declare the --blue variable inside the button selector. When we use
var(--blue)
inside this selector, it will use the local --blue variable value declared
here.
We see that the local --blue variable will override the global --blue
variable for the button elements:
Example
:root {
--blue:
#1e90ff;
--white: #ffffff;
}
body {
background-color:
var(--blue);
}
h2
{
border-bottom: 2px solid
var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--blue: #0000ff;
background-color: var(--white);
color: var(--blue);
border: 1px solid
var(--blue);
padding: 5px;
}
Add a New Local Variable
If a variable is to be used only one single place, we could also have
declared a new local variable, like this:
Example
:root {
--blue:
#1e90ff;
--white: #ffffff;
}
body {
background-color:
var(--blue);
}
h2
{
border-bottom: 2px solid
var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--button-blue: #0000ff;
background-color: var(--white);
color:
var(--button-blue);
border: 1px solid
var(--button-blue);
padding: 5px;
}
CSS var() Function
| Property |
Description |
| var() |
Inserts the value of a CSS variable |
© 2021 Created By "KARTIK A DIGITAL INFLUENCER" || All Rights Reserved
|