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 then to copy or download a result data in several formats. If you want 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 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 inclide CSS to web site, you should encode CSS text and select output format: HTML Style Tag Import​​​​ or HTML Stylesheet. You will get result like this code:

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

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

Exteternal way (HTML Stylesheet):

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

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