Online Training
Q4 2024
Nov 19 to Dec 10
11.00 AM EST: USA, UK, Canada, Mexico and Europe
06.00 AM GMT: MiddleEast, Asia and Australia
You can make colors transparent using alpha values. Alpha values range from 0 (completely transparent) to 1 (completely opaque). This can be done with rgba() for RGB colors and hsla() for HSL colors.
.midground {
background-color: rgba(0, 255, 0, 0.5);
}
.foreground {
background-color: hsla(34, 100%, 50%, 0.1);
}
.transparent {
color: transparent;
}
Colors can also be specified using hexadecimal values. For example, #ff0000 represents red, and shorter forms like #00f can also be used.
.red {
color: #ff0000;
}
.short-blue {
color: #00f;
}
HSL stands for Hue, Saturation, and Lightness. It is another way to specify colors. For example, hsl(200, 70%, 50%) gives a specific shade of blue.
.light-blue {
background-color: hsl(200, 70%, 50%);
}
RGB stands for Red, Green, and Blue. Colors are specified with three values representing these colors, ranging from 0 to 255. For example, rgb(249, 2, 171) is a hot pink color.
.hot-pink {
color: rgb(249, 2, 171);
}
.green {
color: rgb(0, 255, 0);
}
Colors can also be named directly in CSS. For example, 'aqua' and 'khaki' are named colors that you can use.
h1 {
color: aqua;
}
li {
color: khaki;
}
The font-weight property controls how thick or thin the text appears. You can use values like 100 (thin) to 900 (thick). The default is 400, which is normal weight.
/* Makes text bolder */
p {
font-weight: 700;
}
The font-style property changes the style of text. Setting it to 'italic' makes the text italicized.
.text {
font-style: italic;
}
The @font-face rule allows you to use custom fonts by specifying the font file location. This is useful if you want to use a font that isn't installed on the user's computer.
@font-face {
font-family: 'Glegoo';
src: url('//css.site24x7static.com/fonts/Glegoo-Regular.ttf') format('truetype');
}
If the preferred font isn't available, you can specify fallback fonts. This ensures your text is still readable if the primary font can't be loaded.
/* Uses Arial if Helvetica isn't available */
p {
font-family: "Helvetica", "Arial";
}
The line-height property sets the distance between lines of text. It helps improve readability by adding space between lines.
p {
line-height: 10px;
}
You can include external fonts by linking to them in your HTML. For example, linking to Google Fonts will allow you to use fonts hosted there.
<head>
<link href="https://fonts.googleapis.com/css?family=Droid%20Serif" rel="stylesheet">
</head>
Favourites
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Java
HTML and CSS 
Python
Javascript
Troubleshooting
Blogs
Learn
Tools