CODEWITHSUNDEEP
cssborder
Kate
Kate

Reputation: 43

How to tell CSS to put a border around some images, but not other?

It was easy with HTML border properties, but they're gone now.

All I'm finding is a lot of stuff about the wonderful things CSS does with borders. But how do I tell it to turn on the border for some images (pictures), but not others (icons)?

Upvotes: 3

Views: 32679

Answers (5)

Maen
Maen

Reputation: 10698

Class selectors

Use the class attribute in an element to assign the element to a named class. It is up to you what name you choose for the class. Multiple elements in a document can have the same class value.

In your style sheet, type a full stop (period) before the class name when you use it in a selector.

(see RichieHindle's answer for an example)

ID selectors

Use the id attribute in an element to assign an ID to the element. It is up to you what name you choose for the ID. The ID name must be unique in the document.

In your stylesheet, type a number sign (hash) before the ID when you use it in a selector.

<div id="myStyledDiv">

#myStyledDiv{
   border: 1px solid black;
}

Source : Webplatfroms.org (I recommend you to read all this article)

Upvotes: 0

Breezer
Breezer

Reputation: 10490

You could as it has already has been pointed to you, just add a class to the image, but on some occasions you can't change the content other then the css and/or maybe you feel like me at most times you find it a unnecessary waste of time to add classes to all the images your using. You might be better of with just using the correct selector. If there is a parent element with a class use that one instead. A sample of how that could look like is following:

HTML

<div class="content">
<img/>
</div>

CSS

div.content > img{
border:1px solid;
}

This is the optimal way of doing things since it doesn't add additional content to your content, which in return speeds up loading and user experience in return.

Upvotes: 0

Guffa
Guffa

Reputation: 700362

You can add a style to a specific image tag, that would be the modern equivalent of using HTML attributes for styling:

<img src="..." style="border:5px solid green" />

You can make a rule in a style sheet, and add a class to the image tag to use it:

CSS:

.Picture { border: 5px solid green; }

HTML:

<img src="..." class="Picture" />

Upvotes: 0

Arkana
Arkana

Reputation: 2889

You could set a style for the images, as this:

<img src="yourimage.jpg">
img {border:2px dotted blue;}

And set a unique class for the other images such icons, as this:

<img src="youricon.jpg" class="noborder">
img.noborder {border:none;}

In any case you must make a difference between two images for the css identify each other.

Upvotes: 1

RichieHindle
RichieHindle

Reputation: 281495

Mark the ones that should have a border with a class:

<img class='picture' ...>

and then use CSS to add the border:

.picture {
    border: 1px solid green;
}

Upvotes: 6

Related Questions