Burns Web Services

Appearance

CSS (Cascading Style Sheets) allows you to create visually stunning web pages, but how does it really work? In this guide, we'll delve into the basics of CSS with a simple syntax example and explain some key concepts of the language.

Welcome to the world of CSS, the magical language that brings style and flair to your web pages! 🎨✨

CSS stands for Cascading Style Sheets, and it helps you transform your plain HTML into a visual masterpiece. 🖌️🖼️ By defining styles for your HTML elements, you can control colors, fonts, layouts, and much more.

Get ready to unleash your creativity and make your websites dazzling with CSS! 🎉💻 To start, here’s a quick example of a CSS rule:

css
body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

In this example, the body selector targets the HTML <body> element. The properties background-color and font-family define the background color and font style for the webpage.

Let's dive deeper into CSS and discover its wonders!

Colors ​

Colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

Hexadecimal (Hex) Notation ​

  • Format: #RRGGBB or shorthand #RGB
  • Example: #FF5733 or #F53
  • Advantages:
    • Compact and widely used.
    • Easy to copy and paste from design tools.

RGB Notation ​

  • Format: rgb(red, green, blue)
  • Example: rgb(255, 87, 51)
  • Advantages:
    • Useful for specifying colors with opacity using rgba.
    • Directly corresponds to how colors are displayed on screens.

HSL Notation ​

  • Format: hsl(hue, saturation%, lightness%)
  • Example: hsl(9, 100%, 60%)
  • Advantages:
    • More intuitive for adjusting colors based on human perception.
    • Easy to adjust brightness and saturation.

Recommendations ​

  • Hex is great for simple, solid colors and is very common in web development due to its simplicity.
  • RGB/RGBA is ideal when you need to control transparency or work directly with screen color values.
  • HSL/HSLA is recommended when you want to manipulate colors programmatically, such as adjusting hue, saturation, or lightness, as it aligns more closely with human perception.

Backgrounds ​

Properties are used to add background effects for elements.

background-color ​

The background-color property specifies the background color of an element.

css
body {
  background-color: lightblue;
}

Try it here 👉

background-image ​

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

css
body {
  background-image: url("paper.gif");
}

background-repeat ​

By default, the background-image property repeats an image both horizontally and vertically.

css
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Try it here 👉

background-attachment ​

The background-attachment property specifies whether the background image should scroll or be fixed.

css
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Try it here 👉

css
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

Try it here 👉

Background - Shorthand Property ​

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

css
body {
    background: #ffffff url("img_tree.png") no-repeat fixed right top;
}