I am in the process of creating my first website. I have created a file named style.css where I have included the following code:
img {
width: 100%;
height: 100%;
}
The issue I am facing is that this code is impacting the size of every image on the HTML page. Is there a way for me to apply this styling only to specific images instead of all?
CSS functions by applying rules to every instance of the specified selector. When using the img selector, all images on a page will be affected.
To target individual images or groups of images, you can assign them a class like this:-
<img class="red-border" src="...">Then in your CSS file:-
.red-border {
border: 1px solid red;
}To modify multiple images, you can utilize the class attribute like this:
This particular CSS rule will impact any image that has a
classvalue ofx.
.x { width:100%}
<img class="x" src="..."> <-------affect on this
<img class="x" src="..."> <-------affect on this
<img class="y" src="...">
<img class="x" src="..."> <-------affect on this
Alternatively, to change a single image, use the id attribute (since it is unique):
This rule applies to an image with an
idattribute value ofy1:
#y1 { width:100%;}
<img id="y1" src="..."> <-------affect on this
<img id="y2" src="...">
<img id="y3" src="...">
To tackle this issue effectively, one commonly used method is to employ css classes or ids.
Take for instance
img {
width: 50px;
}
img.some_image_class {
width: 100%;
height: 100%;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">
<img class="some_image_class" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">
You might also consider utilizing selectors in this scenario.
For example
<html>
<head></head>
<body>
<section id="sec1">
</section>
<section id="sec2">
<img src="something" />
</section>
</body>
</html>
#sec2 img {
width: 50%
}
In order to better organize and contain your styles, it is common practice to use classes.
<img class="full-width" src="..." alt="...">
img.full-width {
width: 100%;
height: 100%;
}
(On a side note, since each element can only have one id but multiple classes, like
<img class="full-width other-class another-class" src="..." alt="...">Ids are also handy for identifying specific sections on a webpage for linking purposes (e.g., www.example.com/#id_to_scroll_to). Therefore, it's best to use descriptive names for ids that reflect the content rather than the style.
I have a JSON file structured like this: [ { "content": ["<p style=\"text-align:justify;\"> This is content1</p>"], "title" : ["This is\u00a0title 1"] }, { "content": ["<p style=\"text-a ...
I'm currently working on creating a tooltip using JQuery for incoming list items. Users will input text in a textfield, press enter, and those values will be displayed in a visible list on the website. I intend to have a tooltip associated with each i ...
Using the Card class from Bootstrap 4, I'm struggling with an extra space on the right side: https://i.sstatic.net/5qb8y.png (Please ignore the 'porno' thing, haha). You can clearly see the extra space on the right. I've been attemp ...
Experience with TailwindCSS and AlpineJS in my current project has brought to my attention a slight issue with the header dropdowns flashing open momentarily when the login page loads. I attempted to use x-cloak to address this, but encountered some diffic ...
I'm currently working with bootstrap 5 and I'm trying to display 2 columns on my mobile, but it's only showing 1 column. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...
Currently, I am in the process of troubleshooting this website: This site is hosted on a LAMP server and is utilizing CMSMS 2.1x, if that detail makes any difference. (By the way, the smarty components are causing some performance issues.) While the desk ...
On my ASP.NET 4 / VB website, I encountered a scenario where I needed to incorporate a class called "noprint" in my footer, as specified in the print.css file. However, there was already a span class present, so I ended up enclosing div tags around it. Mor ...
In the process of creating a web-based code editor, I have currently implemented the following rule for both line numbers and the source code: font-family : "Courier New", Courier, monospace I have a couple of questions regarding this choice: Will this ...
Check out my blog at: . I have also posted the full Template code at https://pastebin.com/GXuPFKzH I want to display the full post on the homepage instead of just a snippet. Can you help me figure out which code needs to be removed? [insert image of the ...
Looking to create a rectangular canvas that acts as a progress bar, but struggling with setting the width and height to 100%. It doesn't seem to fill the parent container properly. Check out this example below: http://jsfiddle.net/PQS3A/ Is it fea ...
Having created a test for an upcoming project, I have encountered a problem that I am struggling to resolve. Despite my efforts to search the internet for a solution, I have been unable to find one due to: My limited understanding of Javascript The code l ...
Is it possible to create a ranking system that adjusts based on the user's points while maintaining consistent height with an image? How can I eliminate the br tags in this scenario? <!DOCTYPE html> <html lang="en>" <head> <m ...
As a coding novice, I recently downloaded the Galereya JQuery script to use on my website. While it works well, I encountered an issue where it overlaps with other content on the page. Despite trying to adjust the overflow and position properties, I have b ...
To create a left vertical (sidebar) navigation menu, I will be referencing the "Example" located at https://getbootstrap.com/docs/5.0/components/accordion/. Assuming there are three HTML buttons: <button onclick="myFunction1()">Button 1< ...
Currently, I am in the process of developing a webpage and utilizing Bootswatch for styling. However, there are times when I need to work offline and host locally. The issue I am facing is that Bootswatch cannot be used offline due to the fact that it util ...
Can text inside a div adjust to fit the size of the DIV while the browser window is resized? I came across this and this and several other resources about fitting text to a DIV, but none of them provide a definitive answer for resizing text when the brows ...
Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...
Looking for assistance with updating the last line. The goal is to display the current month, obtained from the getMonthText variable, within the <h1><span id="month_year"> </span></h1> Starting code. The issue arises to ...
I am working on a form that has an input box which I want to auto-complete with values from an IndexedDb objectStore. Currently, it is functioning with two overlapping input boxes, using a simple array. However, I am looking to make it work with the values ...
Hi there, I'm new to JavaScript and I'm trying to remove the readonly attribute from some text input fields. My code seems to be working, but there's a strange behavior where the readonly attribute is removed for about 1 second and then it g ...