A few days ago I wrote Tip: Styling a Fieldset with CSS. I decided to add to the small form I used and provide another tip on how to style the label element.
I made a few changes to the HTML example I’d used in the previous example. Here’s the new HTML page, with CSS. The changes result in this appearance for the form.
In the HTML, I changed the labels to include the “for” attribute, so that I could move the closing label tags from where they before. The code is now like this for each label:
<label for="name">Your Full Name</label>
<input type="text" name="name" id="name" />
I also moved the submit button out of the fieldset, since it really didn’t belong in there in the first place.
I added the CSS to make the input fields appear as you see in the image (or on the example page). I made the labels display as block level elements, which were floated to the left. Then I assigned a width to the labels so that the input fields would all be a uniform distance away from the labels. I assigned a color and made the text bold. I used generated content to add a colon ( : ) after the label. (The colon may not appear in every browser.) Here’s the CSS.
label {
color: #B4886B;
font-weight: bold;
display: block;
width: 150px;
float: left;
}
label:after { content: ": " }
Those are the only changes needed to the form as it was described in the post about Styling a Fieldset with CSS.
I’m trying to style One Single label, not all… how can I target this
Ship to billing address?
from my style sheet… 🙂
Thanks!
Assign the single label to an id. then you can write a specific style rule for that id.
You could always use nth child selector. Amazing flexibility with the use of this selector here’s a great link on how you could do this
https://css-tricks.com/almanac/selectors/n/nth-child/
I suggest you to use “:first-of-type” selector with the “>” Selector (without the quotation marks of course) e.g. form > label:first-of-type { / * your css */ }.
Thanks.
great tutorial !. tks :))
You can also use a class name to target a specific label.
HTML:
Your Full Name
CSS:
.custom-label label {
color: #B4886B;
font-weight: bold;
display: block;
width: 150px;
float: left;
}
The html code got triggered by the page: Here it is again:
^div class=”custom-label”>
^label for=”name”>Your Full Name^/label>
^input type=”text” name=”name” id=”name” />
^/div>
Replace “^” with “<"
Yes, you could do that if you had a particular label you wanted to style differently from the others.
Wow i just loved it.Thanks for your help
I am a student taking html Css. I have to have a background image on my school page. I have a css stylesheet folder and i have added a folder for images. I am using netbeans. on the stylesheet I have put the body{ background-image: url(“my image.jpg”) } but it will not load the image to the background. I can get a color background but not the image. any suggestions to what I am doing wrong
I’d check the URL to the image first.
The URL works fine. I can put it up as an image on the page, but can’t get it to a background. I used a style tag on my page and got the background image up using internal css, but the assignment call for us to use an external css stylessheet. I know the sylesheet is working correctly because I have used it to make other changes.
Judging from the file structure you described, your link should be background-image: url(“../img/my image.jpg”)
Also, avoid blank spaces in filenames as they can give you trouble.
THANK YOU! CiviCRM made the labels white on a website with a very light gray background. This did the trick.