Achieving Desired Styling Without Altering the HTML Structure: A Guide to CSS Formatting

Question

Achieving Desired Styling Without Altering the HTML Structure: A Guide to CSS Formatting

Check out this HTML code:

<head>
    <meta charset="UTF-8">
    <title>Countdown</title>
    <style>
        /* CSS goes here */
    </style>
</head>
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
        <li>eight</li>
        <li>nine</li>
        <li>ten</li>
    </ul>
</body>

Is it possible to achieve the layout depicted in the image below using just CSS, without making any changes to the HTML? (fonts and colors can be disregarded.)

https://i.stack.imgur.com/uDNE3.png

css

Answer 1

Answer №1

body {
  background-color: #333;
}
li {
  color: black;
  font-weight: normal;
  font-size: 25px;
  width: 120px;
  text-decoration: underline;
  margin: 0 auto;
  list-style: none;
    text-align: center;
  border-bottom: 10px solid purple;
}

<head>
    <meta charset="UTF-8">
    <title>Countdown</title>
    <style>
        /* CSS goes here */
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
        <li>seventh</li>
        <li>eighth</li>
        <li>ninth</li>
        <li>tenth</li>
    </ul>
</body>

Answer 2

body {
  background-color: #333;
}
li {
  color: black;
  font-weight: normal;
  font-size: 25px;
  width: 120px;
  text-decoration: underline;
  margin: 0 auto;
  list-style: none;
    text-align: center;
  border-bottom: 10px solid purple;
}

<head>
    <meta charset="UTF-8">
    <title>Countdown</title>
    <style>
        /* CSS goes here */
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
        <li>seventh</li>
        <li>eighth</li>
        <li>ninth</li>
        <li>tenth</li>
    </ul>
</body>

Answer 3

Answer №2

* {margin:0;padding:0;box-sizing:border-box;}
body {
  background: #222;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1em;
  font-size: 2em;
  padding: .5em 0;
}

ul {
  display: inline-block;
}

li {
  list-style: none;
  border-bottom: .5em solid turquoise;
  padding: 0 0 .25em 1em;
  margin: 0 0 .25em;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>

Answer 4

* {margin:0;padding:0;box-sizing:border-box;}
body {
  background: #222;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1em;
  font-size: 2em;
  padding: .5em 0;
}

ul {
  display: inline-block;
}

li {
  list-style: none;
  border-bottom: .5em solid turquoise;
  padding: 0 0 .25em 1em;
  margin: 0 0 .25em;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>

Answer 5

Answer №3

Take note and absorb the lessons from this particular scenario

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Page Title</title>
<style>
    body, html {
        width: 100%;
        height: 100%;
        background: black;
    }
    ul :last-child{
        border-bottom:none;
    }
    li{
        color: white;
        list-style: none;
        width: 200px;
        text-align: center;
        font-size:40px;
        border-bottom: solid 10px turquoise;
    }

 </style>
 </head>
 <body>
     <ul>
       <li>one</li>
       <li>two</li>
       <li>three</li>
       <li>four</li>
       <li>five</li>
       <li>six</li>
       <li>seven</li>
       <li>eight</li>
       <li>nine</li>
       <li>ten</li>
     </ul>
 </body>
 </html>

Answer 6

Take note and absorb the lessons from this particular scenario

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Page Title</title>
<style>
    body, html {
        width: 100%;
        height: 100%;
        background: black;
    }
    ul :last-child{
        border-bottom:none;
    }
    li{
        color: white;
        list-style: none;
        width: 200px;
        text-align: center;
        font-size:40px;
        border-bottom: solid 10px turquoise;
    }

 </style>
 </head>
 <body>
     <ul>
       <li>one</li>
       <li>two</li>
       <li>three</li>
       <li>four</li>
       <li>five</li>
       <li>six</li>
       <li>seven</li>
       <li>eight</li>
       <li>nine</li>
       <li>ten</li>
     </ul>
 </body>
 </html>

Achieving Desired Styling Without Altering the HTML Structure: A Guide to CSS Formatting

Answer №1

Answer №2

Answer №3

Similar questions

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Managing the clearance of an absolutely positioned div with CSS

What strategies can I employ with flexbox to achieve my design goals?

Loading a .css file in advance using NextJS

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

The foundation grid system is not being implemented

Harnessing the power of the Zurb Foundation 4 grid system to create visually appealing list elements

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

Is there a way to work around the CORS policy in order to fetch data from URLs?

Learn how to reposition the mat-option easily

Tap on the image placeholder to replace it with your own image

When the browser size shrinks, turn off the drop-down navigation menu

Configuring Google Maps API (including charts) for maximum height of 100%

Looking for Assistance with Creating a Non-Adhesive Footer in CSS?

The sup tag does not function properly when used within the title tag

Button for toggling the mobile navbar in Bootstrap

A way to insert a line break in an HTML document without using the <br> tag is

Is it possible to modify the size of a bullet image in Javascript?

Implementing multiline ellipsis without relying on -webkit-line-clamp

Can you tell me the Bootstrap 4 equivalent class for '.well'?