Documentation

    Table of Content
    • 3D File Formats
      • 3D File Formats
      • 3D2
      • 3DS
      • 3MF
      • AMF
      • ASE
      • DAE
      • DRC
      • FBX
      • GLB
      • GLTF
      • JRXML
      • JT
      • OBJ
      • PLY
      • PRC
      • RVM
      • STEP
      • U3D
      • VRML
      • X
      • X3D
    • Audio File Formats
      • Audio File Formats
      • AAC
      • FLAC
      • M3U
      • MID
      • MKA
      • MP3
      • OGG
      • RA
      • SDT
      • STAP
      • WAV
    • CAD File Formats
      • CAD File Formats
      • CF2
      • DC3
      • DGN
      • DWF
      • DWFX
      • DWG
      • DWT
      • DXF
      • HPGL
      • IFC
      • IGES
      • IGS
      • JVSG
      • NWC
      • NWD
      • NWF
      • PAT
      • PHJ
      • PLT
      • PSM
      • PSS
      • RVT
      • STL
    • Compression File Formats
      • Compression File Formats
      • 7Z
      • ARC
      • ARJ
      • BZ2
      • DAA
      • GZ
      • RAR
      • TAR
      • ZIM
      • ZIP
    • Database
      • Database File Formats
      • ACCDB
      • ACCDE
      • ACCDT
      • ACCFT
      • BAK
      • BCP
      • DDL
      • DTSX
      • LDF
      • MDB
      • MDF
      • MYI
      • NDF
      • NSF
      • SQL
      • SQLITE
    • EBook File Formats
      • EBook File Formats
      • AZW
      • AZW3
      • EPUB
      • FB2
      • KFX
      • LRF
      • LRS
      • LRX
      • MOBI
      • TR
    • Email File Formats
      • Email File Formats
      • EDB
      • EML
      • EMLX
      • ICS
      • MBOX
      • MSG
      • OFT
      • OST
      • PST
      • TNEF
      • VCF - Virtual Contact File
    • Font
      • Font File Formats
      • CFF
      • CFF2
      • EOT
      • FNT
      • FON
      • JFPROJ
      • OTF
      • PFA
      • PFB
      • PFM
      • SFD
      • TTF
      • WOFF
    • GIS File Formats
      • GIS File Formats
      • E00
      • FileGDB
      • GeoJSON
      • GML
      • GPX
      • KML
      • KMZ
      • OSM
      • SHP
    • Image File Formats
      • Image File Formats
      • APNG
      • AVIF
      • BMP
      • CDR
      • CMX
      • DCM
      • DIB
      • DICOM
      • DJVU
      • DNG
      • EMF
      • EMZ
      • EXIF
      • GIF
      • ICO
      • J2K
      • JP2
      • JPEG
      • JXR
      • ODG
      • OTG
      • PNG
      • PSB
      • PSD
      • SVGZ
      • TGA
      • TIFF
      • VDX
      • VSD
      • VSDM
      • VSDX
      • VSS
      • VSSM
      • VSSX
      • VST
      • VSTM
      • VSTX
      • VSX
      • VTX
      • WEBP
      • WMF
      • WMZ
    • Note Taking File Formats
      • Note Taking File Formats
      • ONE
      • ONETOC2
    • Page Description Language
      • Page Description Language
      • CGM
      • EPS
      • PCL
      • PS
      • SVG
      • SWF
      • TEX
      • XPS
      • XSLFO
    • PDF
      • PDF
      • PDF/A
      • PDF/E
      • PDF/UA
      • PDF/VT
      • PDF/X
    • Presentation File Formats
      • Presentation File Formats
      • ODP
      • OTP
      • POT
      • POTM
      • POTX
      • PPS
      • PPSM
      • PPSX
      • PPT
      • PPTM
      • PPTX
    • Programming
      • Programming
      • C
      • Class
      • CPP
      • CS
      • CSPROJ
      • Dart
      • H
      • JAR
      • Java
      • KT
      • MF
      • PDB
      • PHP
      • PY
      • SH
      • SLN
      • SWIFT
      • TOML
      • VB
      • VBPROJ
      • VCXPROJ
      • YAML
    • Project Management File Formats
      • Project Management File Formats
      • MPP
      • MPT
      • MPX
      • XER
    • Spreadsheet File Formats
      • Spreadsheet File Formats
      • CSV
      • DIF
      • ODS
      • OTS
      • TSV
      • XLAM
      • XLM
      • XLS
      • XLSB
      • XLSM
      • XLSX
      • XLT
      • XLTM
      • XLTX
    • Video File Formats
      • Video File Formats
      • 3G2
      • 3GP
      • AVI
      • F4V
      • FLV
      • M4V
      • MKV
      • MOV
      • MP4
      • RM
      • RMVB
      • RV
      • SRT
      • VOB
      • WMV
      • Xvid
    • Web File Formats
      • Web File Formats
      • ASP
      • ASPX
      • CHM
      • CSS
      • HTM
      • HTML
      • JS
      • JSON
      • MHTML
      • Sass
      • SCSS
      • VDW
      • XAML
      • XHTML
      • XML
      • XOML
      • XSLT
    • Word Processing File Formats
      • Word Processing File Formats
      • DOC
      • DOCM
      • DOCX
      • DOT
      • DOTM
      • DOTX
      • MD
      • ODT
      • OTT
      • RTF
      • TXT

    What's on this Page

      • What is a CSS file?
      • Brief History
      • How to open CSS files
      • How to use CSS files
      • CSS Syntax
      • CSS Usage Example
        • HTML Document
        • CSS Stylesheet
        • Output Comparison
      • References
    1. Home
    2. Web File Formats
    3. CSS

    What is a CSS file?

    CSS (Cascading Style Sheets) are files that describe how HTML elements are displayed on the screen, paper, etc. With HTML, you can have either embedded styles or styles can be defined in an external stylesheet. For embedding the styles, the <style></style> tags are used. The external stylesheets are stored in files with the .css extension. With the external CSS, you can include it on multiple HTML pages to update the style of those pages. Even a single CSS file can be used to style a complete website.

    Brief History

    CSS1 was released in 1996 with Bert Bos as the co-author. The CSS Working Group started working on the issues that were not addressed in CSS1. This resulted in the creation of CSS2 in November 1997 that was published as a W3C recommendation on 12th May 1998. This version added support for media-specific devices like printers, downloadable fonts, tables, and element positioning. In June 1999, CSS3 became the recommendation of W3C. This divided the documentation into modules where each module had extension features defined in CSS2.

    How to open CSS files

    CSS files are stored in plain text format so these can be opened in any text editor including the following:

    • Notepad
    • Notepad ++
    • VS Code
    • Visual Studio
    • PhpStorm
    • Adobe Dreamweaver

    How to use CSS files

    To use a CSS file, you include it in the head section of the HTML document. You use the link tag to include the file as shown below.

    <link rel="stylesheet" type="text/css" href="main.css"/>
    

    the href attribute of the link tag contains the path to the CSS file. By doing this, the applicable styles contained in the included CSS file are applied to the HTML document.

    CSS Syntax

    A CSS rule comprises of two components, a selector and a declaration. A selector points to an element in the HTML document. It can either be an element tag, class name, id name, multiple tags showing the hierarchy, etc. A declaration contains the style definition comprising of property and value. The property identifies the property of the element that you want to change and the value defines its new value. Each CSS rule can have multiple declarations. The following is an example of a CSS rule.

    h1{
        font-weight: 700;
        color: forestgreen;
    }
    

    In the above example, we have the h1 as a selector that selects all the h1 tags in the HTML document. The rule has two declarations, one for font-weight and the other for color. font-weight and color are properties and 700 and forestgreen are their values respectively.

    CSS Usage Example

    The following shows the example HTML document and the stylesheet used to style it. The comparison image is also added to compare the styled and plain HTML documents

    HTML Document

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css" type="text/css">
        <title>CSS Test</title>
    </head>
    
    <body>
        <div class="content-wrapper">
            <h1>Test document to test <span class="highlight">CSS</span></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officia similique illum magni explicabo,
                tempore neque nulla laborum voluptas sint molestias libero et corporis omnis asperiores incidunt,
                perferendis
                sed aut!</p>
    
            <h2>List of items</h2>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>
    </body>
    
    </html>
    

    CSS Stylesheet

    body{
        background-color: lightblue;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .content-wrapper{
        padding: 10px 30px;
    }
    p{
        text-align: justify;
    }
    h1{
        text-align: center;
    }
    .highlight{
        font-weight: 700;
        color: forestgreen;
    }
    h1, h2{
        font-weight: 400;
    }
    
    ul li{
        list-style-type: square;
        margin-bottom: 10px;
        margin-left: 50px;
    }
    

    Output Comparison

    The left side of the image displays the HTML document without the styles applied and the right side displays the HTML document with the styles applied.

    Example image

    References

    • CSS Introduction - W3schools
    • CSS - Wikipedia

    See Also

    • PY File Format
    • KT File Format
    • Xvid File Format
    • Dart File Format
    • F4V File Format