The fixed navigation bar fix on the web page using the position property and even on scroll it remains intact. It sticks to the top. On a lot of websites these days, the navigation bar fix to the top. The top property is also used. By specifying the CSS position property, we can create a fixed navigation bar using CSS. The syntax of position property in CSS is as follows − Selector { position: /*value*/; } Above, the value of the position property is fixed to set the fixed navigation bar. Set a container ... Read More

By applying various CSS styles to the element with the sticky position, we can easily detect when an element gets fixed. Set the Sticky Navbar Div Create divs and set the navbar − Watch Me! Style the Top Navbar Set the height of the Top Navbar that will be fixed on the web page − #navbar-top { background-color: lightgrey; height: 2px; } Set the Container div With Position Fixed This will show the detection − #container { position: sticky; top: ... Read More

To render a huge number of images in a website, it is advisable to use webp format as it provides better compression. We use the element to provide a fallback for unsupported browsers − To set the images, the srcset attribute of the element is used. The tag allows a user to specify multiple media resources for elements, like , , etc. Using the tag, set alternative image files to allow the web browser to ... Read More

CSS object-fit and object-position property helps us crop images and specify how it is displayed in an element.The syntax of CSS object-fit property is as follows −Selector {    object-fit: /*value*/    object-position:/*value*/ }ExampleThe following examples illustrate CSS object-fit property. Live Demo img {    object-fit: cover; } img:last-of-type {    object-fit: contain; } cover contain OutputThis will produce the following result −Example Live Demo div {    border: 1px solid blue;    width:100%;    height:300px; } img {    float:left;    width:50%;    height:100%;    object-fit:cover;    object-position: 20px -10px; } OutputThis will produce the following result −Effect of resizing

The CSS child combinator is used to select all child elements of a parent element. The CSS descendant combinator is used to select all descendants of a parent element Child combinator The CSS child combinator is used to select all child elements of a parent element. The syntax of the CSS child combinator is as follows. The > comes between two selectors − Selector > Selector { attribute: /*value*/ } Example The following example illustrate the CSS child combinator − article ... Read More

To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with example. Both of them allows selecting sibling elements with HTML and CSS. Adjacent sibling selector Use the adjacent sibling selector (+), if we want to match the element which occurs immediately after the first selector. Here, both selectors are children of the same parent element. The syntax of the CSS adjacent sibling combinator is as follows − Selector + Selector{ attribute: /*value*/ } The following example illustrate CSS adjacent combinator property. ... Read More

The CSS ::first-line pseudo-element helps us style first line of an elementThe following examples illustrate CSS ::first-line pseudo-element.Example Live Demo body {    text-align: center;    background-color: darkorchid; } ::first-line {    font-size: 2em;    color: black;    font-weight: bold;    text-shadow: 0 -10px grey; } Donec rutrum a erat vitae interdum. Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec ... Read More

CSS can help us style the first letter of an element using the ::first-letter pseudo-element. Note that punctuation marks, digraphs and content property can change the first-letter. The following examples illustrate CSS ::first-letter pseudo-element. Style the first letter The first letter of all the elements, such as and here are styled using the ::first-letter pseudo element − ::first-letter { font-size: 3em; color: sienna; box-shadow: -10px 0 10px green; background-color: gainsboro; } Example Let us see the example − ... Read More

By defining the CSS word-spacing property, we can set the amount of white space between the words. The whitespace between the words can be increased or decreased. It can be set in the following CSS units: px, pt, em, cm, etc. Let us see the syntax. Syntax The following is the syntax of the word-spacing property − word-spacing: value; The value can be − normal − Normal spacing between words length − Space between words set in pt, px, cm, etc. The following examples illustrate CSS word-spacing property. Word Spacing in cm The word spacing ... Read More

The CSS scroll-behavior property allows us to change the behavior of scroll. The following are the values are set within the scrolling box − auto − A scroll effect is set between the elements within the scrolling box. Smooth − A smooth animated scroll effect is set between the elements The following examples illustrate CSS scroll-behavior property. Scroll Behavior Smooth The scroll behavior is set to smooth for the div container − #parent { scroll-behavior: smooth; width: 250px; height: 200px; overflow-y: scroll } The ... Read More