Skip to main content

Basic CSS properties

Basic CSS properties

Basic CSS properties define how an element should be displayed on a web page. Some of the most common are:color,font-size,background-color,margin,padding and floatThese properties allow you to control the visual appearance of HTML elements, improving the user experience and the aesthetics of the website.

Most Common Properties​

Basic CSS properties are fundamental for defining the style and presentation of elements on a web page. Here are some of the most common:

color: Defines the text color of an element. You can use color names, hexadecimal values, or RGB values.

p {
  color: red;
}

font-size: Defines the font size.

h1 {
  font-size: 32px;
}

background-color: Defines the background color of an element.

div {
  background-color: lightgray;
}

Positioning with float​

The propertyfloatIt is used to position an element to the left or right of its container, allowing other elements to flow around it. It is useful for creating column layouts or aligning images with text.

The CSS float property places an element to the left or right of its container, allowing text and inline elements to wrap around it. The element is removed from the normal page flow, although it remains part of the overall flow (unlike absolute positioning).

div {
  /* Valores */
  float: left;
  float: right;
  float: none;
  float: inline-start;
  float: inline-end;

  /* Values Globales */
  float: inherit;
  float: initial;
  float: revert;
  float: revert-layer;
  float: unset;
}

Background​

The propertybackground-colorSets the background color of an element.

CSS
div {
  background-color: lightblue;
}

Fonts​

font-family: Defines the font of the text.

CSS
p {
  font-family: Arial, sans-serif;
}

font-size: Defines the font size.

CSS
h1 {
  font-size: 24px;
}

font-weight: Defines the font weight.

CSS
strong {
  font-weight: bold;
}

Text​

text-align: Aligns the text horizontally.

CSS
h2 {
  text-align: center;
}

text-decoration: Adds decorations to text, such as underlining.

CSS
a {
  text-decoration: none;
}

text-transform: Controls text capitalization.

CSS
p.uppercase {
  text-transform: uppercase;
}

Margins and Padding​

margin: Sets the exterior space around an element.

CSS
div {
  margin: 20px;
}

padding: Creates the interior space within an element.

CSS
div {
  padding: 10px;
}

Borders​

border: Defines the border of an element.

CSS
p {
  border: 1px solid black;
}

border-radius: Defines rounded edges.

CSS
img {
  border-radius: 50%;
}

Dimensions​

width: Sets the width of an element.

CSS
img {
  width: 100px;
}

height: Sets the height of an element.

CSS
img {
  height: 100px;
}

Display and Visibility​

display: Controls how an element is displayed.

CSS
.block {
  display: block;
}

.inline {
  display: inline;
}

.none {
  display: none;
}

Visibility: Controls whether an element is visible or not.

CSS
.invisible {
  visibility: hidden;
}

Summary​

Basic CSS properties are essential for defining the style and presentation of elements on a web page. With these properties, you can control the color, size, background, margins, padding, and borders of HTML elements, improving the user experience and the website's aesthetics.

Resources
Exercises

💻Get your hands on the code with these simple challenges: