Css

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.