Css

The list-style Property The  list-style  property is a shorthand property for setting list-style-type, list-style-image and list-style-position. It is used to set all of the list properties in one declaration: ul { list-style : square outside none; } This would be the same as the longhand version. ul { list-style-type: square; list-style-position: outside; list-style-image: none; } Try It Yourself Result: If one of the property values are missing, the default value for the missing property will be inserted, if any.

COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS Styling the Lists 117 2/3           The List Image and Position There are also other list properties, such as: list-style-image  - specifies an image to be used as the list item marker. list-style-position  - specifies the position of the marker box (inside, outside). In the example below, we use an image as the list item marker, and specify the position to be inside of the content flow.  The HTML: <p>The following list has list-style-position: <strong>inside</strong>.</p> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> The CSS: ul { list-style-image: url ("logo.jpg"); list-style-position: inside; } Try It Yourself Result: " list-style-position:   outside " is the default value.

The list-style-type Property The CSS list properties allow us to set different list item markers. In HTML, there are two types of lists: unordered lists  (<ul>) - the list items are marked with bullets ordered lists  (<ol>) - the list items are marked with numbers or letters With CSS, lists can be styled further, and images can be used as the list item marker. One of the ways is to use the  list-style-type property, which can be set to  circle ,  square ,  decimal ,  disc ,  lower-alpha , etc.  The HTML: <ol class="lower-alpha"> <li>Red</li> <li>Green</li> <li>Blue</li> </ol> <ul class="circle"> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> <ul class="square"> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> The CSS: ol.lower-alpha { list-style-type: lower-alpha; } u

The background-attachment Values You can also set the background-attachment to  inherit  or  scroll . When you set the background-attachment to  inherit , it will inherit the value from its parent element.  When you set the background-attachment to  scroll , the background image will scroll with the rest of the content. The CSS: body { background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: scroll; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!

The background-attachment Property The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Even if an element has a scrolling mechanism, a "fixed" background doesn't move with the element. The CSS: body { background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: fixed ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!

Setting the Value to Inherit When you set the background-repeat property to  inherit , it will take the same specified value as the property for the element's parent.  For example, we set the body background repeat only horizontally. If we set some paragraph background-repeat values to be inherited, they will take the same property value as the body element. The CSS: body { background-image: url("css_logo.png"); background-repeat: repeat-x; } p { background-image: url("css_logo.png"); background-repeat: inherit; margin-top: 100px; padding: 40px; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!

The background-repeat Property The background repeat property specifies how background images are repeated. A background image can be repeated along the  horizontal axis , the  vertical axis ,  both axes , or  not repeated at all .  The  repeat-x  will repeat a background image only  horizontally .  The CSS: body { background-image: url("css_logo.png"); background-repeat: repeat-x; } Try It Yourself Result: The  repeat-y  will repeat a background-image only  vertically .  The CSS: body { background-image: url("css_logo.png"); background-repeat: repeat-y; } Try It Yourself Result: If you want the image to be shown only  once , use the  no-repeat  value.

The background-image Property Background-image can be set not only for the whole page, but for individual elements, as well.  Below we set a background image for the <p> element.  The HTML: <p>This paragraph has a background image.</p> The CSS: p { padding: 30px; background-image: url("green_photo.jpg"); color: white; } Try It Yourself Result: To specify more than one image, just separate the URLs with  commas .

RSES CODE PLAYGROUND DISCUSS TOP LEARNERS background-image 108 1/2       The background-image Property The  background-image  property sets one or several background images in an element. Let's set a background-image for the <body> element. The CSS: body { background-image: url("css_logo.png"); background-color: #e9e9e9; } Try It Yourself The  url  specifies the path to the image file. Both relative and absolute paths are supported. Result: By default, a background-image is placed at the top-left corner of an element, and is repeated both vertically and horizontally to cover the entire element.

The Background Color Values The color of the background can be defined using three different formats: a  color name ,  hexadecimal values , and  RGB .  In the example below, the body, h1, and p elements are assigned different background colors:  The HTML: <h1>This is a heading</h1> <p>This is a paragraph</p> The CSS: body { background-color: #C0C0C0 ; } h1 { background-color: rgb(135,206,235) ; } p { background-color: LightGreen ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!