2024-05-12T07:51:41
Status: #moc
Tags: #technology #standards #softwaredevelopment #xpath #xml #json #xmlspy
Links: [[home]] | [[Technology]] | [[Standards]] | [[Software Development]] | [[XPath]] | [[XML]] | [[JSON]] | [[XMLSpy]]
# CSS: Cascading Style Sheets
[CSS](https://www.w3.org/Style/CSS/) (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in [[HTML]] or [[XML]] (including XML dialects such as [[SVG]] or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It's one of the cornerstone technologies of the World Wide Web, alongside HTML and [[JavaScript]].
![[afalk42_An_illustration_for_a_knowledge_base_article_about_CSS._a9cdce79-4158-4df5-9993-a470ebc08885.png]]
## History and Evolution of CSS
CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, the web was growing rapidly, but there was a clear need for web designers to have control over the layout and presentation of their web pages. The first official version, CSS1, was released in December 1996. It included basic features for font properties, text attributes, and color and spacing control. CSS2 followed in 1998, introducing positioning, media types, and table layout. Over the years, CSS has evolved through various versions, with CSS3, broken down into several separate modules for easier maintenance and faster development, making significant advancements in capabilities like animations, transitions, and responsive design for different devices.
## How CSS Works
CSS works by selecting elements in the document (specified by HTML or XML) and applying styles to them. These styles are defined by rules specified in the style sheets. A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style, while the declaration block contains one or more declarations separated by semicolons, each declaration including a CSS property name and a value, separated by a colon.
### Basic CSS Example: Styling Text
This example demonstrates how to style the text of an HTML paragraph using CSS. We'll change the color, font size, and font family of a paragraph element.
```html
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>This is a simple styled paragraph using CSS.</p>
</body>
</html>
```
<p style="color: blue; font-size: 20px; font-family: Arial, sans-serif;">This is a simple styled paragraph using CSS.</p>
Here, the `<style>` tag is used within the `<head>` section of the HTML document to include CSS. We define a style for all `<p>` (paragraph) elements on the page: The `color` property changes the text color to blue, `font-size` adjusts the size of the text to 20 pixels, and `font-family` sets the font to Arial, if available, or falls back to any available sans-serif font.
### Advanced CSS Example: Creating a Responsive Card UI with Flexbox
This example shows a more complex scenario where CSS Flexbox is used to create responsive cards that adjust their layout based on the screen size. This is particularly useful for designing layouts that need to adapt to different device screens, such as mobiles, tablets, and desktops.
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
gap: 30px;
}
.card {
flex: 1;
min-width: 200px;
padding: 20px;
background-color: #806020;
border: 1px solid #808080;
box-shadow: 5px 8px 16px rgba(255,80,80,0.7);
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</body>
</html>
```
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
In this example, `.container` serves as a flex container with `display: flex;` enabling flexbox layout and `flex-wrap: wrap;` allowing the cards to wrap onto multiple lines as needed. Each `.card` is set to flexibly grow with `flex: 1;` and has a minimum width of `200px` to ensure they don't become too narrow. The `gap: 30px;` property creates space between the cards. The use of the `@media` query with `max-width: 600px` makes the layout responsive; it changes the flex-direction to `column` on screens when the browser width is smaller than 600px, stacking the cards vertically.
## Key Concepts
### Selectors
Selectors are patterns used to select the elements you want to style. Types of selectors include:
- Element selectors (tag name)
- ID selectors (#id)
- Class selectors (.class)
- Attribute selectors ([attr=value])
- Pseudo-class selectors (:hover, :active, :visited)
### Properties and Values
CSS properties are human-readable identifiers that indicate which stylistic feature (e.g., font-size, color, margin) you want to modify. Each property is assigned a value, which specifies how to adjust the style of the selected elements.
### The Box Model
Every element in web design is considered a rectangular box, and the CSS box model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the content itself. Understanding the box model is crucial for designing and creating layouts.
### Positioning
CSS provides various ways to position elements, including static, relative, absolute, and fixed positioning, affecting how elements are stacked and layered on the web page.
### Layouts
CSS offers a variety of layout modules for designing flexible and responsive web layouts, including:
- **Flexbox**: Provides a more efficient way to lay out, align, and distribute space among items in a container.
- **CSS Grid**: Offers a grid-based layout system, enabling more complex designs and two-dimensional layouts.
- **Multi-column layouts**: Enables content to be flowed into multiple columns for a newspaper-like effect.
### Responsive Design
Responsive design makes web pages function well on a variety of devices and window or screen sizes. Media queries are a key part of responsive design, allowing CSS to be applied only under specific conditions (e.g., certain screen widths).
### Accessibility
CSS can also influence the accessibility of web content. Proper use of CSS can improve content structure, provide visual cues, and enhance navigational elements for users with disabilities.
## Best Practices
- **Separation of Presentation and Content**: Keep your CSS separate from your HTML to promote readability and maintainability.
- **Use of Shorthand Properties**: Where possible, use shorthand CSS properties to reduce the size of your CSS files and make them easier to read.
- **Naming Conventions**: Adopt consistent and meaningful naming conventions for your CSS classes and IDs to make them easier to understand and maintain.
- **Use of Comments**: Comment your CSS code to explain the purpose of specific styles, especially if they're complex or not immediately obvious.
- **Mobile First**: Start designing for smaller screens first, then use media queries to add styles as the screen size increases.
- **Efficiency**: Write efficient CSS selectors aiming for the best performance. Avoid overly complex selectors that can slow down page rendering.
## CSS Editing in XMLSpy
[Editing of CSS files](https://www.altova.com/xmlspy-xml-editor/advanced#HTML-CSS) is, of course, fully supported in [[XMLSpy]] along with all other relevant web and data formatting standards, such as [[JSON]], [[XML]], [[YAML]], [[Markdown]], and all related coding languages, such as [[SQL]], [[XQuery]], [[JavaScript]], [[C#]], etc.
![[EditingCSSinXMLSpy.png]]
In addition to a full CSS Outline window, XMLSpy also supports entry helpers for relevant CSS Properties as well as all available HTML Elements, plus an information window that shows relevant linked HTML files as well as allowing to view the related HTML either in the built-in browser view within XMLSpy, or opening it using installed web browsers on the same computer.
## Conclusion
CSS is a powerful language for designing and controlling the presentation of web pages. By separating content from design, CSS improves web accessibility, provides flexibility and control in the presentation of web pages, and allows multiple pages to share formatting. As web standards evolve and more features are introduced, CSS continues to play a vital role in creating visually engaging and functional websites. By understanding and applying CSS best practices, developers and designers can ensure their websites are efficient, accessible, and responsive across all devices.
## References
- https://www.w3.org/Style/CSS/
- https://www.w3.org/TR/css-2023/#css-official
- https://www.w3schools.com/css/
- https://www.altova.com/xmlspy-xml-editor/advanced#HTML-CSS