Simple CSS Code Examples You Can Learn in 10 Minutes
If you want to improve the appearance of your website or blog, then CSS (Cascading Style Sheets) is essential to learn. With CSS, you can easily style web pages and make them look professional. The good news is, you do not need to be a professional web designer or developer to get the hang of CSS. In fact, there are several easy CSS code examples that you can learn in only 10 minutes. Here are some of them.
1. Changing Font Style
Changing font style using CSS is one of the easiest things you can do. In this example, we will change the font style of a paragraph.
“`css
p {
font-family: Arial, sans-serif;
}
“`
2. Changing Font Size
You can also easily change the font size of text using CSS.
“`css
p {
font-size: 18px;
}
“`
3. Changing Font Color
Changing the color of the text is also simple.
“`css
p {
color: #333;
}
“`
4. Adding Background Color
Adding a background color to a web page can change the look and feel of a site.
“`css
body {
background-color: #f2f2f2;
}
“`
5. Adding Borders
Adding a border to an element is also easy.
“`css
img {
border: 2px solid #333;
}
“`
6. Changing Link Colors
Customizing the color of your website’s links are essential to make them noticeable.
“`css
a {
color: #6f85a6;
}
“`
7. Adding Padding and Margin
Spacing is essential to make sure that web elements look aesthetically pleasing.
“`css
.container {
padding: 20px;
margin: 30px;
}
“`
8. Making an Element Float
Floats are used to make a website’s appearance look more dynamic.
“`css
img {
float: left;
}
“`
9. Making an Element Responsive
Responsive design is crucial for websites today since most users browse using both desktop and mobile devices.
“`css
.container {
width: 100%;
max-width: 800px;
}
“`
10. Adding Text Shadow
Adding a shadow to text can make it stand out more on a page.
“`css
h1 {
text-shadow: 2px 2px 4px #000;
}
“`