Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Media Queries is a CSS technique for different style rules for different size devices such as mobiles, desktops, etc. To set the responsiveness, use the Media Queries concept. Let us see how to create responsive column cards on a web page. We will see various examples for responsive web design The screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints. Different screen sizes responsiveness Let us see an example where we will set different styles for different devices and display responsiveness The common ... Read More
To reorder the individual Flex Items using CSS3, use the order property. Remember, this works only in case of flex items. Let’s say you want to set the 1st flex item as the last, then achieve this using the CSS order property. Set the parent container Set a div container with child divs − First Div Second Div Third Div The flex container Set the above container as a flex using the display property with the value flex − .container { height: 150px; ... Read More
Relative length units in CSS are used to specify a length relative to another length property. Let use see some key units in CSS with the description − Sr.No Unit & Description 1 emRelative to the font-size of the element i.e 4em means 4 times the size of the current font. 2 exRelative to the x-height of the current font 3 chRelative to width of the 0 4 remRelative to font-size of the root element 5 vwRelative to 1% of the width of the viewport* 6 ... Read More
CSS Pseudo-elements can be applied on elements but also on CSS classes as well. First, let us see the pseudo-elements. The pseudo-elements allow styling specific parts of any elements, for example, insert content after an element, set CSS styles for the first line, etc. The following is the syntax − Syntax selector::pseudo-element { } The following are the pseudo elements − ::after − Insert something after the content of specific element ::before − Insert something before the content of a specific element ::first-letter − Selects the first letter of a specific element ::first-line − Selects the first ... Read More
The CSS background-image property is used to set an image as a background for the selected element. The url() is used in the background-image to set the image source. Syntax The syntax of CSS background-image property is as follows − Selector { background-image: /*value*/ } The following can be the values − url('URL') − The image url i.e., the source conic-gradient() − Place a conic gradient as the background image. linear-gradient() − Place a linear gradient as the background image. radial-gradient() − Place a radial gradient as the background image. repeating-conic-gradient() − Repeat a ... Read More
The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc. Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child = To select the first child of an element’s parent :first-of-type = To select the first element of its parent :focus = To select the element that has focus :hover = To select ... Read More
For multiple transitions, use the CSS3 transition property, which is a shorthand property. It sets the property, duration, timing, and delay of the transition in a single line. Let’s say we changed the width and border-radius for the transition. transition: width 2s, border-radius 2s; Set the container div To begin with, set a parent div − Set the transition The transition is set using the transition property for the width and border-radius properties. The duration set is 2 seconds − .container div { width: 300px; ... Read More
Outline doesn’t take up space and is displayed around the border if set. It is used for highlighting elements and we can’t specify whether individual sides should have an outline or not. Like borders, outline is not displayed by default. In some browsers, say Firefox, focused elements are displayed with a thin outline. Borders can be customized to a greater extent. We style individual sides of a border and round their edges. Borders take up space and affect the box-sizing. Outlines The outline is drawn outside the borders. It is a line drawn around elements. The following are the properties. ... Read More
By defining the CSS word-spacing property, we can set the amount of white space between the words. The whitespace between the words can be increased or decreased. It can be set in the following CSS units: px, pt, em, cm, etc. Let us see the syntax. Syntax The following is the syntax of the word-spacing property − word-spacing: value; The value can be − normal − Normal spacing between words length − Space between words set in pt, px, cm, etc. The following examples illustrate CSS word-spacing property. Word Spacing in cm The word spacing ... Read More
By specifying padding of an element in percentage, we can maintain its Aspect Ratio. The aspect ratio is the ratio of image’s width to its height. The aspect ratio can also be maintained using the aspect-ratio property. Aspect ratio for videos with the padding-top property Use the padding-top property to set the aspect ratio of an element on a web page. Here is the CSS padding property − The padding-bottom specifies the bottom padding of an element. The padding-top specifies the top padding of an element. The padding-left specifies the left padding of an element. The padding-right specifies the ... Read More