Olay - CSS For Starters
Here's a list of the most commonly used properties for your Browser-Source's CSS field. Follow the links for documentation and interactive examples!
- background: Set the background.
- border-radius: Set the border edge roundness.
- border: Set the border.
- color: Set text color.
- content: Replace or insert content.
- display: Set display type.
- font-family: Set text font.
- font-size: Set text size.
- font-weight: Set text weight/boldness.
- margin: Set margin area.
- opacity: Set element opacity.
- padding: Set padding area.
- text-align: Set horizontal alignment.
- text-shadow: Add shadows to text.
- ::before: Create an element before another element.
- content: Replace content with a value.
Here's a fictional example that uses all the properties from the list above.
.mod {
background: #333333;
border-radius: 5px;
border: 2px solid #077990;
color: #000099;
display: inline-block;
font-family: 'Times New Roman', serif;
font-size: 24px;
font-weight: bold;
margin: 40px;
opacity: 0.8;
padding: 20px;
text-align: center;
text-shadow: #ff0000 20px 20px 5px;
}
.mod::before {
content: 'hello cruel world! ';
}