Front End Technology Articles - Page 647 of 860

The selectors in CSS are patterns to select the element to style.Let us see the key selectors in CSS −SelectorDemoDescription class.demoSelects all elements with class="demo"#id#myidSelects the element with id="myid"**Used to select all the elements

The descendant selector in CSS is used to match all elements that are descendants of a specified element.ExampleYou can try to run the following code to implement CSS Descendent Selector:Live Demo                    div p {             background-color: orange;          }                              Para 1 in the div          Para 2 in the div             Para 3 outside the div.     Output

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

To align elements using the float property in CSS, you can try to run the following code −ExampleLive Demo                    .demo {             float: right;             width: 200px;             border: 1px dashed blue;             padding: 5px;          }                     Heading                This is demo text and right aligned.           Output

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

The CSS overflow-y allows you to decide what to do with the top bottom edges of the content. You can try to run the following code to implement the overflow-y property −ExampleLive 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

The CSS overflow: auto, adds a scrollbar only when it's needed, unlike overflow:scroll. You can try to run the following code to implement CSS overflow: auto property:ExampleLive Demo                    div {             background-color: orange;             width: 250px;             height: 45px;             border: 2px solid blue;             overflow: auto;          }                     Heading       Overflow property used here. This is a demo text to show the working of CSS overflow: auto. This won't hide the content. A scrollbar would be visible, only if needed.     Output

Use the CSS :only-child selector to style every element that is the only child of its parent.ExampleYou can try to run the following code to implement the :only-child selectorLive Demo                    p:only-child {             background: orange;          }                     Heading                This is a paragraph.                      This is a paragraph.          This is a paragraph.          This is a paragraph.           Output

In the CSS overflow property with value scroll, the overflow is clipped and a scrollbar gets added. This allows the user to read the entire content.ExampleYou can try to run the following code to implement CSS overflow: scroll property −Live Demo                    div {             background-color: orange;             width: 250px;             height: 45px;             border: 2px solid blue;             overflow: scroll;          }                     Heading       Overflow property used here. This is a demo text to show the working of CSS overflow: scroll. This won't hide the content. Now a scrollbar will be visible.     Output

One of the most crucial components of the website or application is the navbar. It usually sits at the top of your application and makes it simple for users to go to the most important areas or pages of your website or app. The major sections of your website are essentially linked from a navbar. These links are commonly known as navigation items, and you can choose to align them to the left, center, or right. Centering the Navigation Bar Depending on the HTML and CSS that you have already used to create it, centering the navbar might be both ... Read More