We can define a fixed min-width for an element’s content box using CSS min-width property which does not allow the element’s content box to be narrower even if width is lesser than min-width. Syntax The syntax of CSS min-width property is as follows − Selector { min-width: /*value*/ } The value can be − length − Set the min width in px, cm, em, etc. % − Set the min width in % Minimum width for the text Let’s see an example for the CSS min-width property. We have set the minimum width to one of the elements − span.demo { min-width: 200px; ... Read More

The outline-width property can be defined to draw a line of specific thickness around the borders of the element, but the outline is not a part of an element’s dimensions, unlike border property. Syntax The syntax of CSS outline-width property is as follows − Selector { outline-width: /*value*/ } The value can be thin, thick, medium or a length unit. NOTE − The outline-style property needs to be defined before declaring outline-width. Set a thin outline Let’s see an example for the outline-width property. We have set a thick outline here using the thin value ... Read More

The CSS background-image property is used to set an image as a background for the selected element. The url() is used in the background-image to set the image source. Syntax The syntax of CSS background-image property is as follows − Selector { background-image: /*value*/ } The following can be the values − url('URL') − The image url i.e., the source conic-gradient() − Place a conic gradient as the background image. linear-gradient() − Place a linear gradient as the background image. radial-gradient() − Place a radial gradient as the background image. repeating-conic-gradient() − Repeat a ... Read More

CSS Pseudo-classes can be combined with CSS classes rather than elements themselves to provide a more selective approach to an HTML element. Let us see some quick snippets to understand. Our css class is .dropbtn and pseudo-class is :focus .dropbtn:focus { background-color: #4f3e8e; } Our css class is .card-container and pseudo-class is :hover − .card-container:hover .overlay { bottom: 0; height: 100%; } Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child ... Read More

CSS files can be embedded internally by declaring them in tag. This decreases the load time of the webpage. Although embedded CSS declarations allow dynamic styles, it should be downloaded at every page request as internal CSS can’t be cached. Internal CSS are declared in tag inside tag. Syntax The syntax for embedding CSS files is as follows − /*declarations*/ The following examples illustrate how CSS files are embedded − Internal Style Sheet for Styling a div We have used the to set the internal style sheet and styled our ... Read More

The CSS background-position property is used to set an initial position for a background image relative to the origin.SyntaxThe syntax of CSS background-position property is as follows −Selector {    background-position: /*value*/ }The following examples illustrate CSS background-position property −Example Live Demo div {    margin: 30px;    padding: 100px;    background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");    background-repeat: no-repeat;    background-position: 15% 20%, top, right;    border: 1px solid; } OutputThis gives the following output −Example Live Demo p {    margin: 20px;    padding: 80px;    background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");   ... Read More

The CSS margin property is used to set the margin area around the selected element around its borders. The margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Let’s say we have set the following margins using the shorthand property − margin: 10px 45px 35px 70px; The above means − 10 pixels for the top margin 45 pixels for the right margin 35 pixels for the bottom margin 70 pixels for the left margin Syntax The syntax of CSS margin property is as follows − Selector { margin: ... Read More

To specify the height and width of an element, use the CSS height and width properties, respectively. We can also set the maximum and minimum values for these properties using the max-height, max-width, min-height, and min-width properties. Syntax The following is the syntax of height and width properties in CSS − Selector { height: /*value*/ width: /*value*/ } Here are the values of the height property − auto − The height is calculated by the web browser length − The height is defined in length units % − The height is ... Read More

CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc. color − This property is used to change the color of the text. font-family − This property is used to set the font face for an element. font-kerning − To make the character spacing uniform and increase readability, the font-kerning property is ... Read More

The CSS background shorthand property is used to define a background for 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. Syntax The syntax of the CSS background property is as follows − Selector { background: /*value*/ } The value can be − background-color − Set the background color background-image − Set the background images background-position − Set the position of the background images background-size − Set the size of the background images background-repeat − Set how to repeat the background images background-origin − Set the ... Read More