CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and overall visual appearance of web pages, separating content from design for easier maintenance and consistency. CSS enables developers to create responsive, accessible, and aesthetically pleasing websites. It works by targeting HTML elements and applying styles through rules that the browser interprets.

Unlike HTML, which structures content, CSS focuses on how that content looks. For example, you can change the color of all headings or add spacing around images without altering the HTML. CSS is essential for modern web development, supporting features like animations and responsive designs that adapt to different screen sizes.

To get started, you'll need basic knowledge of HTML. CSS can be added to HTML in three ways:

  • Inline: Directly in an HTML element using the style attribute (e.g., <p style="color: blue;">Text</p>).

  • Internal: Within a <style> tag in the <head> section of the HTML file.

  • External: In a separate .css file linked via <link rel="stylesheet" href="styles.css"> in the HTML head (recommended for larger projects).developer.mozilla.orgw3schools.com

CSS Syntax

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a property and a value, separated by a colon.

Basic syntax example:

CSS

selector {
  property: value;
  property: value;
}

For instance:

CSS

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

This styles all <p> elements with red text and a 16-pixel font size.

geeksforgeeks.org

CSS Syntax - GeeksforGeeks

Comments in CSS are added with /* comment */.developer.mozilla.orgw3schools.com

Selectors

Selectors target specific elements. Common types include:

  • Type Selector: Targets elements by tag name (e.g., p { } for paragraphs).

  • Class Selector: Uses a dot (e.g., .intro { } for elements with class="intro").

  • ID Selector: Uses a hash (e.g., #header { } for the element with id="header").

  • Universal Selector: * { } targets all elements.

  • Attribute Selector: Targets based on attributes (e.g., [type="text"] { }).

  • Pseudo-classes: For states like :hover, :active, :first-child.

  • Pseudo-elements: Styles parts of elements, like ::before or ::after.

  • Combinators: Define relationships, e.g., descendant (div p), child (div > p), adjacent sibling (h1 + p).

Combinators and pseudo-classes allow precise targeting, such as styling links on hover: a:hover { color: blue; }.

Specificity determines which rule applies if conflicts arise: ID > Class/Attribute/Pseudo-class > Type/Pseudo-element. Inline styles have the highest specificity.developer.mozilla.orgdeveloper.mozilla.org

Properties and Values

CSS has hundreds of properties grouped into categories:

  • Text and Fonts: color, font-family (e.g., "Arial, sans-serif"), font-size, text-align, text-decoration, line-height.

  • Colors: Use names (e.g., "red"), HEX (#ff0000), RGB (rgb(255,0,0)), HSL, or RGBA for transparency.

  • Backgrounds: background-color, background-image: url('image.jpg'), background-repeat, background-position. Gradients like linear-gradient(to right, red, yellow).

  • Borders: border: 1px solid black;, border-radius for rounded corners, border-image.

  • Margins and Padding: margin: 10px; (outside space), padding: 10px; (inside space). Shorthand: top right bottom left.

  • Dimensions: width, height, max-width, min-height. Units: px, %, em, rem, vw/vh.

  • Display and Visibility: display: block/inline/flex/grid/none;, visibility: hidden;.

  • Positioning: position: static/relative/absolute/fixed/sticky;, top/right/bottom/left, z-index for stacking.

  • Overflow: overflow: hidden/scroll/auto; for content exceeding boxes.

  • Lists and Tables: list-style-type, table-layout, border-collapse for tables.

  • Transforms and Transitions: transform: rotate(45deg);, transition: all 0.3s;.

  • Animations: @keyframes for custom animations.

Values can be keywords, numbers, lengths, colors, or functions like calc(100% - 20px).w3schools.comdeveloper.mozilla.org

The Box Model

Every HTML element is treated as a box consisting of:

  • Content: The actual text or image.

  • Padding: Space between content and border.

  • Border: The line around the padding.

  • Margin: Space outside the border.

By default, width and height apply only to content. Use box-sizing: border-box; to include padding and border in the dimensions, making layouts easier.

Example:

CSS

div {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box;
}

edu.gcfglobal.org

Basic CSS: The CSS Box Model

developer.mozilla.org

Layout Techniques

CSS provides several ways to arrange elements:

  • Normal Flow: Default block-level stacking and inline flow.

  • Floats: float: left/right; to wrap text around elements (legacy, use with caution).

  • Positioning: Relative for minor adjustments, absolute/fixed for overlays or sticky headers.

  • Flexbox: One-dimensional layout for rows or columns. Set display: flex; on container.

    • Properties: flex-direction, justify-content, align-items, flex-wrap.

    • On items: flex-grow, flex-shrink, order.

    Example for a row layout:

    CSS

    .container {
  display: flex;
  justify-content: space-between;
}

wpengine.com

How To Combine Flexbox and CSS Grids for Efficient Layouts

  • Grid: Two-dimensional layout. Set display: grid; on container.

    • Properties: grid-template-columns: repeat(3, 1fr);, grid-gap, grid-auto-rows.

    • On items: grid-column, grid-row.

    Example for a 12-column grid:

    CSS

    .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

wpengine.com

How to Create a Simple Layout with CSS Grid Layouts

  • Responsive Design: Use media queries to adapt layouts.

    CSS

    @media (max-width: 600px) {
  body { font-size: 14px; }
}

    Combine with units like %, vw, and flex/grid for mobile-friendly sites.developer.mozilla.orgw3schools.com

Advanced Topics

  • Cascade and Inheritance: Styles cascade based on source (user agent, user, author) and specificity. Properties like color inherit from parents unless overridden.

  • Variables (Custom Properties): Define reusable values like --main-color: blue; and use var(--main-color).

  • Transitions and Animations: Smooth changes with transition: background-color 0.5s;. Animations use @keyframes.

    CSS

    @keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
div { animation: example 5s infinite; }

  • Shadows and Effects: box-shadow, text-shadow, filter: blur(5px);.

  • Multiple Columns: column-count: 3;.

  • Forms and UI: Style inputs, buttons, tooltips, dropdowns, navigation bars.

  • Preprocessing: Tools like Sass extend CSS with variables, nesting, and mixins (beyond basic CSS).

  • Best Practices: Use semantic selectors, organize code (e.g., by component), minimize specificity, use tools like browser DevTools for debugging.

For accessibility, ensure sufficient contrast and logical focus order.developer.mozilla.orgdeveloper.mozilla.org

Practice and Resources

Start with simple projects like styling a personal page. Use online editors like CodePen. For deeper learning, explore MDN Web Docs or W3Schools tutorials. Remember, CSS evolves—check browser compatibility on Can I Use.

This guide covers the essentials; practice is key to mastery!

Credits

From GROK.COM