Front End Technology Articles - Page 387 of 652

CSS allows us to set side specific padding for elements. We can easily specify padding sizes for individual sides of an element. The padding-top, padding-right, padding-bottom and padding-right properties define the top, right, bottom and left padding respectively. The padding shorthand property can also be used to achieve the same output by specifying values in clock-wise direction. Syntax The syntax of CSS padding property is as follows − Selector { padding-top: /*value*/ padding-right: /*value*/ padding-bottom: /*value*/ padding-left: /*value*/ } Set the Shorthand Padding Property The shorthand ... Read More

The CSS margin shorthand property is used to define the margin area for an element. It sets values in clock-wise direction, i.e., margin-top, margin-right, margin-bottom and then margin-left. Syntax The syntax of CSS margin property is as follows − Selector { margin: /*value*/ } The value above can be − margin-top margin-right margin-bottom margin-left The following examples illustrate CSS margin shorthand property − Margin property with all the values The margin property with all the values sets values for the top, right, bottom, and left properties − margin: 7% auto -3% 25%; ... Read More

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-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

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