The general layout of any website is mostly the same. There are basically 4 parts: Header Menus Content Footer This layout of websites is called the website layout. There are numerous other layouts for the websites used in different genres of websites, but this layout is pretty standard for most. So let’s take a look … Read more
Sometimes a selector may not be a simple element but a group of multiple selectors being styled in a similar fashion. These multiple simple selectors may have some dependency/relationship with one another. To define such relationships. CSS uses what is called a Combinator. So, if a selector contains more than one simple selectors, we can … Read more
CSS has a list of inbuilt functions that can be used as the value for different CSS properties. Here’s the list of the functions with a small description for each one of them. [table id=15 /]
Pagination is somewhat similar to a navigation bar except that it has different page numbers that you can directly access. The list contains a series of page numbers (consecutive) and generally has forward and backward buttons at the end to navigate to next page. Pagination is very useful when the website containing data that is … Read more
The tooltip element of the web-page is useful to provide some information about other elements (mostly form fields). We cannot give all the information about the element in the label due to obvious reasons. Therefore, the tooltip specifies the additional information to help the user understand the elements every time they hover the mouse over … Read more
Pseudo-elements can control the styling of specific parts of the elements. The pseudo-elements have a double colon before them and can be used by being added after the selectors like selector::pseudo-element{…} The pseudo-elements supported by CSS are: ::first-line ::first-letter ::after ::before ::selection ::first-line This is to stylize the first line of the text content. You … Read more
The actual rendered width and height of any element is calculated by including the width and height set along with that of its padding and borders. However, CSS has a way to include these two within the total height and width of the element. This is where Box Sizing comes in picture. Here’s the default … Read more
Media query was introduced in CSS3. The feature uses the @media rule which helps us to include certain CSS properties only if some conditions are met. Breakpoint Firstly, we can start with the breakpoints. Even if they’re responsive, the web-pages may, sometimes, not look very good on small screens. To solve this issue, Media Query … Read more
CSS had four known layout modes before the Flexbox Layout module was introduced. We had: Block Inline Table Positioned With the help of flexbox or the Flexible Box Layout Module we can easily design a flexible responsive layout structure that does not need float or positioning. Elements To start with, we need to define what … Read more
CSS can help you put the text content in multiple columns just like the newspapers do. This makes a large amount of text more presentable and also optimizes the space usage. The multi-column layout is used for this purpose. To achieve the multi-column layout on the web-pages, we need to know about these following properties: … Read more
