Designing with CSS! Part 3!
- Sejal Bilwar
- 6 days ago
- 2 min read
Written By: Isha Jani
CSS stands for Cascading Style sheets. CSS is used to design the style and layout of web sheets. CSS has many uses including adding font, colors, spacing, borders, and size to make your website more fun and interesting. The following will dive into the specifics of using CSS.
CSS is built on top of the HTML code, is coded into a separate file called a style sheet and linked to the HTMl file with a <link> tag.Â
When adding CSS, first type the section of the HTML you want to design for example, body, h1, and p. Then, put an opening bracket and add your specifications inside. There are many design aspects you can add such asÂ
text-align
font-family (search online for a list of fonts compatible with HTML)
background-color
color
font-weight
text-decoration (underline, overline)
Note that when adding colors you will need to use a hex code. For example, the hex code #6260f0 will display a blue shade. To find hex codes for specific colors you can use a color picker such as this one.
Additionally, you will likely want to add spacing and margins to your website around your text or content. This is called the box model. It's important to note the difference between padding and margins. Padding represents the amount of inner space an element has, while the margin is the whitespace surrounding the element (outside of the border). The following image demonstrates this concept. Padding, borders, and margins can space out the content more appealingly and make the information easier to view.Â
The :hover selector is a specialized command as seen below. This highlights the navigation button with the chosen background color (white in this case) as the mouse hovers over it. This makes our website more personalized and appealing to interact with.
Finally, by adding- display: inline the buttons are displayed horizontally instead of stacked on top of one another.
Here is the complete CSS along with the website view.Â
When all of these elements are used, they make a very appealing website. Remember the better your website looks the more people will want to visit it! Below are some links that will help you learn additional CSS elements.
Additional Resources!