CSS

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;
}