Abdiel Wilson

Posted on Dec 24

CSS: A Basic Guide

Cascading Style Sheets (CSS) is a styling language used to describe the presentation of HTML documents. It allows developers to control the layout, colors, fonts, and overall appearance of web pages, making them more visually appealing and user-friendly.

This article covers the basics of CSS, its syntax, common properties, and an example of creating and styling a simple form.

CSS Syntax

CSS rules are written in a specific syntax that consists of a selector, properties, and values. Here's the general structure:

selector {
  property: value;
}

Selector: Targets the HTML element(s) you want to style.
Property: Defines what aspect of the element you want to style (e.g., color, font size).
Value: Specifies the details of the property (e.g., red, 16px).

Example:

p {
  color: blue;  
  font-size: 16px;  
}

This rule styles all <p> elements, setting their text color to blue and font size to 16px.

Using CSS

CSS can be added to HTML documents in three ways:

Inline CSS: Styles applied directly to an HTML element using the style attribute.

   <p style="color: red;">This is red text.</p>

Internal CSS: Styles written within a <style> tag inside the <head> section of the HTML document.

   <style>
     body {
       background-color: lightgray;
     }
   </style>

External CSS: A separate .css file linked to the HTML document using the <link> tag.

   <link rel="stylesheet" href="styles.css">

CSS Properties and Their Values

CSS provides a wide range of properties to style HTML elements. Below are some commonly used properties:

Text and Font Properties

color: Sets the text color.

  color: red;

font-size: Adjusts the size of text.

  font-size: 20px;

text-align: Aligns text (e.g., left, center, right).

  text-align: center;

font-family: Specifies the font type.

  font-family: Arial, sans-serif;

Box Model Properties

width and height: Define the size of an element.

  width: 300px;
  height: 200px;

padding: Adds space inside the element.

  padding: 10px;

margin: Adds space outside the element.

  margin: 20px;

border: Adds a border around the element.

  border: 2px solid black;

Background Properties

background-color: Sets the background color.

  background-color: lightblue;

background-image: Adds a background image.

  background-image: url('image.jpg');

Other Useful Properties

display: Controls the layout of an element (e.g., block, inline, flex).

  display: flex;

position: Specifies how an element is positioned in the document.

  position: absolute;

overflow: Manages content that overflows an element's box.

  overflow: hidden;

Building a Simple Form and Styling It with CSS

HTML Code for the Form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="contact-form">
    <h2>Contact Us</h2>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email">

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" placeholder="Your message"></textarea>

    <button type="submit">Submit</button>
  </form>
</body>
</html>

CSS Code to Style the Form

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.contact-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.contact-form h2 {
  margin-bottom: 20px;
  color: #333;
}

.contact-form label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contact-form button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #0056b3;
}

Preview

Conclusion

CSS is a powerful tool for designing visually engaging web pages. With practice and creativity, you can create stunning layouts and user interfaces. Experiment with the properties and techniques discussed here to enhance your web development skills.