Jump to content

silverRainfall

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Everything posted by silverRainfall

  1. silverRainfall
    Dear everyone, As a beginner, I continue to have trouble understanding the practical utility of the id-selector. Some arguments I see given in favour of the id-selector are as follows: > Specificity: I understand id-selectors have the highest specificity, which can be useful if one wants to ensure a certain class is not overridden. But I have difficulty imagining a scenario in which this would be a true problem. If a coder overrides his own classes, does this not simply mean his code is not in order? When he overrides his own styling, at least he is alerted he needs to correct his code. In this sense, I cannot see a true utility to the id-selector; it seems but to enable sloppy code, which might produce more complicated problems later on as one's project grows more complex. No offence intended, of course. > Targeting Unique Elements: To my understanding, a given id-selector class can be applied only once to a single instance of an html-element. I don't see a reason why one would not just create a unique class for a respective single element with its own unique and respective styling needs. I can, however, imagine the unique syntax of the id-selector makes it more perceivable and standout in a stylesheet, adding to readability. However, one can easily suggest alternatives such as applying comments, or using comments to categorise a group of classes. I personally cannot see the id-selector's role here to be thus meritorious to warrant its existence. > JavaScript Interaction: JavaScript can work and manipulate ids, but it can manipulate and interact with classes just as easily. Is there truly a difference in what JavaScript can do with ids (in terms of CSS/styling) in comparison to what it can do with classes? I would be most grateful if anyone can show me the practical utility of the id-selector. I continue to feel it has no true practical discerning utility compared to the class-selector, which likely indicates I have simply not understood its role properly. I have had this question for a long time, asked here and there, but could never be truly answered. Sincerely, silverRainfall
  2. silverRainfall
    Hello Ingolme, Thank you for your response and taking the time to assist me. I see your point; I have indeed assigned different names, in a moment of lacking alertness, to the respective name attributes of the radio buttons and so diverged from the W3 example. In the example below, I'm trying to see what both name and value do in the input elements. It is as if the name attribute, here assigned with the value fav_language, helps one group the data you are collecting, while value allows you to identify individual elements within the data, that you have categorised as fav_language. I can imagine the output could look something like this: Element selected in fav_language: Value CSS. I think this echoes your explanation, correct? Yours kindly, silverRainfall
  3. silverRainfall
    Hello, I'm presently progressing through the HTML certified course and am at 7.4 HTML Input Types in the module about HTML forms. The input type I'm presently looking at is radio and can also be found here: https://www.w3schools.com/html/html_form_input_types.asp (press ctrl + f and input: Input Type Radio to bring you to the right heading immediately). My question is, is that it seems to me superfluous to add the attribute value to the radio inputs. It does not seem to do anything, whereas for the input type of submit it will determine the text on the actual submit button; idem. for the button element. I cannot see the value attribute to fulfil such a function, or anything else meaningful, for input type radio. I might be mistaken, but if it has a practical presence, it is at least (so far) not explained. If it is indeed superfluous, should it even be there? Would it not exemplify bad code? Kindly yours, silverRainfall <!DOCTYPE html> <html lang="en-gb"> <head><title>Title</title></head> <body> <form action="/action_page.php"> <input type="radio" id="html" name="html" value="HTML"> <label for="html">HTML</label> <br> <input type="radio" id="CSS" name="CSS" value="CSS"> <label for="">CSS</label> <br> <input type="radio" id="JS" name="JS" value="JavaScript"> <label for="JS">JavaScript</label> <br><br> <input type="submit"> </form> </body> </html>
  4. silverRainfall
    Thank you Ingolme; I'm happy I have understood it correctly.
  5. silverRainfall
    Hello everyone, thank you for taking the time to assist me in my learning process. On kali.org, you can see that its design has that styling in which a given background color fills the 100% width and height of the screen, and when you scroll down, another bg color fills the 100% width and height of the screen. (The height percentage can seemingly vary here, though). I am trying to imitate this effect, but as a CSS neophyte I am not succeeding. First of all: the browser does output the width to be 100%, but not the height. Also, I have assigned some divs to have a different bg color, but this color is not being applied. I have used the universal selector to apply border-box to everything. My understanding was, if I am to allow an element to be set to 100% height, I am to use the HTML and BODY style selector and apply 100% height. I then applied 100% height to my divs via the div style selector(doesn't work). Then I made a .2 class that I applied to every second div in which I assign a white background color. This color is not applied. My understanding was, as the div is already styled via the div type selector, applying a class to some of the divs will still make the type selector apply all its styling, safe but where I have made an overriding change in the class selector. In this instance, the div type selector has the background-color set to grey, and the .2 class selector has its background-color set to white. Hence: <div>Grey BG</div> <div class="2">All the styling of div but has a white BG</div> <div>Grey BG</div> <div class="2">All the styling of div but has a white BG</div> Your assistance is much appreciated, as I can truly not see what I must be doing wrong. My example HTML/CSS is very small. The index.html can be found here: https://cellseven.w3spaces.com/ HTML/CSS on JSFiddle: https://jsfiddle.net/afg5tsyd/ HTML/CSS in .txt file: The HTML code here: https://cellseven.w3spaces.com/html.txt The CSS code here: https://cellseven.w3spaces.com/css.txt Here is the relevant CSS: *{ box-sizing: border-box; } html, body{ height: 100%; margin: 0; padding: 0; background-color: #161a1d; font-family: 'Montserrat Alternates', sans-serif; color: #CDCDCD; } /* SETTING THE BG COLOR TO GREY AND THE WIDTH AND HEIGHT TO 100% */ div{ text-align: center; margin: 20% auto; width: 100%; height: 100%; background-color: grey; } /* THIS CLASS IS INTENDED TO BE ADDED TO EVERY SECOND DIV, CHANGING THE BG COLOR WHILE MAINTAINING DIV STYLING */ .2{ background-color: white; } The relevant HTML: <div><p>My name is Logan Throne, <br><br> Here you will find my publications on Oriental philosophy.<br> Subscribe to the <a href="#">newsletter</a> or follow me on <a href="#">X</a> for updates.</p> <h1>emptycloud.io</h1> </div> <div class="2"> <h2>Publications</h2> <h3>Book Title 01</h3> <p class="bookDescription">Lorem...</p> </div> <div> <h2>Publications</h2> <h3>Book Title 02</h3> <p class="bookDescription">Lorem...</p> </div> <div class="2"> <h2>Publications</h2> <h3>Book Title 03</h3> <p class="bookDescription">Lorem...</p> </div> silverRainfall
  6. silverRainfall
    Hello everyone, I hope I may ask for your wisdom. I'm doing the W3 certified course for HTML. I have a question about module 7.3, discussing form elements. My question is about the datalist-element, also publicly explained here: https://www.w3schools.com/tags/tag_datalist.asp W3's brevity in terms of explanation can be highly appreciated (if you have some preceding knowledge), but in this instance it disallowed me to understand the HTML I saw presented for the datalist-element: <label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> First of all, it seems to me that the input attribute list should correspond to the id attribute of datalist, like the for attribute for label would refer to the id of an input element. Is my understanding correct? My greatest question however is, is that that the input element is not being declared an input type (there is no type attribute) and yet the input element, when the HTML is opened in a browser, shows as if the input type is set to text. Does this mean that whenever we apply the list attribute to the input element, it automatically renders as a text field? Thank you for your clarification! silverRainfall
×
×
  • Create New...