The CSS * selector is a universal selector which is used to select all elements of the HTML DOM. If you want to set a similar style for the entire document, then use the Universal selector. Syntax The syntax for CSS universal selector is as follows: Place the styles you want to set for the entire HTML document − * { /*declarations*/ } The following examples illustrate CSS universal selector − Set the margins and padding for the document To set the margins and padding settings for all the elements on the web page, set ... Read More

In order to display an image marker properly in all browsers, a cross-browser solution is required. The text alignment after the image marker is sometimes distorted. To achieve a uniform output, we specify the image to be used as a marker as background and align it accordingly.ExampleThe following examples illustrate styling of lists − Live Demo ul{    list-style-type: none;    padding: 0px;    margin: 0px;    font-size: 1.5em; } ul li{    background-image: url("https://www.tutorialspoint.com/images/spring.png");    background-repeat: no-repeat;    background-position: 0px 5px;    padding-left: 24px; } Tutorials Java C# C C++ Spring Hibernate ... Read More

The CSS list-style-image property is used to set an image as a marker for the list item.SyntaxThe syntax of CSS list-style-image property is as follows −Selector {    list-style-image: /*value*/ }ExampleThe following examples illustrate CSS list-style-image property − Live Demo ul {    width: 150px;    list-style-image: url("https://www.tutorialspoint.com/images/Servlets.png");    background: goldenrod; } li {    text-align: center;    background: lavenderblush;    margin: 5px 30px; } Servlets Client Request Server Response Cookies Handling Session Tracking OutputThis gives the following output −Example Live Demo ul {    margin-left: 20px;    list-style-image: url("https://www.tutorialspoint.com/images/hibernate.png"); ... Read More

The CSS list-style-position property is used to set the marker position of list items. The default value for this property is outside which sets the marker outside the list item. It is having the following values − inside − The bullet points are positioned inside the list item outside − Default. The bullet points are positioned outside the list item Syntax The syntax of CSS list-style-position property is as follows − Selector { list-style-position: /*value*/ } The following examples illustrate CSS list-style-property − Position List Markers Outside the List Items We have positioned ... Read More

The CSS list-style-type property is used to style the marker of list items. We can apply these styles to both unordered and ordered lists.SyntaxThe syntax of CSS list-style-type property is as follows −Selector {    list-style-type: /*value*/ }ExampleThe following examples illustrate the styling of lists Live Demo ol li {    padding: 5px;    list-style-type: lower-roman; } li:last-child {    font-size: 1.2em;    font-style: italic;    list-style-type: circle; } demo1 demo 2 demo a demo b demo 3 OutputThis gives the following output −Example Live Demo ... Read More

CSS background properties help us style the background of elements. The CSS background property is a shorthand for specifying the background of an element. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.SyntaxThe syntax of CSS background property is as follows−Selector {    background: /*value*/ }ExampleThe following examples illustrate CSS background property − Live Demo #main {    margin: auto;    width: 300px;    background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");    background-repeat: no-repeat;    background-size: cover; } #im {    height: 200px;    width: 200px;    background-image: url("https://www.tutorialspoint.com/images/css.png");    background-repeat: no-repeat;    background-position: center; } ... Read More

The CSS border-width property is used to specify the width for border of an element. We can also set width for individual sides using the following properties − border-top-width border-right-width border-left-width border-right-width Syntax The syntax of the CSS border-width property is as follows − Selector { border-width: /*value*/ } The value can be thin, thick, or medium. Set a thick border The following example illustrate CSS border-width property. The thick border is set using the border-width property − border-width: thick; Example Let us see the example − ... Read More

We can define borders for an element and style them using CSS. The CSS border property is used to define the border properties for an element. It is a shorthand for border-width, border-style and border-color. Furthermore, images can be specified as a border.SyntaxThe syntax of CSS border property is as follows −Selector {    border: /*value*/ }ExampleThe following examples illustrate CSS border property − Live Demo p {    border: 70px solid transparent;    margin: 15px;    padding: 3px;    border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;    background-color: beige; } TensorFlow is an open source machine learning ... Read More

The padding property in CSS allows you to set the padding for padding-top, padding-right, padding-bottom, padding-left. It is a shorthand property. For example padding:10px 5px 7px 10px; Here, top padding is 10px right padding is 5px bottom padding is 7px left padding is 10px Syntax The syntax of CSS padding property is as follows − Selector { padding: /*value*/ } The value can be − padding-top padding-right padding-bottom padding-left The following examples illustrate CSS padding shorthand property − Padding property with all the values The padding property with all ... Read More

Relative length units in CSS are used to specify a length relative to another length property. Let use see some key units in CSS with the description − Sr.No Unit & Description 1 emRelative to the font-size of the element i.e 4em means 4 times the size of the current font. 2 exRelative to the x-height of the current font 3 chRelative to width of the 0 4 remRelative to font-size of the root element 5 vwRelative to 1% of the width of the viewport* 6 ... Read More