Cascading Style Sheets

CSS syntax consists of a collection of styles or rules. Each style consists of a selector and a declaration block. The selector determines to which HTML elements the style is applied. The declaration block is composed of a sequence of property-value pairs gruped in curly brakets. The property and it's value is separated by a colon (:), and property-value pairs are separated from each other by a semi-colon (;).

body {
  background: white;
  color: black;
}

Styling SVG with CSS

Previous example where we created shapes can be styled using CSS selectors. HTML code

<svg width="200" height="200" id="parent">
  <circle cx="25" cy="25" r="20" class="ball"/>
  <ellipse cx="75" cy="25" rx="50" ry="20" class="ball"/>
  <rect x="25" y="25" width="40" height="80" class="pad"/>
  <text x="100" y="100">Magic!</text>
  <path d="M100 100 L50 200 L150 200 Z"/>
</svg>

CSS code

#parent {
  border:1px solid #000;
}
.ball {
  fill: red;
}
ellipse.ball {
  stroke: black;
}
.pad {
  fill: blue;
}
text {
  font-size: 12px;
  text-decoration: underline;
}
path {
  opacity: 0.3;
  stroke-width: 5px;
  stroke: red;
}

In effect, we have applied styles to multiple elements. And, CSS is easier to read and maintian.