- 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
Found 1566 Articles for CSS
![Sreemaha](https://www.tutorialspoint.com/assets/profiles/13570/profile/60_64977-1512709068.jpg)
2K+ Views
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
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
7K+ Views
To add a border around navbar, set border to ul { border: 2px solid blue; }ExampleYou can try to run the following code to set borderLive Demo ul { list-style-type: none; margin: 0; padding: 0; width: 200px; border: 2px solid blue; } li a { display: block; background-color: #F0E7E7; } .active { background-color: #4CAF50; color: white; } li { text-align: center; border-bottom: 1px solid #555; } Home Company Product Services Contact
![Prabhas](https://www.tutorialspoint.com/assets/profiles/13554/profile/60_90506-1512543588.jpg)
653 Views
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
![varun](https://www.tutorialspoint.com/assets/profiles/13559/profile/60_29674-1512637943.jpg)
210 Views
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
![Giri Raju](https://www.tutorialspoint.com/assets/profiles/13536/profile/60_72105-1512540773.jpg)
1K+ Views
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
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
640 Views
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
![varun](https://www.tutorialspoint.com/assets/profiles/13559/profile/60_29674-1512637943.jpg)
262 Views
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
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
406 Views
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
![usharani](https://www.tutorialspoint.com/assets/profiles/13564/profile/60_32161-1512638316.jpg)
234 Views
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
![varma](https://www.tutorialspoint.com/assets/profiles/13568/profile/60_26300-1512638592.jpg)
148 Views
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