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

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

To create a Menu Icon with CSS, the code is as follows −Example Live Demo div {    width: 40px;    height: 7px;    background-color: blue;    margin: 5px 2px; } > Sample Menu Icon OutputThis will produce the following output −

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

'.' 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

We can define the border color and outline color for an element. Unlike borders, outline doesn’t take up any space. The border-color property is used to set an element’s border color and the outline-color property is used to set its outline color. Syntax The syntax for CSS border-color and outline-color property is as follows − /*for setting border-color*/ Selector { border-color: /*value*/ } /*for setting outline-color*/ Selector { outline-color: /*value*/ } The following examples illustrate CSS border-color and outline-color property − Set Outline and Border for Span and div In this example, ... Read More

The CSS color property is used to change the text color of an element. We can specify values as standard color name, rgb(), rgba(), hsl(), hsla() and hexadecimal value.SyntaxThe syntax for CSS color property is as follows −Selector {    color: /*value*/ }The following examples illustrate CSS color property −Example Live Demo div {    height: 50px;    width: 50px;    float: right;    color: white;    background-color: #2f5587; } p {    color: rgba(225, 5, 135, 0.7);    border: 2px solid #16c618;    box-shadow: 0 7px 0 5px hsl(90, 60%, 70%); } Example Heading ... Read More

CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space. In this article, we will be understanding how to apply grouping selectors in CSS. Applying Grouping Selectors in CSS We have applied grouping selector using element name and using id of the element. We have used div and article element as grouping selector to apply background-color, color and text-align properties to div and article tag making it center ... Read More

The CSS general sibling selector is used to select all elements that follow the first element such that both are children of the same parent. Syntax The syntax for CSS general sibling selector is as follows element ~ element { /*declarations*/ } The following examples illustrate CSS general sibling selector − Example 1 In this example, we have tags. We also have a tag between two tags − We provide learning tutorials, quizzes and video tutorials. Tutorials on databases and programming ... Read More

The CSS font-size property can be set with absolute and relative keywords. This scales the text as desired.SyntaxThe syntax of CSS font-size property is as follows −Selector {    font-size: /*value*/ }The following table lists the standard keywords used in CSS −Sr.NoValue & Description1mediumSets the font-size to a medium size. This is default2xx-smallSets the font-size to an xx-small size3x-smallSets the font-size to an extra small size4smallSets the font-size to a small size5largeSets the font-size to a large size6x-largeSets the font-size to an extra-large size7xx-largeSets the font-size to an xx-large size8smallerSets the font-size to a smaller size than the parent element9largerSets ... Read More