CSS media types can be used to apply part of a style sheet based on the result of one or more media queries. CSS Different Media Types The following table lists the various media types that may used to target different types of devices such as printers, handheld devices, computer screens etc. Media Type Description all Used … Read more
CSS aural media is used to specify a block of CSS that applied only when the content is being presented using a speech synthesis device. You can see the output below: CSS Aural media-uses It can be used by following: Used by blind or visually impaired people Help users learning to read and right pronunciation … Read more
CSS Media queries are used to modify site or app depending on a device’s general type. CSS Media Queries-Uses Media queries used to check following things: width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution Media Queries-syntax CSS media query is composed of … Read more
CSS tooltip refers to a popup message that appears after a mouse hover, or when elements get keyboard focus. It disappears on mouse out, or when the element loses keyboard focus. CSS Tooltip-Positions Top of the element Left side of the element Right side of the element Bottom of the element Right side of the … Read more
CSS MQ examples are as follows: CSS MQ Examples-responsive A responsive navigation menu: Media queries for column: Mediq query can hide elements on different screens: Media query can change layout of a page also: Media query can also change the font size:
CSS object-fit property defines how an element responds to the height and width of its content box. It sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. Object-fit values fill: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio. … Read more
CSS Specificity is the set of the rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher point value it accrues, and the likelier it is to be present on the element’s style. CSS Specificity-Calculation Specificity is a weight that … Read more
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. CSS Transition-Properties Following are the properties: transition transition-delay transition-duration transition-timing-function Transition-Delay Transition-delay property specifies a delay (in seconds) for the … Read more
CSS flex box is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”). CSS … Read more
A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down … Read more
