CSS Fundamentals and Styling Techniques

  1. CSS Integration Methods

CSS can be applied to HTML documents in three primary ways: inline styles, internal style sheeets, and external style sheets.

  • Inline styles are applied directly to elements using the style attribute.
  • Internal style sheets are defined within the <style> tag in the document's <head>.
  • External style sheets are linked via the <link> tag in the <head>.

Priority Order: Inline styles take precedence over internal styles, which in turn override external styles.

Example of External CSS Integration

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/comm.css">
    <title>Sample Page</title>
</head>

Example of Inline Style Usage

<a href="#" style="color: black; text-decoration: none;">Styled Link</a>
  1. CSS Selectors

Selectors determine which HTML elements a set of styles will apply to.

  • Element Selector: div {}
  • Class Selector: .my-class {}
  • ID Selector: #unique-id {}
  • Attribute Selector: [type='text'] {}

Selector Priority: Attribute selectors have higher priority than ID selectors, followed by class selectors, and finally element selectors.

  1. Dimension Properties
  • Width: width: 200px; or width: 50%;
  • Height: height: 100px; or height: 30%;
  1. Background Color

Use the background-color property to apply a background color to an element.

div {
    background-color: #f0f0f0;
}
  1. Text Alignment and Styling
  • Center Text: text-align: center;
  • Underline Text: text-decoration: underline;
  • Vertical Centering: Use line-height equal to the element's height for single-line vertical centering.
  1. Font Styling
  • Font Family: font-family: "Microsoft Yahei", SimSun, SimHei;
  • Font Size: font-size: 16px;
  • Font Wieght: font-weight: bold; (700), font-weight: normal; (400)
  • Font Style: font-style: italic; or font-style: oblique;
  1. Box Model (Core Concept)

The CSS box model consists of four components: content, padding, border, and margin.

  • Margin: Controls spacing outside the element. Use margin: 0 auto; for horizontal centering.
  • Padding: Controls spacing between content and border.
  • Border: Defines the element'ss border with properties like border-width, border-style (solid, dashed, dotted, double), and border-color.

Shorthand Margin Syntax: margin: 15px 25px 30px 45px; corresponds to top, right, bottom, and left margins respectively.

Margin Collapse: Vertical margins between elements can collapse into a single margin. To prevent this, use padding or a border.

Tags: css html Styling Box Model selectors

Posted on Mon, 18 May 2026 14:45:15 +0000 by luxluxlux

Hot Tags

©2026 Freaks City