Cheatsheets
CSS for Colors and Text Styles

CSS for Colors and Text Styles

Colors in CSS

Using transparency in colors

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

Hexadecimal colors

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

Using HSL colors

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

Using RGB colors

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

Color name keywords

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

Text Styles in CSS

Font thickness (Font Weight)

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

Font style (Italic)

The font-style property changes the style of text. Setting it to 'italic' makes the text italicized.

                                

.text {
  font-style: italic;
}

Using custom fonts

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('//static.site24x7.jp/fonts/Glegoo-Regular.ttf') format('truetype');
}

Fallback fonts

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

Line height

The line-height property sets the distance between lines of text. It helps improve readability by adding space between lines.

                                

p {
line-height: 10px;
}

Linking to external fonts

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>

Programming Cheatsheets: Quick Reference for Productivity

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.