CSS Styling Your Web Pages

CSS Styling Your Web Pages

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML. It controls the layout, design, and appearance of web pages, including colors, fonts, and spacing.  

Basic CSS Structure

CSS

selector {
  property: value;
}
  • Selector: Specifies the HTML element or group of elements to be styled.
  • Property: Defines the style attribute to be applied.
  • Value: Sets the value for the specified property.

Common CSS Properties

  • color: Sets the color of text or elements.
  • font-family: Sets the font to be used.
  • font-size: Sets the size of the font.
  • background-color: Sets the background color of an element.
  • margin: Sets the space around an element.
  • padding: Sets the space inside an element.
  • width: Sets the width of an element.
  • height: Sets the height of an element.
  • display: Controls how an element is displayed (e.g., block, inline, inline-block).

CSS Selectors

  • Element selector: Selects elements based on their tag name (e.g., p, h1).
  • Class selector: Selects elements with a specific class attribute (e.g., .my-class).
  • ID selector: Selects an element with a unique ID attribute (e.g., #my-id).
  • Attribute selector: Selects elements based on their attributes (e.g., [href]).

CSS Layouts

  • Float: Positions elements side-by-side.
  • Flexbox: A modern layout system for creating flexible and responsive layouts.
  • Grid: A grid-based layout system for complex layouts.

CSS is essential for creating visually appealing and functional web pages. By understanding the basics of CSS, you can customize the appearance of your website to match your desired design.

Leave a Reply

Your email address will not be published. Required fields are marked *