Contact
3 4 5 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

What is CSS

CSS

Definition:

CSS ( cascading style sheets) is a powerful tool that integrates with HTML to provide developers and users with advanced control over the visual presentation of web pages. CSS allows content to be separated from presentation, making it easier to create consistent and attractive designs. With CSS, designers can define how different elements of a page, such as headings, links, images and tables, should be displayed. In addition, these style sheets can be applied globally to multiple pages, simplifying the maintenance and updating of an entire Web site design. This optimization capability also contributes to improved search engine optimization(SEO), as it allows for cleaner and more structured code.

Origin and evolution of CSS

The origin of CSS (Cascading Style Sheets) dates back to 1994, when Håkon Wium Lie, working at CERN, proposed the idea of a language that would separate content from presentation in web documents. At the time, HTML was mainly used for structuring content, without much visual design capabilities. Lie teamed up with Bert Bos, who was also exploring similar solutions, and together they refined the initial proposal. Their goal was to create a system that would allow developers to apply styles more efficiently and flexibly.

In 1996, the World Wide Web Consortium (W3C) published the first official CSS specification, known as CSS1, ushering in a new era in web design. Since its inception, CSS has transformed web design and development. This evolution has facilitated the separation of content and presentation, improving both development efficiency and user experience. The evolution of CSS through its main versions and features is detailed below.

  • CSS1 (1996)
    • Introduction: CSS1 was the first official version, published by the W3C in December 1996.
    • Features: Provided basic styling capabilities, such as fonts, colors, and spacing. Allowed developers to separate content from visual design.
  • CSS2 (1998)
    • Enhancements: Introduced in May 1998, CSS2 significantly extended the capabilities of CSS1.
    • New features: Added support for style sheets for different media (print, screen, etc.), absolute and relative positioning, and styles for tables.
    • Accessibility: Improvements in accessibility and presentation for different devices.
  • CSS2.1 (2011)
    • Revision: CSS2.1 was a revision of CSS2, which fixed bugs and removed little-used features.
    • Stable standard: It became the stable standard, being widely adopted by browsers.
  • CSS3 (As of 2011)
    • Modules: CSS3 introduced a modular approach, allowing different parts of the standard to evolve at different rates.
    • New capabilities: Included advanced features such as drop shadows, rounded edges, gradients, transitions, animations, and support for web fonts.
    • Responsive design: Media queries, a crucial part of CSS3, enabled responsive design, adapting the layout to different screen sizes.
  • CSS4 (Under development)
    • Status: Although there is no official “CSS4” as such, the term is used to refer to new features being developed and added to CSS.
    • Emerging features: Include enhancements to selectors, advanced layout capabilities such as grid and flexbox, and new features for animations and visual effects.

HTML style tags

Before the introduction of CSS, formatting HTML documents was considered tedious and complex due to the need to include style attributes directly in the HTML code. This meant that style tags required detailed and repetitive descriptions to define elements such as:

  • Font colors: specify each color individually in each element.
  • Background styles: define backgrounds for specific sections, which was a repetitive process.
  • Element alignment: aligning text and images required multiple attributes on each label.
  • Borders: setting borders for tables and other elements was laborious.
  • Sizes: adjust the size of text and images on a case-by-case basis.

The term “cascading” in CSS refers to the ability to apply multiple style sheets to the same web page. This allows different styles to be combined in a hierarchical fashion, where more specific rules can override general ones. CSS was developed by the World Wide Web Consortium (W3C), an international organization that sets standards for the web.

CSS formats

CSS is versatile and is used to define the formatting of various types of documents, including:

  • Hypertext Markup Language (HTML): the basic standard for creating Web pages.
  • Extensible Hypertext Markup Language (XHTML): a stricter version of HTML that follows the rules of XML.
  • Extensible Markup Language (XML): a general markup language that allows you to define documents with a customized structure.
  • Scalable Vector Graphics (SVG): a format for vector graphics that allows scalable images without loss of quality.
  • XML User Interface Language (XUL): a language used primarily by Mozilla applications to define user interfaces.

With CSS, developers can create more dynamic and accessible websites, improving both the user experience and the efficiency of web development.

CSS examples

Some CSS codes are shown below with their explanation:

Example 1: Styling the body of the page

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 20px;
}
  • font-family: Arial, sans-serif;: Defines the text font for the entire body of the page. If Arial is not available, use the generic font sans-serif.
  • background-color: #f4f4f9;: Sets a light background color for the body of the page using a hexadecimal value.
  • margin: 0;: Removes the default browser margin around the body so that the content starts right from the edge of the window.
  • padding: 20px;: Adds a 20 pixel space inside the body, separating the content from the body border.

Example 2: Style of a container

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
  • width: 80%;: Sets the width of the container to 80% of the width of the parent element.
  • max-width: 1200px;: Limits the maximum width of the container to 1200 pixels, ensuring that it does not expand too much on large screens.
  • margin: 0 auto;: Centers the container horizontally on the page. 0 removes the top and bottom margin, and auto adjusts the side margins automatically.
  • border: 1px solid #ccc;: Add a 1 pixel thick, solid, light gray border around the container.
  • padding: 10px;: Adds an internal space of 10 pixels between the border of the container and its content.
  • box-shadow: 0 0 10px rgba(0, 0, 0, 0, 0.1);: Applies a shadow around the container, with a 10 pixel blur and a black color with 10% opacity.

Example 3: Button style

button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}
  • background-color: #007bff;: Sets a blue background color for the button.
  • color: #fff;: Sets the color of the button text to white.
  • border: none;: Removes any default border from the button.
  • padding: 10px 20px;: Adds 10 pixels of space vertically and 20 pixels horizontally inside the button.
  • border-radius: 5px;: Round the corners of the button with a radius of 5 pixels.
  • cursor: pointer;: Changes the cursor to a hand when the user passes the mouse over the button, indicating that it is interactive.
  • transition: background-color 0.3s ease;: Adds a smooth transition to the background color when it changes, lasting 0.3 seconds.
  • button:hover { background-color: #0056b3; }: Changes the background color of the button to a darker blue when the user hovers the mouse over it, thanks to the pseudo-class :hover.

Related Terms