Thursday, February 18, 2016

How to incorporate CSS into your Wix.com website

There is a lot of built-in customization you can do with your Wix website.  If you want even more control over style, you can link to an external CSS file, include embedded CSS in the <head> of your web page, or use inline CSS with your HTML elements.

To use an external style sheet or embedded CSS:

- Log in to Wix
- Click the Edit Site link for the web site you want to modify
- Hover over Site at the top of the screen, and select Site Settings from the drop down menu
- Select SEO on the left side of the screen
- Scroll down to Header Code - Meta Tags

For an external style sheet, type or copy the following code:

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

Replace CSSfilename.css with the link to your stylesheet.  To use embedded CSS instead, include the CSS between <style></style> tags.

Once you've finished typing or pasting any style settings you want to include, click the X in the upper right corner of the Site Settings window.  Then click Publish in the upper right corner of the page to apply the changes you've made.

Instead of including CSS in the header portion of the page, you can incorporate it directly into the HTML elements themselves using the style attribute.  For example:

<p style="color: red; display: inline-block">

Note that Wix will not allow you to include <script> tags in your header.  Any JavaScript links or code must be placed in the body of your page.

6 comments:

  1. Got a message "Your header tags are invalid"

    ReplyDelete
    Replies
    1. Do you only get that error when you include CSS? Are you putting your CSS within style tags?

      Delete
    2. Yeah- we get that too. Looks like this tutorial is out of date.
      Wix have moved their whole UI around recently too.

      Delete
  2. HI dear, new here.
    How to you upload the css file on wix? Or where.


    What I did:
    I wrote a very simple css file:
    .embed-container {
    position: relative;
    padding-bottom: 56.25%; /* ratio 16x9 */
    height: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
    }
    .embed-container iframe {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    /* ratio 4x3 */
    .embed-container.ratio4x3 {
    padding-bottom: 75%;
    }

    Called mystyle.css

    For now, saved on my desktop, because I do not know where to upload it.

    In the SEO Settings, I wrote your text. I cannot put it here, I tried, the message could not be send...

    ---link type="text/css" rel="stylesheet" href="mystyle.css" /---

    I know it is not enough, because as said above, I have no idea where to put the css file.
    Beside this I get an error:
    Your header tag is invalid.

    I guess it is because I do not upload the file...

    Thanks for your help!!!
    bilbo[at]calvez.info

    ReplyDelete
  3. Hi Bilbo,
    Wix won't be able to pull your CSS file from your local computer; you'll need to host it online somewhere to use it like that. There are plenty of hosting sites you could look into... or you could copy the CSS and paste it into your head tag.

    ReplyDelete