How to erase the dots in <ul>?

HTML-CSS
1

Hey guys i am asking how to erase the side dots of the “ul” ?
Thanks in advance. :slight_smile:

3 Likes
2

I assume by dots you mean bulleted lists? Like those?

  • This is an unordered list using the <ul> tag
  1. This is an ordered list (or numbered) using the <ol> tag
3

In the css you can grab the ul either by class or id and specify list-style: none .

10 Likes
4

yes the bulleted list and also and order list how to erase the dots and numbers ?

5

Thanks @tuscannypolk it worked :+1: :ok_hand:

1 Like
6

I’ve never heard of list-style in my life. It’ll be useful!

3 Likes
7

list-style is really helpful
->list-style-type: upper-roman;
I. Coffee
II. Tea
III. Coca Cola

to create many things its really useful

2 Likes
8

i did not know that roman style pretty cool actually thanks @arnagendra2000
for your help :smiley:,:ok_hand::nose:

9

You can also add images (icons) and other style types.

3 Likes
10

Great website ! thanks @lasjorg :ok_hand:

11

What I’ve come to learn is that the practice is that id is used for JavaScript, not CSS. So it’s best to change styles using class names, not id.

1 Like
12

Interesting :thinking:. Ive been using id more frequently because I often find myself not needing the extra “inclusion” capability of a .class; especially when I only am manipulating a single element (which is quite often).

But I can see how using .class can be more beneficial in the long run for keeping your CSS files dry. So what is it that you do? Do you use classes pretty much exclusively for hooks in CSS and then add ID’s exclusively when hooking Javascript files?

13

The problem with ids is their specificity. If you are absolutely sure you only have, and forever will have, only one element that needs that style then I guess it doesn’t really matter much. But that is rarely the case and will often change over time.

My suggestion is just don’t use ids for CSS. They really do not offer many, if any, benefits.

2 Likes
14

Thanks for the link - some very useful info in there.

1 Like
15

It’s just a best practice to use class names for CSS; id is for JavaScript.

I also used to use id and class interchangeably, when I had less experience. But I learned and, importantly, worked on a team with other people. When you’re collaborating, it’s important to follow established practices.

In your own documents, I guess you can use whatever you want. But it’s good to get experience using established practices, which you’ll use anyway if your goal is to find a job.

1 Like
16

Well, I’m ish on ids in general -unless, for example, you’re generating a truly unique UUID, ensuring uniqueness.

Coding javascript to use an id feels an awful lot like “coding to an implementation,” rather than coding to an interface. My javascript should be abstract enough to not really care how access is implemented - if not it’s entirely too coupled.

In general, ids are a brittle approach. They are imperative rather than declarative, meaning “this is who i am explicitly” rather than “here, this is the intent behind me.”

If your html element is, and always will be, totally unique… Still wonder why use an id. They have a place, and i still use them, both in my css and my js, but each time i do, i consider whether this time i should refactor them out.

1 Like
17

Im having trouble understanding this. Can you elaborate a bit more?

If I have a single button that I want to link to a main header and manipulate it on click, what would be the problem with using an id to grab that button and header? How would using a class for the button and a class for the header be more bennifiicial?

I kinda feel like im understanding what you guys are getting at, because classes are more inclusive. But most of the time in javascript, I don’t code things inclusively, I code for one distinct element at a time. Which is why it makes more sense to me to use id’s when it comes to javascript.

When it comes to css. I can see how classes can be a better option when it comes to paragraph and header styling. Colors, buttons etc. can benefit from classes. But isn’t javascript a bit different in that reguard?

1 Like
18

Sure, a quick concrete example, and one i actually used in an experimental chessboard setup. That was a rabbit-hole in itself, but let’s work through this particular aspect of it. In particular, the chess pieces.

There are 32 pieces on a standard chessboard, sixteen black and sixteen white. Of the black pieces, we have eight pawns, two rooks, two knights, two bishops, a queen and a king. We can reference them uniquely by their position: “black King’s rook” is a nicely specific id, and we could simply use that: #black-kings-rook. As there is only going to be one, this works.

But i personally don’t like that, as it’s redundant. Instead, i did use classes for this. Here’s why.

The images, all saved in a single png file, are logically organized. There are two rows of icons, the top row black and three bottom row white. In each row, the icons are the same size and order: king, queen, bishop, knight, rook, pawn.

Why does that matter? Giving a piece the class white determines which sprite row to refer to, while giving a piece the class rook defines which column in that row.

Thus, i can uniquely specify this:


 .chess-piece {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('./chess-pieces.png');
  background-size: 60vmin;
  box-sizing: border-box;
  border: 1px solid transparent;
}
.chess-piece.black{
  background-position-y:29vmin;
}
.chess-piece.white{
  background-position-y:0vmin;
}
.chess-piece.rook{
  background-position-x: -160vmin;
}

/* Positioning the pieces, by grid */
/* Black pieces */
.black.queens.rook {
  grid-area: A7;
}

Now note that last rule. For our purpose it is as unique as the id, but it identifies the piece by intent, rather than imperatively naming the thing. Further, that same css selector can be used in my javascript, and with the chessboard used as the root, can’t conflict with any other. Thus i could have multiple chessboards showing many ongoing games, and still target individual pieces as needed.

This is not me saying don’t use id’s. Feel free, they work great! But understand their limitations.

1 Like
19

Note that the above, as i said, was purely a rabbit hole. It was likely overkill. But my point was, by combining classes within a component, like .black.kings.bishop, i can get the same specificity as an id (well, ish) without the limits.

There is no real reason not to use ids for “this button toggles this header.” It’s a small, specific, direct-link case. But in larger contexts, that direct link becomes more and more difficult to manage.

1 Like
20

Hmm this is a pretty intelligent way of going about things. Very methodical. I had to take some time to reread what you wrote so that I could really take it in. I can easily see how in this case, using classes works best. Great example (im pretty fond of chess myself, so your example was spot on :+1:) .

Not to go too deep into the rabbit hole, but how did you manage to have your sprite selection work with the classes? I don’t understand how something like that would work :thinking:

For example, I kinda get how the sprites are displayed(by using a background png and selecting the correct sprite based on your vmin value), but how would movement work?