Css

The background-color Property The  background-color  property is used to specify the background color of an element.  The HTML: <p>The background color of this page is set to LightSkyBlue.</p> The CSS: body { background-color : #87CEFA; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code! 125  

The Minimum and Maximum Sizes To set the minimum and maximum height and width of an element, you can use the following properties: min-width  - the minimum width of an element min-height  - the minimum height of an element max-width  - the maximum width of an element max-height  - the maximum height of an element In the example below, we set the minimum height and maximum width of different paragraphs to 100px.  The HTML: <p class="first">The <strong>minimum height </strong> of this paragraph is set to 100px.</p> <p class="second">The<strong> maximum width </strong> of this paragraph is set to 100px.</p> The CSS: p.first { border: 5px solid green; min-height: 100px; } p.second { border: 5px solid green; max-width: 100px; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!

Width and Height Measurement The width and height of an element can be also assigned using  percents.   In the example below the width of an element is assigned in percentages, the height is in pixels.  The HTML: <div>The total width of this element is <strong>100%</strong> and the total height is <strong>100px</strong> .</div> The CSS: div { border: 5px solid green; width: 100%; height: 90px ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!

COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS Width and Height 99 1/3           CSS Width and Height To style a  <div>  element to have a total width and height of  100px : The HTML: <div>The total width and height of this element is 100px.</div> The CSS: div { border: 5px solid green; width: 90px; height: 90px; } Try It Yourself Result: The total width and height of the box will be the 90px+5px (border)+5px(border) = 100px;

RSES CODE PLAYGROUND DISCUSS TOP LEARNERS Borders 97 3/3           The border-style Property The default value of border-style is  none , which defines no border.  There are various styles supported for the border-style property:  dotted ,  dashed ,  double , etc. The example below illustrates the differences between them.  The HTML: <p class="none">This paragraph has no border.</p> <p class="dotted">This is a dotted border.</p> <p class="dashed">This is a dashed border.</p> <p class="double">This is a double border.</p> <p class="groove">This is a grooved border.</p> <p class="ridge">This is a ridged border.</p> <p class="inset">This is an inset border.</p> <p class="outset">This is an outset border.</p> <p class="hidden">This is a hidden border.<...

Border Width The properties for the border can be set separately. The  border-width  property specifies the width of the border. The HTML: <p class="first"> Border width of this paragraph is set to 2px. </p> <p class="second"> Border width of this paragraph is set to 5px. </p> The CSS: p.first { padding: 10px; border-style: solid; border-width: 2px; } p.second { padding: 10px; border-style: solid; border-width: 5px; } Try It Yourself Result: Border Color The border color of the element can be defined using a color name, RGB, or Hex values.  The HTML: <p class="first"> Border color has been created using <strong>color name.</strong> </p> <p class="second"> Border color has been created using <strong>Hex values.</strong> </p> <p class="third"> Border color has been created using <strong>RGB values.</...

COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS Borders 97 1/3           The border Property The CSS border property allows you to customize the borders of HTML elements. In order to add a border to the element, you need to specify the  size ,  style , and  color  of the border.  The example below shows how to add a solid green border to the paragraph. The HTML: <p>This is an example of a solid border.</p> The CSS: p { padding: 10px; border: 5px solid green ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!