View Single Post
Old 11-21-2012, 04:35 AM   #1
michaelbr
Connoisseur
michaelbr began at the beginning.
 
michaelbr's Avatar
 
Posts: 77
Karma: 10
Join Date: Aug 2010
Location: Murcia/Spain
Device: Android 12
Sigil 0.6.0 & CSS problem?

I just installed Sigil 0.6.0 and tried to use a custom CSS to create a epub book, to my surprise the CSS files seems has no effect on the doc. This is what I did:
1) moused over Style, then clicked Add Blank Stylesheet, then added the following code
Code:
/* Style Sheet for ePub Books */
/* Set margins at 2% (This gives a white border around the book) */

body {margin-left:2%;
    margin-right:2%;
    margin-top:2%;
    margin-bottom:2%;}

/* Text indent will make a paragraph indent, like putting a tab at the beginning of each new paragraph
The margin settings get rid of the white space between paragraphs, again so it looks more like a book
The text-align line justifies the margins. If you don't want them justified, change it to left, or remove
 that line. You don't have to specify a font, but you can */

p {text-indent: .3em;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;
    text-align: left;
    font-family:"Arial";}

/* Here we make our headings centered
We've also made the headings the same font as the body text */

h1 { text-align: center;
    font-family:"Arial";
	font-size: 1.3em;}
h2 { text-align: center;
    font-family:"Arial";
	font-size: 1.2em;}
h3 { text-align: center;
    font-family:"Arial";
	font-size: 1.1em;}
2) entered text in Book View
3) added
Code:
<link rel="stylesheet" type="text/css" href="../Style/Style0001.css" />
to the <head> section as seen here (the file name is Style0001.css under Styles folder):
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="../Style/Style0001.css" rel="stylesheet" type="text/css" />
</head>
What am I missing? My <h1> does not change, and when I went to Preview View, the h1 showed 2em instead of 1.3em defined in my CSS.
michaelbr is offline   Reply With Quote