A webpage with fluid sidebar and main content area is created by setting the size of html and body to 100%.The following example illustrates this.Example Live Demo html,body {    height: 100%;    color: white;    font-size: 2em;    line-height: 200px; } #parent {    display: table;    width: 100%;    height: 100%; } #side {    display: table-cell;    background-color: turquoise;    width: 20%;    vertical-align: top;    box-shadow: inset 0 0 10px black; } #main {    display: table-cell;    width: 80%;    background: url("https://images.unsplash.com/photo-1611944444060- b50a1d80cfe6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600"); } Side Main OutputThis will produce the following result −

A full-height page with a fixed sidebar and scrollable content area can be created by setting the height to 100% and applying proper positioning of elements.The following example illustrates the above.Example Live Demo .main {    margin-left: 140px;    font-size: 200%;    padding: 0 3%; } section {    height: 400px;    background-color: tomato; } .sidebar {    height: 100%;    width: 140px;    top: 0;    left: 0;    position: fixed;    background-color: darkslategrey;    padding-top: 20px; } .sidebar a {    display: block;    padding: 2% 4%;    text-decoration: none;    color: lightblue;    font-size: 1.4em; ... Read More

With the help of CSS animations, we can create a typewriter typing and deleting effect using JavaScript. The infinite effect is also set. The custom function will get called and the words will get display with the effect. At the end, those words will get deleted using another custom function. Set a div for the text and cursor First, a parent div container is set with the element. One of the will have text and another the cursorL | Style the element A professional font is ... Read More

CSS caret-color, pointer-events and tab-size are some of the lesser-known properties for form input fields. caret-color property allows us specify color of blinking caret while pointer-events can help prevent the users to find an element. Finally, tab-size sets the amount of white space used by tab. The following examples illustrate some of these properties. The tab-size property CSS tab-size property allows us to set the amount of whitespace used in tabs. The width of the tab character can be customized easily. The value set for the tab size is in spaces. Let us see the syntax. tab-size: value; ... Read More

By specifying different speeds for background and foreground content, we can create a parallax scrolling effect using CSS. On scrolling up and down, you can easily notice the difference, Mostly, you can find such effect on the home page of a website. Set the image First, place and image using the background-image property. With the url, the link of the background image is sourced − background-image: url("https://www.tutorialspoint.com/static/images/home/coding-groundhero.svg"); Set the height You need to set a minimum height using the min-height property − min-height: 500px; Create the parallax scrolling effect The parallax scrolling effect can be set ... Read More

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