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.

No comments:

Post a Comment