- 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
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
668 Views
Following is the code to create a responsive side navigation menu with CSS −Example Live Demo body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav { margin: 0; padding: 0; width: 150px; background-color: #2f77e4; position: fixed; height: 100%; overflow: auto; } nav a { display: block; color: rgb(255, 255, 255); font-weight: bolder; font-size: 20px; padding: 16px; text-decoration: none; } nav a.selected { background-color: rgb(15, 189, 20); color: rgb(255, 255, 255); } nav a:hover:not(.selected) { background-color: ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
289 Views
To create an animated, closable side navigation menu, provide a mechanism to close and open it on the click on a button. The menu is opened with a button and closed with x. The event listened is used for the same and the functions are called to set the width of the navigation menu. Let’s say the following is a button on a web page − On clicking the above button, the side navigation opens − Create a Button to Open the Menu First, set a button that will open the navigation menu − Click here to ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
219 Views
To add a search box, use the input type text on a web page. Set the search box inside the navigation menu. Let us first set how to create a responsive navigation menu and place the search box. Set the Navigation Menu and Search box in it To begin with, use the to create a navigation menu. The links are set using the element. Set input type="text" for the search box. This adds the search box inside the navigation menu − Home ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
708 Views
Following is the code for creating the responsive navigation menu with icons.Example Live Demo Document body{ margin:0px; margin-top:10px; padding: 0px; } nav{ width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; } .links:hover { background-color: rgb(100, 100, 100); } .selected{ background-color: rgb(0, 18, 43); } @media screen and (max-width: 600px) { .links { display: block; } } Home Login Register Contact Us More Info OutputThe above code will produce the following output −When the screen will be resized to 600px −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
208 Views
The design of the default checkboxes and radio buttons can be easily changed with CSS. The initial, selected and hovered properties can also be set for the checkboxes and radio buttons. Custom checkbox The following is the code to create a custom checkbox. First, set the containers for the checkboxes. A div container for each checkbox. The checkbox is created using the input type checkbox − Rice Flour Above, the 1st checkbox is by default checked using the checked attribute ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
1K+ Views
Following is the code to create a responsive navigation menu with a login form inside of it −Example Live Demo Document body { margin: 0px; margin-top: 10px; padding: 0px; } nav { width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; } .links:hover { background-color: rgb(100, 100, 100); } form { float: right; margin-top: 8px; } form input{ display: inline-block; ... Read More
![Aman Kumar](https://www.tutorialspoint.com/assets/profiles/524070/profile/60_2827218-1663927187.jpg)
3K+ Views
In this article, we will discuss how to create a vertical tab menu with CSS and JavaScript. Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user−friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive. There are several types of tabs which can be created and used in various cases − Horizontal tabs Horizontal with Secondary Tabs Frameless Horizontal Tabs Vertical Tabs Vertical Tabs with Second Tabs ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
874 Views
To create Icon Bar with CSS, you need to set the icons. Here, we will consider the Font Awesome icon. To include such icons, set the CDN for the icon under the . We will create a horizontal icon bar and a vertical bar. Set the CDN for the icons To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the element − Horizontal Icon Bar To create horizontal icon bar, set the width to 100% and the overflow property to auto − ... Read More
![Mahesh Parahar](https://www.tutorialspoint.com/assets/profiles/127878/profile/60_2277600-1655382864.jpg)
2K+ Views
'.' selector'.' selector is a class level selector. The dot operator is used to create a style class which can then be applied on multiple html elements.'#' selector'#' selector is an element level selector. Hash operator is used to applying style on a particular element whose id is the same as used in '#' selectorExampleFollowing the example, shows usage of '.' as well as '#' selector on three div elements. Selector Example>/title> .blackBorder { border: 2px solid black; } #redDiv { ... Read More