Found 1564 Articles for CSS

The marker-offset property allows you to specify the distance between the marker and the text relating to that marker.Example                            LAN          WAN          

The list-style serves as shorthand for the preceding properties. The list-style allows you to specify all the list properties into a single expression.Example                            Table          Chair          

The padding-left specifies the left padding of an element. It sets the left padding of an element. This can take a value in terms of length of %.Eaxmple                                This is demo content.                           This is another demo content.            

The following image justifies the difference between collapse and separate. The separate value of the border-collapse property separates the borders of the cells:ExampleYou can try to run the following code to understand the difference between border-collapse separate and collapse value:                    table.one {             border-collapse:collapse;          }          table.two {             border-collapse:separate;          }          td.a {             border-style:dotted;             border-width:2px;             border-color:#000000;             padding: 20px;          }          td.b {             border-style:solid;             border-width:2px;             border-color:#333333;             padding:20px;          }                              Border Collapse           India           Australia                            Border Separate           India           Australia          

Parent selectors are not present in CSS3. There is a proposed CSS4 selector, $, to do so, which could look like this (Selecting the li element) −ul $li ul.sub { ... }As an alternative, with jQuery, a one-liner you could make use of would be this. The: has() selector selects all elements that have one or more elements inside of them, that matches the specified selector. The tag defines a list item. The tag defines an unordered (bulleted) list.$('ul li:has(ul.sub)').addClass('has_sub');You could then style the li.has_sub in your CSS.

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).In the below-given example, no height is specified in percentage and no jQuery is needed.mainbody{      position: absolute;//here we are setting the position of an element as absolute    top: 30px; /* here we are defining Header Height to 30 px */    bottom: 10px; /*here we are defining  Footer Height to 10 px */    width: 100%;// here we are setting the width to 100% }

To debug CSS/JavaSript hover issues, you need to follow the below-given steps, Press F12 to open Inspect Element, in Firefox. In the DOM view right-click the element, and Select :hover, :active or :focus at the bottom of the context menuThe following screenshot shows how to debug hover issues −

A favicon is a little icon visible on the web browser tab, just before the page title. It is generally a logo with the smaller size.You cannot add the size using CSS. The standards do not support adding Favicon size using CSS. Let’s add it using attributes,The result after adding Favicon above will be,

With HTML, you can easily limit input length. However, with CSS3, it will not be possible, since CSS can’t be used to limit the number of input characters. This will cause a functional restriction.CSS deals with presentation i.e. how your web page will look. This is done with HTML attribute malength, since it’s for behavior.Let’s see how to do it in HTML −ExampleYou can try to run the following code to limit input text lengthLive Demo           HTML maxlength attribute                        Student Name                    

Creating a modal popup means adding a dialog box, which generates on click of a button and close when user clicks anywhere outside of the popup.Here’s how a popup looks like below with header and a text. You can also add a footer to it −To create a modal popup using CSS and JavaScript, try to run the following code −ExampleLive Demo                    .popup {             display: none;             position: fixed;             z-index: 1;   ... Read More