Geoff Graham

The stroke-width property in CSS is for setting the width of a border on SVG shapes.

.module {
  stroke-width: 2;
}

Remember:

• This will override a presentation attribute <path stroke-width="2" ... />
• This will not override an inline style e.g.

The stroke property in CSS is for adding a border to SVG shapes.

.module {
  stroke: black;
}

Remember:

• This will override a presentation attribute <path stroke="#fff" ... />
• This will not override an inline style e.g. <path style="stroke: #fff;"

The fill property in CSS is for filling in the color of a SVG shape.

.eyeball {
  fill: red;
}

Remember:

• This will override a presentation attribute <path fill="#fff" ... />
• This will not override an inline style e.g. <path

The :placeholder-shown pseudo-class selects the input element itself when placeholder text exists in a form input. Think of it as a nice way to distinguish between inputs that are currently showing placeholder text versus those that are not.

input:placeholder-shown {