Solutions from an average UI developer

When you need to reduce the size of bullet in a list like below, In the above pic, notice that the Sublist items have smaller bullets when compared to main list.  - Create a nested list. If you need help in creating, please refer to  How to create nested list?  - For sub list, give style list-style: none;  - So you will get the below output after removing the list style - Now we have to add bullets which are in smaller size than the default one, - We are going to use pseudo element.  - <li> should be relatively positioned and then pseudo element can be absolutely positioned in relative to the list item. - So for the li element give position as relative , - Now we have to use the " before " pseudo element.  Thus the expected result is achieved. We can change the size of bullet further by changing font-size, top, left attributes. Size of the bullets are increased.

To create a list inside another list item aka nested list as below, You have to create a <ul> inside the particular <li> where you need a nested list. in the above code, main-ul is the outer list and sub-ul is the inner list.

Today my husband asked me for some styling help. He doesn’t know html and css. Sometimes he will need help in his work for changing minor styles. At that time I will feel like a superhero, I will change the color and show him some magic with colors :P He will be like, ”Oh baby you are so talented!!” I helped him in styling a table. Whatever I do, the styles didn’t reflect in the page. I was confused. I stopped all my household works , took his laptop and started debugging. My husband looked at me as if I was diffusing a bomb. I tried all the combinations of selector, restarted the server, refreshed page like 100 times but styles didn’t reflect. I checked the css file in sources tab, styles are available there, but is not rendered in Styles tab. Finally I found the issue. It was because of an unwanted { before the style which was not reflecting  in css file. My husband was happy when I found the issue. He praised me again:P Little he knew that I should have checked for

When you want to give opacity for border alone usually we try the following css, .reduce-border-opacity{       width: 150px;     height: 150px;     border: 5px solid black;     opacity: 0.5;     background-color: grey; } The above css will reduce the opacity of the element with class  “reduce-border-opacity” as shown below, So to reduce the opacity of border alone, give the following css           .reduce-border-opacity{            width: 150px;                     height: 150px;                    border: 5px solid  rgba(0,0,0,0.5);                     background-color: grey;       } Give your opacity as the last property in rgba. 

Welcome !! There is nothing much about me. I am a UI developer, actually an average UI developer.  I will be posting the solutions for problems I face while developing webpages. People like me can go through the posts and if anything helps you please do leave a comment. If nothing helps you, don't curse me because I am just an average developer!!!