In general, those who worked with DOM, heard about insertion methods, for example, append, prepend and some others. I decided to study how the whatwg specification describes them and I encountered difficulties. This is what I am talking about (insert…
* { outline: 1px solid rgba(255, 0, 0, .2); } ol { *:not(li) { grid-area: none; /* hmmm... this is not right*/ } padding: 0; list-style: none; display: grid; grid-template-columns: min-content 1fr; grid-column: subgrid; li { grid-column: 1 / -1;…
so i have a little problem with css i want to set transparent color with properties like a solid color a solid black color on, for example: on 50% of a div with a text, the text disappears and it…
I am trying to create a draggable input field. On click of 'Create input' button, an input is created and a mousedown event is registered on the created input. And dragStart is fired, which further register mouseup and mousemove, which…
you see at the right and and the left the image is white not full stretched. How can I stretch it with good quality ? code: .bg { background-image: url('/app/assets/bg.jpeg'); background-size: contain; background-repeat: no-repeat; height: calc(100vh - 196px); background-position: top;…
in css below, body selector have priority over universal selector. * { color: rgba(255, 3, 3, 0.966); } body { color: rgb(103, 231, 18); font-family: sans-serif; } but when i load simple HTML like this: <!DOCTYPE html> <html> <head> <meta…
Heres my code : <audio loop autoplay> <source src="song.mp3" type = "audio/mpeg"> </audio> my "song" folder is saved in the same directory as the code file , so that cant be the issue ,the problem is that the song isnt…
I have made a card container which contains an image and a paragraph. I gave the card container display flex and align-items and justify-content both centre. The image got centered as expected but the paragraph is not getting centred. I…
I'm developing a piano keyboard using HTML + CSS. My code structure is as follows: :root { --piano-width: 600px; --piano-height: 150px; --piano-keys-gap: 1px; --piano-black-keys-height-perc: 0.6; } .piano-keys { display: flex; flex-direction: row; justify-content: center; width: var(--piano-width); height: var(--piano-height); } .piano-key…
/* CSS */ em {font-style: italic; background yellow} ::autonomous-not-child-of-a-p-element-? :: em {font-style:normal; background gray} Given two situations both using <em> differently, in need to be styled differently. The first case contains a paragraph element and within it one or multiple…