- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with example. Both of them allows selecting sibling elements with HTML and CSS. Adjacent sibling selector Use the adjacent sibling selector (+), if we want to match the element which occurs immediately after the first selector. Here, both selectors are children of the same parent element. The syntax of the CSS adjacent sibling combinator is as follows − Selector + Selector{ attribute: /*value*/ } The following example illustrate CSS adjacent combinator property. ... Read More
The CSS child combinator is used to select all child elements of a parent element. The CSS descendant combinator is used to select all descendants of a parent element Child combinator The CSS child combinator is used to select all child elements of a parent element. The syntax of the CSS child combinator is as follows. The > comes between two selectors − Selector > Selector { attribute: /*value*/ } Example The following example illustrate the CSS child combinator − article ... Read More
The RGBA color value is for Red, Green, Blue and Alpha. The alpha is the color opacity i.e. a number between 0.0 and 1.0. Here, 1.0 would be for full opaque. Here, we can see the difference in opacity created with the Alpha parameter in RGBA. Syntax The following is the syntax of the RGBA Color Values − rgba(red, green, blue, alpha) Above, the following values are added to the rgba() method. Red Set the color as an − Integer between 0 and 255. Percentage between 0% and 100% Green Set the color as an − ... Read More
CSS animations allow us to display hidden elements. The elements can be set hidden using the opacity. Set the opacity to the value 0 and the element will hide. To display it, set the transition property with the opacity and also set the transition duration to make it look like fade in effect. Set the container The container div is set. Within that, set two child divs − Hide a child div A child div is set with the opacity value 0 to make it invisible when the ... Read More
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