CSS2 Introduced Media TypesThe @media rule, introduced in CSS2, made it possible to define different style rules for different media types. Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on. Unfortunately these media types never got a lot […]
Flexible boxes, or flexbox, is a new layout mode in CSS3. Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do […]
The CSS3 box-sizing property allows us to include the padding and border in an element’s total width and height. Without the CSS3 box-sizing PropertyBy default, the width and height of an element is calculated like this: width + padding + border = actual width of an elementheight + padding + border = actual height of […]
CSS3 has new user interface features such as resizing elements, outlines, and box sizing. In this chapter you will learn about the following user interface properties: resize outline-offset CSS3 Resizing The resize property specifies whether or not an element should be resizable by the user. The following example lets the user resize only the width […]
The CSS3 multi-column layout allows easy definition of multiple columns of text – just like in newspapers: CSS3 Multi-column PropertiesIn this chapter you will learn about the following multi-column properties: column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width CSS3 Create Multiple ColumnsThe column-count property specifies the number of columns an element should be divided into. […]
Learn how to create a responsive pagination using CSS. Simple PaginationIf you have a website with lots of pages, you may wish to add some sort of pagination to each page: Example .pagination { display: inline-block;}.pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none;} Try it Yourself […]
Learn how to style buttons using CSS. Basic Button Styling Example .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;} Try it Yourself » Button Colors Use the background-color property to change the background […]
Learn how to style images using CSS. Rounded ImagesUse the border-radius property to create rounded images: Example Rounded Image:img { border-radius: 8px;} Try it Yourself » Example Circled Image:img { border-radius: 50%;} Try it Yourself » Thumbnail ImagesUse the border property to create thumbnail images. Example img { border: 1px solid #ddd; […]
CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!Browser Support for Animations The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. What are CSS3 Animations?An animation lets an element […]
CSS3 allows you to format your elements using 3D transformations. Mouse over the elements below to see the difference between a 2D and a 3D transformation: Original […]
CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position. CSS3 supports 2D and 3D transformations. Mouse over the elements below to see the difference between a 2D and a 3D transformation: Original […]
CSS3 Web Fonts – The @font-face RuleWeb fonts allow Web designers to use fonts that are not installed on the user’s computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. Your “own” fonts […]
CSS3 contains several new text features. In this chapter you will learn about the following text properties: text-overflow word-wrap word-break Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -o- specify the first version that worked with a prefix. CSS3 Text OverflowThe CSS3 text-overflow property […]
With CSS3 you can add shadow to text and to elements. In this chapter you will learn about the following properties: text-shadow box-shadow Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- specifies the first version that worked with a prefix. CSS3 […]
CSS3 gradients let you display smooth transitions between two or more specified colors. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser. CSS3 defines two […]
CSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also introduces: RGBA colors HSL colors HSLA colors opacity Browser SupportThe numbers in the table specify the first browser version that fully supports CSS3 color values/property. RGBA ColorsRGBA color values are an extension of RGB color values with an alpha channel – which specifies […]
Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. CSS3 Multiple BackgroundsCSS3 allows you to add multiple background images for an element, through the background-image property. The different background images are separated […]
Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. CSS3 border-image PropertyThe CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element. […]
Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix. CSS3 border-radius PropertyWith CSS3, you can give any element “rounded corners”, by using the border-radius property. Here are three examples: 1. Rounded corners for […]
