Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Articles
Page 123 of 130
How to eliminate blue borders around linked images using CSS?
A website with no visuals is boring, and even if it has a good design, most of us would probably prefer one with many graphics. Why is this the case? Images are a quick and easy way to enhance user experience on your website. 90% of the information we perceive and send to our brains is visual information. You may use images to attract attention and refocus your visitors' attention. They may be really helpful when it comes to communicating important information. Images are a fantastic emotional trigger that you can use to entice visitors and keep them reading your ...
Read MoreHow to create Pay Roll Management Webpage using JavaScript?
Nowadays, there are many companies and small-scale businesses rising and booming in the world. There are so many people working in these industries or firms. It has become a crucial task for the employer to manage the payment records of his employee. Thus, arises the need of proper payroll management system in every big or small firm. It is almost impossible for the employer to manually maintain the pay roll record of each and every employee in big firms. So, they need digital pay roll management system. In this article, we will discuss about how to create a pay ...
Read MoreHow to create Incoming Call Animation Effect using CSS?
Cascading style sheets (CSS) enables the developers to create visual effects to your web page which makes it attractive and user-friendly. CSS provides a variety of properties, such as colours, flexbox, grids, animation, shadowing, etc., to style the elements, resulting in a website that is appealing to many users and is user-friendly. In this article, we have discussed about how to design Incoming Call Animation effect using HTML and CSS. In order to create this effect, we will be using CSS animation property and box-shadow property. CSS Animations It enables the developers to add animation effects like moving, vibrating ...
Read MoreHow to disable browser print options (headers, footers, margins) from the page with CSS?
We can control the print preview page’s header, footer, and margin just with the help of CSS, and even achieve the desired layout and orientation of the paged media. We will be using @page directive to achieve our results. While previewing a print page in the browser, we see some extra page information, like page title, page preview date and time, and the page number in the preview, all present in the page’s header and footer. We also see some extra margin applied to the page preview media. Syntax @media print { @page { ...
Read MoreHow to create a printable webpage using CSS media queries?
We can create a printable webpage, and control the styling in the print preview of a page using the CSS media query print property, @media print. @media print is a CSS media query that allows us to add page styling to the print preview page of any webpage. Using this, we can create a printable webpage by specifying the “visibility” of an HTML element to “visible” or “hidden” under the given media query, We can also add any other styling we want to have in the print preview screen to the @media print query. Syntax @media print { ...
Read MoreHow to create numbering using counter-increment property in CSS?
The “counter-increment” property given in CSS is used to increase or decrease the counter values that we can display on a webpage using CSS. CSS counters are useful when we want to count the occurrences of an HTML element in a webpage. We will also use the “counter-reset” CSS property here, which helps us to reset or initialize the CSS counter value to a desired number. Syntax counter-increment − css-counter increment-value; Here, the css-counter refers to the counter variable declared in CSS, and the increment-value refers to the value by which you want to increment or ...
Read MoreHow to automatically close all collapsible elements inside of the accordion when closing the accordion?
We will use the bootstrap accordion component in our article to demonstrate how to collapse all the children's accordions inside the parent accordion. An accordion is a collapsible component that helps to display an expand/collapse type of content on the webpage. In this article, we will use the Bootstrap 5 Accordion component to display a list of expandable/collapsible elements in a nested fashion. Now, first, we will listen to the “hide” collapse event by attaching an event listener to the parent accordion. After that, when the “hide” collapse event gets fired, we will find all the collapsible elements inside that ...
Read MoreHow to Automatic Refresh a web page in a fixed time?
We can auto-refresh a web page by either using a “meta” tag with the “http-equiv” property, or by using the setInterval() browser API. Automatic refreshing websites have certain use cases to them, for example, while creating a weather-finding web application, we may want to refresh our website after a set interval of time to show the user the near-exact weather data for a location. Let’s look at the 2 approaches below to understand how to set up an auto-refreshing website. Approach 1 In this approach, we will use the “http-equiv” property of a “meta” tag to refresh our web application ...
Read MoreHow to auto-suggest rich content while searching in Google AMP?
To implement auto-suggestion of rich content to the user during the typing of an input field, we will use the “amp-autocomplete” script from the Google AMP framework. Autocompleting an input field implies suggesting relevant content to the user as and when the user starts typing. Let’s discuss the approach with an example, below − Approach We will use the “amp-autocomplete” script to add auto-suggestion of rich content on our webpage. We will also use the “amp-form” script from the Google AMP framework so as to use its amp-form component and display it in the UI, and the “amp-mustache” to give ...
Read MoreHow to arrange text in multi-columns using CSS3?
To arrange text in multi-columns we are using the “column-count” property of CSS3. The “column-count” property is used to divide an HTML element’s content into the number of columns specified. Here we are going to use two different example to demonstrate the application of “colum count” property of CSS to arrange text in 2 and 3 columns. Syntax column-count: n; Here, “n” is the positive integer value that represents the number of columns we want to arrange the text into. Example 1 In this example, we will arrange a “p” tag’s content into 3 columns by using ...
Read More