Week-1 Revision | FSR150423

This week was all about configuring environement for HTML and CSS. We have also learnt some basic tags of HTML which we can use according to need.

Previous Notes-

Notes1- https://community.edyoda.com/t/basic-tags-lists-basic-formatting/4367/7?u=rhythm

Notes-2- HTML TAGS & Hyperlinks - #5 by rhythm

Next session was all about block and inline elements.

What is block elements?

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

What are inline elements?

An inline element does not start on a new line. An inline element only takes up as much width as necessary.

Bonus Learning

So, today after seeing Unordered list, I thought these already provided types for unordered list is fine but can we also give it some personalized types? So I started searching and it was fun. So, here is the way to do it-

CSS property list-style-image
The list-style-image property replaces the list-item marker with an image.

Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.
Usage-

 li{
    padding: 1vh;
    list-style-image: url("data:image/svg+xml,%3Csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-10 h-10'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75l6 6 9-13.5' /%3E%3C/svg%3E");
  }

So, we set the List Item <li> to use custom image for points.
Output-

As we can see the list has now custom type :heavy_check_mark:

@harshitrajlnctcse

4 Likes

@rhythm appreciate your learning experience and nicely putted everything. :heart:

2 Likes