In this post, we will understand the difference between HTML and CSS HTML HTML refers to Hyper Text Markup Language. It helps create web pages and applications − It helps define structure of web page. It is a markup language. It helps create static pages as well. It helps display data. HyperText helps define link between multiple web pages. Markup Language helps define text document using tags, which gives a structure to the web page. It has less backup and support options. HTML can’t be used inside a CSS sheet. It helps annotate the text so that a system ... Read More

CSS animations allow us to display hidden elements. The elements can be set hidden using the opacity. Set the opacity to the value 0 and the element will hide. To display it, set the transition property with the opacity and also set the transition duration to make it look like fade in effect. Set the container The container div is set. Within that, set two child divs − Hide a child div A child div is set with the opacity value 0 to make it invisible when the ... Read More

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

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