CSS Basic Styling Techniques

CSS Basic Styling Techniques refer to fundamental methods of applying styles to HTML elements using CSS. These techniques include changing text properties, modifying backgrounds, setting borders, adjusting element positioning, and controlling element visibility.

Let's explore each technique step by step, with clarifications and examples.

Don't forget to use our free live html editor to test tutorial codes .

Modifying Backgrounds

Setting a blue background color for a specific class.


/* Define styles for the container */
.container {
  background-color: blue; /* Set the background color to blue */
}

/* Define styles for the body background */
.body-background {
  background-color: blue; /* Set the background color to blue */
}

Altering the background of elements, including colors, images, and gradients.

Setting Borders

Applying a dashed red border to an image.


/* Define styles for all images */
img {
  border: 2px dashed red; /* Set a 2px dashed red border around images */
}

Adding borders around elements with control over style, color, and thickness.

Adjusting Element Positioning

Centering a div horizontally on the page.


/* Center a div horizontally by setting both left and right margins to auto */
.center-div {
  margin-left: auto; /* Set the left margin to auto */
  margin-right: auto; /* Set the right margin to auto */
}

Controlling the position and layout of elements on the webpage.

Controlling Element Visibility

Hiding a specific class of elements.


/* Hide an element by setting its display property to 'none' */
.hide {
  display: none; /* Set the display property to 'none' */
}

Showing or hiding elements on the webpage.

Adjusting Element Sizes

Setting the width and height of an image to 300 pixels.


/* Define styles for all images */
img {
  width: 300px; /* Set the width to 300 pixels */
  height: 300px; /* Set the height to 300 pixels */
}

Modifying the dimensions (width and height) of elements.

Changing Text Properties

Changing the color of all paragraphs to red.


p {
  color: red;
}

Modifying the appearance of text elements, such as font size, color, and style.

Styling Links

Changing the color and underlining of all links on the page.


a {
  color: blue;
  text-decoration: underline;
}

Applying styles specifically to anchor (link) elements.

Formatting Lists

Changing the bullet style and adding margin to list items.


/* Define styles for all unordered lists */
ul {
  list-style-type: square; /* Use square bullets for list items */
}

/* Define styles for list items */
li {
  margin-left: 10px; /* Add a left margin of 10px to list items */
}

Controlling the appearance of ordered and unordered lists.

Adjusting Text Alignment

Aligning a paragraph to the center of its container.


p {
  text-align: center;
}

Changing the horizontal alignment of text within an element.

Styling Headings

Setting a specific font and color for all headings.


/* Define styles for heading elements h1 to h6 */
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif; /* Set the font family to Arial or sans-serif if Arial is not available */
  color: #333333; /* Set the text color to #333333 */
}

Applying styles to heading elements (h1-h6).

Changing Font Styles

Making the text within a class bold and italic.


/* Define styles for elements with the class "highlight" */
.highlight {
  font-weight: bold; /* Set the font weight to bold */
  font-style: italic; /* Set the font style to italic */
}

Modifying font properties like style, weight, and decoration.