The insertRule() helps us add a rule at a defined position in the stylesheet while deleteRule() deletes a specific style on a web page. The following examples illustrate CSS rules that can be added to a stylesheet using JavaScript. Insert a Rule To insert a rule at a defined position, use the insertRule() method. The margin, padding, and box-shadow is also set. First, the custom id is set using the getElementById() − let newSheet = document.getElementById('custom').sheet let cs = 'p {'; cs += 'margin: 4%;'; cs += 'padding: 2%;'; cs += 'font-size: 22px;'; cs += 'box-shadow: ... Read More

To return the height of an element, scrollable height, height including padding, border and scrollbar, then use these properties; clientHeight − The clientHeight gives the measure of the height of an element including the padding. Note that border, margin, and scrollbar height (if rendered) are not included in this. offsetHeight − The offsetHeight gives the measure of the height of an element including the vertical padding, top and bottom borders. Margin is not including here. scrollHeight − scrollHeight gives the measure of the height of an element including the vertical padding and the content which is not visible on ... Read More

Using JavaScript, we can set our TextArea element to automatically grow with its content. The following examples illustrate how we can achieve the above scenario. Let us say the following is our TextArea before adding content − The following is the TextArea after adding content − The following is the same TextArea that auto grows itself after adding more content − Auto Grow a Textarea Example Let us see how to auto grow a textarea − * { ... Read More

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

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