Font-family and padding not working

1

Hi Guys,

So I’m trying to build a survey page and facing 2 issues listed here:

  1. I am applying font-family: "Comic Sans MS", "Comic Sans", cursive; to the .heading class but I don’t see the result. I want the entire form to be cursive starting with .heading.
  2. I want the radio button text and radio box to have a little spacing between them. I tried this:
input [type="radio"] {
  background-color: #fff;
}

I checked online and the CSS selector looks legit but it isn’t working. What am I missing here?

Here’s the link to the form: https://codesandbox.io/s/responsive-form-fcc-wxdox

TIA

2

Hi,
try this,

.form-input{
  margin-right: 5px;
}
3

It worked! Thanks @OJL.
I wonder why I’m not able to change the font size. I used font-size:50px but it had no effect on the radio button text.

4

Hi,
try to encapsulate the text of the radio button into <span></span> and

.form-input ~ span {
  font-size : 50px;
}
5

it worked like a charm but I fail to understand why. What has span tag did to the input field?

6

Let me see if I can help

Font family

If you consider how the CSS cascades and the markup:

<form>
     <div class="heading">
       Survey form
     </div>
     <!-- rest of the form -->
</form>

Applying the font on the class of heading changes only the text in the <div> container.

Input of type radio

The issue here is two-fold:

  1. there should be no whitespace between the selector and the attribute

    - input [type="radio"]
+ input[type="radio"]

  2. the background of input of type radio is not actually visible. If you change another property you see you’ve access to the radio buttons though.

    input[type="radio"] {
   margin-right: 1rem;
}

Input and span elements

If I understand you correctly you’d like to know why an example like this one:

<input /> Text

input {
  font-size: 50px;
}

Does not change the size of the size of the text. This is because the text is not actually part of the input element.

By adding the span element and using the sibling selector, as suggested by @OJL you then have access to the actual text.

1 Like
7

One last thing I noticed with the font-family. If you set the font-family on the form element it doesn’t seem to actually cascade to the nested elements.

form {
  font-family: cursive;
}

This is because at the very top of the stylesheet you use the global selector to set the font-family to sans-serif

* {
  font-family: sans-serif;
  padding: 0px;
  margin: 0px;
}

Took me a while to find it :blush:

1 Like
8

Thanks for the detailed explanation @borntofrappe. It makes sense now. And apologies for my delayed response.

9

Don’t worry. Just glad to have been of some assistance :+1:

Good luck on your exploration of the CSS language

1 Like