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
Articles by varma
54 articles
Set the coordinates of the area in an image map in HTML?
To set the coordinates of the area in an image map, Use the cords attribute in HTML to set the coordinates of the area in an image map in HTML.ExampleYou can try to run the following code to implement the cords attribute − HTML coords attribute
Read MoreSet the flex items horizontally with CSS
Use the flex-direction property with row value to set the flex-items horizontally.ExampleYou can try to run the following code to implement the row value −Live Demo .mycontainer { display: flex; flex-direction: row; background-color: #2C3E50; } .mycontainer > div { background-color: #F7F9F9; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6
Read MoreRole of CSS position: sticky;
To create a sticky navbar, use the position: sticky; property. You can try to run the following code to create a sticky navbar, ExampleLive Demo ul { list-style-type: none; position: sticky; overflow: hidden; top: 0; width: 100%; } li { float: left; ...
Read MoreRole of CSS :visited Selector
Use the CSS : visited selector to style all visited links.ExampleYou can try to run the following code to implement the :visited selector:Live demo a:link, a:visited { background-color: white; color: black; border: 1px solid blue; padding: 30px 30px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; color: white; } Demo Link
Read MoreRole of CSS :hover Selector
Use the CSS :hover selector to style links on mouse over with CSS. You can try to run the following code to implement the :hover selector −ExampleLive Demo a:hover { background-color: orange; } Qries Keep the mouse cursor on the above link and see the effect.
Read MoreCSS3 Linear gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom.ExampleYou can try to run the following code to implement linear gradients in CSS3 −Live Demo #grad1 { height: 100px; background: -webkit-linear-gradient(pink,green); background: -o-linear-gradient(pink,green); background: -moz-linear-gradient(pink,green); background: linear-gradient(pink,green); }
Read MoreAnimate CSS column-rule-color property
To implement animation on the column-rule-color property with CSS, you can try to run the following code:ExampleLive Demo div { width: 600px; height: 300px; background: white; border: 10px solid red; animation: myanim 3s infinite; bottom: 30px; position: absolute; column-rule: 10px inset ...
Read MoreSet whether the text of the element can be selected or not with CSS
Use the CSS user-select property to set whether the text of the element can be selected or not with CSS:ExampleLive Demo div { user-select: none; } This is demo heading This is demo text. You won't be able to select it.
Read MoreHTML5/CSS align list-items depending on other columns mutual height
Align list-item with the help of flex. Flex will make columns flexible according to content. The wrapper will layout columns in a row..wrap{ display : flex }// This will help wrapper to become flexible .wrap.col{ flex: 1 0 33%; }Flex is basically a property which helps in making element flexible.Use the following to keep the lists vertically aligned to the bottom −.col .content { margin-top: auto; }
Read MoreSelects all elements with class="mydemo" with CSS
To select all elements with class=”mydemo”, you can try to run the following code. Use the .class CSS selector to achieve this,ExampleLive Demo .demo { border: 2px dashed orange; } Heading 1 Heading 1 Heading 2
Read More