email Feedback About This Page
Use border-radius property to give any element rounded corners.
📚w3schools CSS Rounded Corners
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 |
With border-image property can set an image to be used as the border around an element.
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 |
Add multiple background images to one element.
📚 w3schools CSS Multiple Backgrounds
The CSS background-size property allows specifying the size of background images.
The size can be specified in:
lengths
percentages
or by using one of the two keywords:
contain
or
cover
Scales 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.
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.
Define Sizes of Multiple Background Images
The background-size property can accept multiple values for background size using a comma-separated list, when working with multiple backgrounds.
Full Size Background Image
Want: put a background image on a website that covers the entire browser window at all times.
The requirements are as follows:
html { background:url(img_man.jpg) no-repeat center fixed; background-size:cover; }
Hero Image
Use different background properties on a <div> to create a hero image - a large image with text - and place it where it is wanted.
.hero-image { background: url(img_man.jpg) no-repeat center; background-size: cover; height: 500px; position: relative; }
CSS background-origin Property
background-origin property specifies where the background image is positioned.
#example1 { border:10px solid black; padding:35px; background:url(img_flwr.gif); background-repeat:no-repeat; background-origin:content-box; }
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 supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.
Display smooth transitions between two or more specified colors.
Two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
To create a linear gradient you must define at least two color stops.
Color stops are the colors wanted to render smooth transitions among. A starting point and a direction (or an angle) along with the gradient effect can be set.
To have more control over the direction of the gradient, can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
The angle is specified as an angle between a horizontal line and the gradient line.
CSS gradients also support transparency, which can be used to create fading effects.
Use the rgba() function to define the color stops to add transparency.
The last parameter in the rgba() function can be a value from 0 to 1 , and it defines the transparency of the color:
0 indicates full transparency
1 indicates full color (no transparency)
📚 w3schools CSS Radial Gradients
Defined by its center.
To create a radial gradient must define at least two color stops.
By default:
shape = ellipse
size = farthest-corner
position is center
Radial Gradient - Evenly Spaced Color Stops (this is default)
Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
The shape parameter defines the shape. It can take the value:
circle
or
ellipse
The default value is ellipse.
The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner
The repeating-radial-gradient() function is used to repeat radial gradients.
CSS Gradient Properties | |
---|---|
Property | Description |
background-image | Sets one or more background images for an element |
Can add shadow to text and to elements.
📚 w3schools CSS Shadow Effects
The following properties:
text-shadow
box-shadow
text-shadow property applies shadow to text.
box-shadow property applies shadow to elements.
Available text effects:
text-overflow
word-wrap
word-break
writing-mode
CSS Text Effect Properties | |
---|---|
Property | Description |
text-align-last | Specifies how to align the last line of a text |
text-justify | Specifies how justified text should be aligned and spaced |
text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
word-break | Specifies line breaking rules for non-CJK scripts |
word-wrap | Allows long words to be able to be broken and wrap onto the next line |
writing-mode | Specifies whether lines of text are laid out horizontally or vertically |
Web fonts allow Web designers to use fonts that are not installed on the user's computer:
TrueType Fonts (TTF)
OpenType Fonts (OTF)
The Web Open Font Format (WOFF)
The Web Open Font Format (WOFF 2.0)
SVG Fonts/Shapes
Embedded OpenType Fonts (EOT)
CSS Font Descriptors | ||
---|---|---|
Descriptor | Values | Description |
font-family | name | Required. Defines a name for the font |
src | URL | Required. Defines the URL of the font file |
font-stretch |
normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
font-style |
normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
font-weight |
normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
Allow you to move, rotate, scale, and skew elements.
CSS 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 |
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 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 |
Allows changing property values smoothly, over a given duration.
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 |
Allows animation of HTML elements without using JavaScript or Flash!
CSS Animation Properties | |
---|---|
Property | Description |
@keyframes | Specifies the animation code |
animation | A shorthand property for setting all the animation properties |
animation-delay | Specifies a delay for the start of an animation |
animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
animation-duration | Specifies how long time an animation should take to complete one cycle |
animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
animation-iteration-count | Specifies the number of times an animation should be played |
animation-name | Specifies the name of the @keyframes animation |
animation-play-state | Specifies whether the animation is running or paused |
animation-timing-function | Specifies the speed curve of the animation |
Create tooltips with CSS.
4 parts to creating a tooltip with CSS for each part:Types of tooltips that can appear when the mouse is over an element:
Basic Tooltip
Positioning Tooltips
Tooltip Arrows
Fade In Tooltips (Animation)
📚 w3schools CSS Styling Images
Rounded Images
Use the border-radius property to create rounded images
Thumbnail Images
Use the border property to create thumbnail images
Responsive Images
will automatically adjust to fit the size of the screen
Center an Image
set left and right margin to auto and make it into a block element
Polaroid Images/Cards
add text as caption
Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
Image Text
How to position text in/on an image
Image Filters
The CSS filter property adds visual effects (like blur and saturation) to an element
Image Hover Overlay
Create an overlay effect on hover
Flip an Image
flips image
Responsive Image Gallery
CSS can be used to create image galleries. This example use media queries to re-arrange the images
on different screen sizes
Image Modal (Advanced)
use CSS and JavaScript together
📚 w3schools CSS The object-fit Property
Used to specify how an <img> or <video> should be resized to fit its container.
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
fill
The default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit
contain
The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
cover
The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
none
The replaced content is not resized
scale-down
The content is sized as if none or contain were specified (would result in a smaller concrete object size)
Style buttons using CSS.
Basic Button Styling
default styling
Button Colors
Use background-color property to change the background color of a button
Button Sizes
Use font-size property to change the font size of a button
Rounded Buttons
Use border-radius property to add rounded corners to a button
Colored Button Borders
Use border property to add a colored border to a button
Hoverable Buttons
Use :hover selector to change the style of a button when you move the mouse over it.
Shadow Buttons
Use box-shadow property to add shadows to a button
Disabled Buttons
Use opacity property to add transparency to a button - creates a
disabled look.
Button Width
By default, the size of the button is determined by its text content - as wide as its content. Use width property to change the width of a button
Button Groups
Remove margins and add float:left to each button to create a button group
Bordered Button Group
Use border property to create a bordered button group
Vertical Button Group
Use display:block instead of
float:left to group the buttons below each other, instead of side by side
Button on Image
Animated Buttons
📚 w3schools CSS Pagination Examples
Create a responsive pagination using CSS.
Simple Pagination
Add some sort of pagination to each page
Active and Hoverable Pagination
Highlight the current page with an .active class, and use the :hover selector to change the
color of each page link when moving the mouse over them
Rounded Active and Hoverable Buttons
Add the border-radius property if you want a rounded active and hover button
Hoverable Transition Effect
Add the transition property to the page links to create a transition effect on hover
Bordered Pagination
Use the border property to add borders to the pagination
Rounded Borders
Tip: Add rounded borders to your first and last link in the pagination
Space Between Links
Tip: Add the margin property if you do not want to group the page links
Pagination Size
Change the size of the pagination with the font-size property
Centered Pagination
To center the pagination, wrap a container element (like <div>) around it with text-align:center
Breadcrumbs
Another variation of pagination is so-called breadcrumbs
📚 w3schools 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-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 |
📚 w3schools CSS User Interface
CSS user interface properties:
resize
outline-offset
CSS 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 |
The var() function can be used to insert the value of a custom property.
Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope can use either the :root or the body selector.
The variable name must begin with two dashes (--) and is case sensitive!
The syntax of the var() function is as follows:
var(custom-name, value)
Value | Description |
---|---|
custom-name | Required. The custom property's name (must start with two dashes) |
value | Optional. The fallback value (used if the custom property is invalid) |
The CSS box-sizing property allows including the padding and border in an element's total width and height.
Without the CSS box-sizing Property
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
This means: when setting the width/height of an element, the element often appears bigger than set (because the element's border and padding are added to the element's specified width/height).
The box-sizing property solves this problem.
With the CSS box-sizing Property
The box-sizing property allows including the padding and border in an element's total width and height.
If setbox-sizing:border-box; on an element, padding and border are included in the width and height.
Since the result of using the box-sizing:border-box; is so much better, many developers want all elements on their pages to work this way.
The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing:border-box; for many form elements (but not all - which is why inputs and text areas look different at width:100%;).
Applying this to all elements is safe and wise.
CSS Flexbox Layout Module
Before the Flexbox Layout module, there were four layout modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Flexbox Elements
To start using the Flexbox model, need to first define a flex container.
Parent Element (Container)
The flex container becomes flexible by setting the display property to flex
The flex-direction property defines in which direction the container wants to stack the flex items.
The flex-wrap property specifies whether the flex items should wrap or not.
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
The justify-content property is used to align the flex items.
The align-items property is used to align the flex items.
The align-content property is used to align the flex lines.
Perfect Centering
SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered.
Child Elements (Items)
The direct child elements of a flex container automatically becomes flexible (flex) items.
order
specifies the order of the flex items
flex-grow
specifies how much a flex item will grow relative to the rest of the flex items
flex-shrink
specifies how much a flex item will shrink relative to the rest of the flex items
flex-basis
specifies the initial length of a flex item
flex
a shorthand property for the flex-grow, flex-shrink, and flex-basis properties
align-self
specifies the alignment for the selected item inside the flexible container
overrides the default alignment set by the container's align-items property
Responsive Image Gallery using Flexbox
Use flexbox to create a responsive image gallery that varies between:
four images
two images
or
full-width images
depending on screen size.
Responsive Website using Flexbox
Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content.
CSS Flexbox Properties | |
---|---|
Property | Description |
display | Specifies the type of box used for an HTML element |
flex-direction | Specifies the direction of the flexible items inside a flex container |
justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
flex-flow | A shorthand property for flex-direction and flex-wrap |
order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
align-self | Used on flex items. Overrides the container's align-items property |
flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
Unfortunately these media types never got a lot of support by devices, other than the print media type.
Media queries in CSS3 extended the CSS2 media types idea:
Instead of looking for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
@media not|only mediatype and (expressions) { CSS-Code; }
The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Unless using the not or only operators, the media type is optional and the all type will be implied.
Can also have different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
CSS3 Media Types | |
---|---|
Value | Description |
all | Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
One way to use media queries is to have an alternate CSS section right inside the style sheet.
📚 w3schools CSS Media Queries - Examples
For a full overview of all the media types and features/expressions, look at:
📚 w3schools CSS @media Rule Reference
📚 w3schools CSS Media Queries - Examples
📚 w3schools To learn more about the Flexible Box Layout Module
📚 w3schools To learn more about Responsive Web Design
Can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called Landscape orientatio
📚 w3schools a full overview of all the media types and features/expressions
Tip: To learn more about responsive web design (how to target different devices and screens), using media query breakpoints, read the tutorial 📚 w3schools to learn more about responsive web design