Design Element Representation in HTML and CSS
The way HTML and CSS form design elements is different from the way drawing software (illustrator, Figma, Sketch, Powerpoint, etc.) forms design elements. It is beneficial for you to understand the differences to control design in HTML and CSS more effectively.
Text
Making and styling text in HTML and CSS can be relatively intuitive. What you need to do is to add styles to HTML text content to change its color, size or other design aspects.
Images
Unlike what you can do with drawing software, you cannot place images with GUI (Graphic User Interface). You need to specify an image file path in HTML and add styles in CSS. You can add sizes using both HTML and CSS but if you want to change the shape of the image (e.g., adding a round edge), you need to use CSS.
Shapes and lines
Making and designing shapes and lines with design software are much easier than those with HTML and CSS. Usually, we use block elements to create boxes and lines. The <div> element is often used, but you can use other block elements too. To customize shapes and lines, use the width and height properties for size, use the background-color property to fill the object with color, and use the border properties to design outlines or lines. Using the border-radius property, you can also design round shapes. If you want to make shapes or lines with angles, you can use the clip-path function, which will be explained in another course.
The way HTML and CSS form design elements is different from the way drawing software (illustrator, Figma, Sketch, Powerpoint, etc.) forms design elements. It is beneficial for you to understand the differences to control design in HTML and CSS more effectively.
Text
Making and styling text in HTML and CSS can be relatively intuitive. What you need to do is to add styles to HTML text content to change its color, size or other design aspects.
Images
Unlike what you can do with drawing software, you cannot place images with GUI (Graphic User Interface). You need to specify an image file path in HTML and add styles in CSS. You can add sizes using both HTML and CSS but if you want to change the shape of the image (e.g., adding a round edge), you need to use CSS.
Shapes and lines
Making and designing shapes and lines with design software are much easier than those with HTML and CSS. Usually, we use block elements to create boxes and lines. The <div> element is often used, but you can use other block elements too. To customize shapes and lines, use the width and height properties for size, use the background-color property to fill the object with color, and use the border properties to design outlines or lines. Using the border-radius property, you can also design round shapes. If you want to make shapes or lines with angles, you can use the clip-path function, which will be explained in another course.
