1. Online Base64 Encoders & Decoders
  2. Base64 Encoders
  3. Encode CSS to Base64

Encode CSS to Base64

The converter helps to encode Cascading Style Sheets (CSS) File to Base64 data and then to copy or download the result data in several formats. If you want to decode, use Base64 to CSS Decoder.

How to encode CSS to Base64 Data

  1. Select or drag & drop one or several PDF files;
  2. Press Encode button (you will see the result below);
  3. Select output format (Plain Text, Data URL, HTML Style Tag Import, HTML Stylesheet);
  4. Copy or Download Base64 data;
  5. Done!

Output Formats

  • Plain Text - Only Base64 data;
  • Data Url - Base64 in data URL format (data:[<MIME-type>][;charset=<encoding>][;base64],<base64 data>)
  • HTML Style Tag Import - HTML Tag <style> with Data Url data in @import.
  • HTML Stylesheet - HTML Tag <link rel="stylesheet"> with Data Url data in HREF property.

Output Format Examples for CSS

Plain Text:

Ym9keXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7fQ==

Data Url:

data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7fQ==

HTML Style Tag Import​​​​:

<style type="text/css">@import url("data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7fQ==")</style>

HTML Stylesheet:

<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7fQ==" />

How to include base64 encoded CSS to my site (HTML page)

If you want to include CSS in the website, you should encode CSS text and select output format: HTML Style Tag Import​​​​ or HTML Stylesheet. You will get results like this code:

Internal way (HTML Style Tag Import​​​​):

<style type="text/css">@import url("data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7fQ==")</style>

External way (HTML Stylesheet):

<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kLWNvbG9yOiMwMDA7fQ==" />

Copy and Paste any code to your web page's <head> tag. More info about style tag and link tag.