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
Front End Technology Articles
Page 473 of 652
Role of CSS: disabled Selector
Use the CSS :disabled selector to style every disabled element. You can try to run the following code to implement the :disabled selectorExampleLive Demo input:enabled { background: blue; } input:disabled { background: red; } Subject Student: Age:
Read MoreCSS Child Selector
Use the child selector, if you want to select all elements immediate children of a specified element.div > pExampleYou can try to run the following code to implement CSS Child SelectorLive Demo div > p { background-color: orange; } Para 1 in the div. Para 2 in the div. Para 3 outside the div. Output
Read MoreCSS overflow-x
The CSS overflow-x allows you to decide what to do with the left right edges of the content.ExampleYou can try to run the following code to implement the overflow-x propertyLive Demo div { background-color: orange; width: 250px; height: 45px; border: 2px solid blue; overflow-x: hidden; overflow-y: scroll; } Heading Overflow property used here. This is a demo text to show the working of CSS overflow-x and overflow-y. Output
Read MoreCreate a link button with borders using CSS
To create a link button with borders, you can try to run the following code −ExampleLive 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 MoreIs it possible to change the HTML content in JavaScript?
Yes, it is possible to change the content of the HTML in javascript. Usually HTML content will be in HTML tags such as , , etc. In javascript, we have DOM methods that have an ability to access the HTML tags. Those methods, such as document.getElementById(), document.getElementByTagName(), etc., make use of tags to change the HTML content.Example-1In the following example, the content in the span tag is changed using a javascript DOM method document.getElementById(). Live Demo Is javaScript is java. Once the above code is executed, we will get the following on the screen If we click ...
Read MoreOverlap Elements with CSS
To overlap elements, use the CSS z-index property. You can try to run the following code to implement the z-index property and set image behind the textExampleLive Demo img { position: absolute; left: 0px; top: 0px; z-index: -1; } This is demo text.
Read MoreShow the background image only once with CSS
Use the background-repeat property to display the background image only once. You can try to run the following code to implement the background-repeat property −ExampleLive Demo body { background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg"); background-repeat: no-repeat; } Background Image
Read MoreSet Responsive Font Size using CSS
To set the responsive font size, use the ‘viewport width’ and set it to ‘vw’ unit. You can try to run the following code to use ‘vw’ unit −ExampleLive Demo h1 { font-size:8vw; } This is demo heading This is demo text.
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 MoreRole of CSS :focus Selector
Use the :focus selector to select the element that has focus. You can try to run the following code to implement the :focus selectorExample input:focus { background-color: green; } Subject Student: Age:
Read More