CSS Summary
CSS is a list of HTML elements and styles you apply to them.
For each HTML element selected in your CSS, you can choose from an ever-growing list of CSS properties to control appearance.
label {
font-size: 14px;
font-weight: bold;
}
input {
width: 200px;
padding: 10px;
}
button {
background: white;
color: blue;
}
CSS Uses
Layout
CSS has many properties that allow you to control the size, spacing, position, and stacking of HTML elements.
button {
width: 100%;
height: auto;
padding: 20px;
margin-bottom: 30px;
top: 50px;
left: 50px;
float: left;
}
Design
The visual aesthetics of a website are realized using CSS. With control over things like fonts, background images, and borders it’s possible to produce a website that is nearly pixel-perfect to a web design.
button {
font-family: Arial, sans-serif;
background-image: url("https://aicodingeducator.com/cat.jpg");
border: 3px solid black;
}
Screen Adaptivity
Websites need to work on all screens. You can use CSS media and container queries to set changes to your styling at specific screen widths.
@media (max-width:768px){
button {
width: 100%;
}
}
Text Formatting
CSS has all the primary text formatting features. You should use CSS to load fonts. And with font-size, line-height, letter-spacing, and text-transform you have full control.
button {
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-transform: capitalize;
}
Behaviors
CSS can respond to a hover state and do basic animations. Using these simple tools, you can accomplish a lot.
button {
background: blue;
}
button:hover {
background: red;
}