Can I add CSS to one text block, but not others, within a page?

Hello,

I am trying to add a background to one text block within the content on a page to make it stand out. Is this possible and, if so, how?

Yes, you need to identify the block id, then style that block with CSS. To identify the block id, you need to use something like 'Firebug' extension for Firefox, or 'Inspect Element' built into Chrome or Safari. You 'right-click' on the area (block) and then look for something similar to:

id="block-87bb9c00b62cd4526e54"

with the number being unique to your block.

Once you get that number, you use it with CSS to style it, either in your CSS file, or on your 'Page Header Injection Point' (both work the same, the difference being the 'Page Header' version applies to only that particular page, whereas on the CSS file, the code can be applied across the site). I prefer to use the CSS file for organization purposes (even if its only page specific CSS).

The CSS you would add to the CSS file ('Change Style' (paintbrush)) > 'CSS' would look something like:

#block-87bb9c00b62cd4526e54 { background: pink; }

If you were to add it to your 'Page Header' section, you need to add the style tags, so it would look like this:

<style>
#block-87bb9c00b62cd4526e54 { background: pink; }
</style>    

If you post your page and describe which block you want to color, I could provide the exact code for you.

Edit: If you are trying to add a background image (instead of a color) the CSS would look a little different. It would be:

#block-87bb9c00b62cd4526e54 { background-image: url(/storage/your-image.jpg);

You are a champion ! thanks so much, here is the page http://thekettleklub.com/personal-training/What I want to do is just add a dark overlay on the text blocks on that page, and have that entire background picture lighter, this way I have it now I had to darken the picture so that my text is visible...but if I can add the overlay on the texblocks it will look better I think....

You are a champion ! thanks so much, here is the page http://thekettleklub.com/personal-training/What I want to do is just add a dark overlay on the text blocks on that page, and have that entire background picture lighter, this way I have it now I had to darken the picture so that my text is visible...but if I can add the overlay on the texblocks it will look better I think....

You are a champion ! thanks so much, here is the page http://thekettleklub.com/personal-training/What I want to do is just add a dark overlay on the text blocks on that page, and have that entire background picture lighter, this way I have it now I had to darken the picture so that my text is visible...but if I can add the overlay on the texblocks it will look better I think....

You are a champion ! thanks so much, here is the page http://thekettleklub.com/personal-training/What I want to do is just add a dark overlay on the text blocks on that page, and have that entire background picture lighter, this way I have it now I had to darken the picture so that my text is visible...but if I can add the overlay on the texblocks it will look better I think....

@marko911 If you wanted to put black backgrounds on each text block / the form on that page, this is the CSS you'd add:

#block-3fcfcd473bf0f06bbd0b,
#block-e924b1b8ea347dbded39,
#block-2508506bcc2d0accb4e0,
#block-963ecf6b1facca5032fe,
#block-43684d4f77f9dcfd24a2, 
#block-fc878424ec136a9a460a { background: #000; }

However, it doesn't look very good, so you could add some padding to it, which would look like this instead:

#block-3fcfcd473bf0f06bbd0b,
#block-e924b1b8ea347dbded39,
#block-2508506bcc2d0accb4e0,
#block-963ecf6b1facca5032fe,
#block-43684d4f77f9dcfd24a2, 
#block-fc878424ec136a9a460a { background: #000; padding: 5px;}    

However, if it were my site, rather than color the boxes individually like that, I'd add a background to the entire content section, and then use 'rgba' to set a black transparent background, and round the corners for a nice touch, which would look like this:

#collection-51796cc9e4b0743cbe99d3c1 #content {
   background: rgba(0, 0, 0, .5);
   -webkit-border-radius: 16px; 
   -moz-border-radius: 16px; 
   border-radius: 16px;
}    

That code will apply this to only your 'Personal Training' page. The first 3 numbers after the 'rgba' text is the RGB color (for example, white would be 255,255,255) and the last number is how transparent it is -- .5 = 50% transparent -- .1 = 10% (very light) .9 = 90% (almost solid).

thank you so very much for this! and the responses below - incredibly helpful!

My pleasure - if it worked for you, please mark this as 'Answered'.

@kale Hi! I'm having a really hard time finding the block in the viewsource. I only brings me to the block in the footer that says "powered by squarespace" is it possible that my template doesn't allow for me to add a background to a textblock? I'm using the Avenue template.

Any help would be much appreciated. I'm going crazy trying to mimic this one chick's homepage http://www.sprucerd.com/ . she has a lot of text boxes with backgrounds on her homepage and her about section. I'd like to do the same.

@kale Hi! I'm having a really hard time finding the block in the viewsource. I only brings me to the block in the footer that says "powered by squarespace" is it possible that my template doesn't allow for me to add a background to a textblock? I'm using the Avenue template.

Any help would be much appreciated. I'm going crazy trying to mimic this one chick's homepage http://www.sprucerd.com/ . she has a lot of text boxes with backgrounds on her homepage and her about section. I'd like to do the same.

How do you find a collection # rather than the block id?

@kale this is awesome but I can't seem to get it to work. I want to add a teal transparent background to some text on an image banner for one page (Registry on www.clockessy.com) using this in the page header: