# The Ultimate HTML5 & CSS3 Series: Part 1 Borders Shapes

**URL:** <https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844>\
**Category:** Uncategorized\
**Created:** [November 26, 2023, 10:00pm UTC](https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844 "2023-11-26T22:00:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![flite29](https://avatars.discourse-cdn.com/v4/letter/f/a88e4f/32.png) [@flite29](https://forum.codewithmosh.com/u/flite29)\
**Post date:** [November 26, 2023, 10:00pm UTC](https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844/1 "2023-11-26T22:00:07Z")

</div>

WHy does .box work and not #triangle-up. On the shapes of CSS site it looks like it says to code it #triangle-up.

![Capture d’écran, le 2023-11-26 à 3.56.37 PM](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/4/4eb529ce63640320db1ce19830adc668eb7e4340.png)  
 ![Capture d’écran, le 2023-11-26 à 3.57.21 PM](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/4/4cade3e2da14cef3ff09d70914d54964269f212e.png)

---

<div class="post-metadata">

**Author:** ![lucidlear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/lucidlear/32/5477_2.png) [@lucidlear](https://forum.codewithmosh.com/u/lucidlear)\
**Post date:** [November 27, 2023, 12:36am UTC](https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844/2 "2023-11-27T00:36:54Z")

</div>

for the box its targeting a class but for the triangle it targets an id, be sure to set id on your div not class ie: `<div id="triangle-up"></div>`

---

<div class="post-metadata">

**Author:** ![flite29](https://avatars.discourse-cdn.com/v4/letter/f/a88e4f/32.png) [@flite29](https://forum.codewithmosh.com/u/flite29)\
**Post date:** [November 28, 2023, 2:17am UTC](https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844/3 "2023-11-28T02:17:22Z")

</div>

I have no idea what that means. Can you explain what you just said?

---

<div class="post-metadata">

**Author:** ![Programmist](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/programmist/32/7006_2.png) [@Programmist](https://forum.codewithmosh.com/u/Programmist)\
**Post date:** [November 28, 2023, 3:46am UTC](https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844/4 "2023-11-28T03:46:34Z")

</div>

Go back to the lesson on basic CSS selectors. Pay particular attention to class selectors and id selectors. For example, in the code above `.box` is a class selector and `#triangle-up` is an id selector.

To apply the class styles to an HTML element use the `class` HTML attribute:

```html
<div class="box"></div>

```

To apply id styles to an HTML element use the `id` HTML attribute:

```html
<div id="triangle-up"></div>

```

---

<div class="post-metadata">

**Author:** ![flite29](https://avatars.discourse-cdn.com/v4/letter/f/a88e4f/32.png) [@flite29](https://forum.codewithmosh.com/u/flite29)\
**Post date:** [November 30, 2023, 2:00am UTC](https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844/5 "2023-11-30T02:00:16Z")

</div>

I need a lot more context to understand than that. That feels like you just said the same thing again.

---

<div class="post-metadata">

**Author:** ![flite29](https://avatars.discourse-cdn.com/v4/letter/f/a88e4f/32.png) [@flite29](https://forum.codewithmosh.com/u/flite29)\
**Post date:** [November 30, 2023, 2:00am UTC](https://forum.codewithmosh.com/t/the-ultimate-html5-css3-series-part-1-borders-shapes/23844/6 "2023-11-30T02:00:52Z")

</div>

Actually never mind the first part of the message was cut off! Thank you sir