Grid Container To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows. The grid-template-columns Property The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a… Read More »
Child Elements (Items) A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows. The grid-column Property: The grid-column property defines on which column(s) to place an item. You define where the item will start,… Read More »
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Browser Support The grid properties are supported in all modern browsers. Google Chrome Internet Explorer Mozilla Firefox Safari Opera 57.0 16.0 52.0 10 44 Grid… Read More »
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. Browser… Read More »
CSS2 Introduced Media Types The @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 of… Read More »
CSS Box Sizing The CSS box-sizing property allows us to include 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 elementheight + padding + border = actual… Read More »
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… Read More »
CSS User Interface In this chapter you will learn about the following CSS user interface properties: resize outline-offset Browser Support The numbers in the table specify the first browser version that fully supports the property. Property Google Chrome Internet Explorer Mozilla Firefox Safari Opera resize 4.0 79.0 5.0 4.0 15.0 outline-offset 4.0 15.0 5.0 4.0… Read More »
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-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width Browser Support The numbers in the table specify the first browser version that… Read More »
Learn how to create a responsive pagination using CSS. Simple Pagination If you have a website with lots of pages, you may wish to add some sort of pagination to each page: Example <!DOCTYPE html> <html> <head> <style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none;… Read More »