Sometimes some CSS rules might conflict with each other due to the same target element. The browser, in this case, has some set of rules that it can used to decide the wined among the two (or more) rules. This issue resolving the set of rules is known as Specificity. It is like a score/rank … Read more
Dropdown menus are great for forms and navigation list when you have to pick from a list. The traditional dropdowns included a special button, on clicking which you get a list of options to select from. CSS has although made things easy for us. With the help of CSS properties, we can create hoverable dropdowns. … Read more
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
