Class 45 | CSS and SVG

CSS (Cascading Style Sheets) and SVG (Scalable Vector Graphics) are two essential web technologies commonly used to enhance the visual appearance of web pages.

CSS defines styles for HTML elements such as fonts, colors, layouts, and animations. With CSS, you can control the presentation of your website and create a consistent look and feel across all of your pages. Here are some examples of CSS:

1. Change the font of a heading:

h1 {
  font-family: Arial, sans-serif;
}

2. Set the background color of a section:

section {
  background-color: #f5f5f5;
}

3. Animate an image:

img:hover {
  transform: scale(1.2);
}

SVG is a vector image format that uses XML to define shapes and graphics. Unlike raster images such as JPEGs and PNGs, SVG images can be scaled up or down without losing quality. SVG images are also interactive and can be animated using CSS or JavaScript. Here are some examples of SVG:

1. Draw a circle:

<svg>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

2. Draw a rectangle:

<svg>
  <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="2" fill="blue" />
</svg>

3. Draw a path:

<svg>
  <path d="M10 10 L90 90 M10 90 L90 10" stroke="black" stroke-width="2" fill="none" />
</svg>

Using CSS and SVG together, you can create beautiful, interactive web pages that engage your users and enhance their experience.