Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Use Inline List Items to build a horizontal navigation bar. Set the <li> elements as inline.ExampleYou can try to run the following code to create horizontal navigation bar:Live Demo ul { list-style-type: none; margin: 0; padding: 0; } .active { background-color: #4CAF50; color: white; } li { border-bottom: 1px solid #555; display: inline; } Home Company Product Services Contact
To know Whether a string starts with a particular character or a string indexOf() method is used. But in the advanced applications, this method is obsolete. So, ES6 has provided us with startsWith() method to perform those advanced tasks.In the following example, the IndexOf() method is used to find whether the string is started with a particular character or not.ExampleLive Demo var text = 'Tutorialspoint' document.write(text.indexOf('T') === 0); OutputtrueIn the following example, instead of indexOf() method, startsWith() method is used to find whether the string is started with a particular string or not.ExampleLive Demo ... Read More
Use the background-attachment property to display the background image as fixed.ExampleYou can try to run the following code to implement the background-attachment property −Live Demo body { background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: right top; } Background Image
Use the border-top property in CSS to set all the top border properties in a single declaration.ExampleYou can try to run the following code to implement the border-top property −Live Demo p { border-style: solid; border-top: thick dashed #FFFF00; } This is demo text
The test() method is a regular expression method. It searches a string for a pattern, and returns true or false, depending on the result. If it encountered the given pattern it returns true, else returns false. It is case sensitive. Let's discuss it in detail.Example-1In the following example, a text named "Tutorix is the best e-learning platform" is given and a pattern "Tu" is checked whether it is present or not. Since the pattern is present the test() method returned true as output.Live Demo Tutorix is the best e-learning platform var text = document.getElementById("text").innerHTML; document.getElementById("test").innerHTML = /Tu/.test(text); ... Read More
To set a style to current link in a navigation bar, add style to .active. You can try to run the following code to style current link:ExampleLive Demo ul { list-style-type: none; margin: 5; padding: 5; } li a { display: block; width: 70px; background-color: #F0E7E7; } .active { background-color: #4CAF50; color: white; } Home Company Product Services Contact
To create a transparent box with CSS, you can try to run the following codeExampleLive Demo div { background-color: #808000; padding: 20px; } div.myopacity { opacity: 0.4; filter: alpha(opacity=80); } Heading Check trensparency in the below box: opacity 0.4 opacity 1
To set the opacity for the background color, use the opacity property with RGBA color values.ExampleYou can try to run the following code to implement the opacity property:Live Demo div { background: rgb(40, 135, 70); padding: 20px; } div.first { background: rgba(40, 135, 70, 0.2); } div.second { background: rgba(40, 135, 70, 0.6); } RGBA color values 20% opacity 60% opacity Default Opacity
To style all visited links, use the CSS :visited selector.ExampleYou can try to run the following code to implement the :visited selectorLive 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
Use the opacity property to add transparency to the background of an element. You can try to run the following code to work.ExampleLive Demo div { background-color: #808000; padding: 20px; } div.one { opacity: 0.2; filter: alpha(opacity=20); } div.two { opacity: 0.5; filter: alpha(opacity=50); } Heading Check transparency in the below section: opacity 0.2 opacity 0.5 opacity 1