CSS (Cascading Style Sheets) and SVG (Scalable Vector Graphics) are two important web technologies that are commonly used to enhance the visual appearance of web pages.
CSS is used to define 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:
- Change the font of a heading:
h1 {
font-family: Arial, sans-serif;
}
- Set the background color of a section:
section {
background-color: #f5f5f5;
}
- 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:
- Draw a circle:
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
- Draw a rectangle:
<svg>
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="2" fill="blue" />
</svg>
- Draw a path:
<svg>
<path d="M10 10 L90 90 M10 90 L90 10" stroke="black" stroke-width="2" fill="none" />
</svg>
By using CSS and SVG together, you can create beautiful and interactive web pages that engage your users and enhance their experience.
