Now I did what the module wanted, gave an element an id and set and created an id class for it up top and watched it change. I understand that if applied to the same specific element, an id selector, let’s pretend I have one called #green-background has priority over a class rule such as .silver-background , but what exactly is the point of having an id selector when you can literally change it with inline CSS? I went in and changed my single <p> element with inline style attribute just to test this. I DID try it with the `id=“green-background” as well. Is there any more significance to it? Please show me some better examples because I don’t think the module did a very clear example.
Hello
first is for code readability and to separate css from your html tags.
second is for giving your element a unique identifier so it can be manipulated later with JavaScript or any JS library or framework.
1 Like
Ah. so the id style attribute is sort of a tag that makes it so you can put it in your separate CSS file (which I haven’t quite gotten to yet) and it also makes the element transferable to edit with javascript (I am also yet to learn). Does this mean that the regular inline style <p> style="color : green;" works ONLY in my html document, and wouldn’t transfer to an external CSS file or be editable in javascript? Sorry to ask so much. I greatly appreciate your help.
To give your html elements a style you should
first select the element and second write some css code to specify your style (i.e color , size,…)
To select element we need css selector like tag names : h1, p, .. or class name or id or …
You can add your css codeinline in your specific element or between <stlyle>...</style> in the same html page or in separatefile with extension .css
The advantage of inline style : used to apply a unique style for a single element and override other inherited style.
The disadvantage : mixing content stucture with presentation.
the answer to your question :
<p style="color: green;"> ...</p> works ONLY in my html document, and wouldn’t transfer to an external CSS file or be editable in javascript?
is yes.
Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
source :
https://www.w3schools.com/css/css_howto.asp
Yes that’s right.
It’s actually bad practice to tie styles to element ids, really you should use classes (. instead of #) since IDs are supposed to be unique, and the styles wouldn’t be reusable.
The benefit of CSS in files is that they apply to your whole site, so you can update a font or color everywhere with one change, rather than having to rewrite every individually styled element.