Borders can be easily set on a table with CSS using the border property. Specific borders can also be set, such as left border, right border, top border, etc. With that, the border style, width, colour, etc, can be set for the left, right, top, and bottom positions. For example, here, the left border is set with a different style and color compared with all the other locations − For example, here, the top border is set with a different style and color compared with all the other locations − Syntax The CSS border property is used to ... Read More

CSS allows us to control the space around individual sides of an element. The CSS margin property is a shorthand for the following properties: margin-top, margin-right, margin-bottom and margin-left. Syntax The syntax of CSS margin property is as follows − Selector { margin-top: /*value*/ margin-right: /*value*/ margin-bottom: /*value*/ margin-left: /*value*/ } The value can be the following − length − Set a a margin in px, pt, etc. The default is 0 % − Set a margin in percent auto − The web browser ... Read More

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