Core CSS Techniques for Web Pages

CSS is a language for describing the presentation of web pages. It allows developers to control layout, colors, fonts, and overall visual appearance. This article covers fundamental CSS concepts: style inclusion methods, selectors, floats, positioning, and the box model.

Style Inclusion Methods

There are three primary ways to integrate CSS into an HTML document.

Inline Styles

Styles are applied directly to an element using the style attribute. Multiple declarations are separated by semicolons.

<button style="
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
">Send</button>

Inline styles mix presentation with structure, making maintenance harder and reducing reusability. They only affect a single element.

Internal Stylesheet

CSS rules are placed inside a <style> block within the <head> section. Selectors define which elements receive the styles.

<head>
  <style>
    .btn {
      background: #008CBA;
      color: white;
      padding: 10px 20px;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="btn">Save</button>
  <button class="btn">Cancel</button>
</body>

This separates styles from the structure, but still keeps them in the same file, limiting reuse across multiple pages.

External Stylesheets

The most maintainable approach is to store CSS in a separate .css file and link it in the HTML <head>.

<head>
  <link rel="stylesheet" href="styles/main.css">
</head>

External files can be shared among many HTML pages, ensuring design consistency and simplifying updates.

Selectors

Selectors determine wich elements a set of CSS rules targets.

Element Selector

Matches all elements of a given tag name.

p {
  color: #333;
  line-height: 1.6;
}

This applies to every <p> element, wich may be too broad if only certain paragraphs need special styles.

ID Selector

Targets an element with a specific id attribute using #.

#header {
  background: #f4f4f4;
  padding: 20px;
}

Since id values must be unique, this selector affects only one element per page. Its lack of flexibility limits its use.

Class Selector

Targets elements with a specific class attribute, defined with a dot (.). It is the most versatile. Multiple classes can be combined on one element.

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}
.highlight {
  background: #fff3cd;
}

<div class="card highlight">Special offer</div>
<div class="card">Regular item</div>

Floats

The float property removes an element from the normal document flow and shifts it to the left or right, allowing text and inline elements to wrap around it.

.float-left {
  float: left;
  margin-right: 15px;
}

When an element is floated, it does not occupy space in the normal flow, so subsequent block-level elements may rise up underneath it unless cleared.

Consider three colored boxes inside a container:

<style>
  .container {
    width: 600px;
    border: 2px solid #aaa;
    overflow: auto; /* clearfix */
  }
  .box {
    width: 120px;
    height: 120px;
    float: left;
    margin: 5px;
  }
  .red { background: #ff6b6b; }
  .green { background: #51cf66; }
  .blue { background: #339af0; }
</style>
<div class="container">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
</div>

If the container is not wide enough, the floating boxes will stack to the next line.

Positioning

The position property controls how an element is placed in the layout.

Static Positioning

This is the default. Elements follow the normal document flow; top, right, bottom, left have no effect.

.static-box {
  position: static;
  background: #e9ecef;
  padding: 10px;
}

Absolute Positioning

An element with position: absolute is removed from the normal flow and positioned relative to its nearest positioned ancestor (or the initial containing block if none). It does not reserve space.

.absolute-box {
  position: absolute;
  top: 50px;
  left: 200px;
  background: #ff922b;
  padding: 10px;
}

Other elements move up to fill the gap left behind.

Relative Positioning

position: relative offsets the element from its normal position without removing it from the flow. The space it originally occupied remains.

.relative-box {
  position: relative;
  top: 15px;
  left: 25px;
  background: #20c997;
  padding: 10px;
}

The element is visually shifted, but the layout behaves as if it were still in its original place.

Fixed Positioning

position: fixed removes the element from the flow and fixes it relative to the viewport. It stays in place even during scrolling.

.fixed-banner {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #7950f2;
  color: white;
  padding: 10px 20px;
}

The Box Model

Every element in a web page is a rectangular box. The CSS box model describes how an element’s size is calculated, consisting of content, padding, border, and margin areas.

Content: The actual text or image.
Padding: Space between content and border, transparent.
Border: The line surrounding the padding.
Margin: Space outside the border, transparent.

The total width of an element is width + padding-left + padding-right + border-left + border-right. Margin does not count toward element width but affects spacing.

Example:

.card {
  width: 250px;
  padding: 15px 20px;
  border: 2px solid #999;
  margin: 10px auto;
  background: #f8f9fa;
}

Using browser developer tools, you can inspect and visualize the box model for any element.

Tags: css web development Styling

Posted on Fri, 08 May 2026 17:44:46 +0000 by Simbachips

Freaks City