2 replies [Last post]
KatyPerryFan4Eva
KatyPerryFan4Eva's picture
Offline
newbie
Scarborough, UK
Last seen: 5 years 37 weeks ago
Scarborough, UK
Joined: 2016-03-17
Posts: 2
Points: 3

Hi there,

I am rather new to making CSS stylesheets and would like to know if anybody has succeeded in making on with

1. letter-spacing options
2. first-line-indentation options

If anybody can help me, please get in touch. However, here is the stylesheet I am trying to edit so I can get first line indentation and letter spacing in it, I just need help with exactly WHERE in the stylesheet to put said options

.tp {
margin-top: 1em;
text-align: center;
}

/* ==================== RH Styles ===================== */

h1.otherbooks
{
text-align: center;
font-size: medium;
margin-bottom: 1em;
margin-top: 4em;
letter-spacing: -2px;
}

div.otherbooks
{
margin-top: 4em;
font-size: small;
margin-left: 2em;
margin-right: 2em;
}

div.copyright
{
font-size: small;
text-align: center;
margin-top: 4em;
}

div.dedication
{
font-size: small;
margin-top: 8em;
}

div.epigraph
{
font-size: medium;
margin-left: 12em;
margin-right: 4em;
margin-bottom: 2em;
margin-top: 2em;
}

div.epigraphsource
{
font-size: x-small;
text-align: right;
font-style: italic;
margin-bottom: 12em;
margin-right: 2em;
}

h1.acknowledgments
{
font-size: medium;
margin-top: 4em;
text-align: center;
font-weight: bold;
}

div.acknowledgments
{
font-size: small;
text-align: justify;
margin-left: 2em;
margin-right: 2em;
}

h1.authorsnote
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

div.authorsnote
{
font-size: small;
text-align: justify;
}

h1.listoffigures
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

div.listoffigures
{
font-size: small;
text-align: left;
}

h1.chronology
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.geneology
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.foreword
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.preface
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.introduction
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.prologue
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.part
{
line-height: 1.3em;
margin-top: 4em;
margin-bottom: 1em;
font-size: 1.5em;
text-align: center;
font-weight: bold;
}

h1.chapter
{
font-size: 1.3em;
text-align: center;
font-weight: bold;
line-height: 1.3em;
margin-top: 2em;
margin-bottom: 3em;
}

h1.chapter0
{
font-size: 1.3em;
text-align: left;
font-weight: bold;
line-height: 1.3em;
margin-top: 2em;
margin-bottom: 3em;
}

h1.subchapter
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.epilogue
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.coda
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.conclusion
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.afterward
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.permission
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.glossary
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

span.dropcap {
float: left;
font-size: 2.7em;
line-height: 0.8em;
margin-bottom: -0.1em;
}

span.glosaryterm
{
font-size: small;
text-align: left;
margin-right: 1em;
}

span.glosarydef
{
font-size: small;
text-align: left;
margin-right: 1em;
}

h1.appendix
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.resource
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.notes
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

div.note
{
font-size: x-small;
text-align: justify;
margin-left: 1em;
}

h1.source
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.bibliography
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

div.bibliography
{
font-size: x-small;
text-align: justify;
margin-left: 2em;
font-weight: bold;
}

h1.suggestedreading
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h1.abouttheauthor
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

p.smallheight
{
margin-top: 1em;
margin-bottom: 1em;
}

p.mediumheight
{
margin-top: 2em;
margin-bottom: 2em;
}

p.attribution
{
text-align: center;
}

p.largeheight
{
margin-top: 3em;
margin-bottom: 3em;
}

div.list
{
font-size: small;
margin-left: 1em;
}

h1.box
{
font-size: medium;
font-style: italic;
text-align: center;
}

div.box
{
font-size: small;
margin-left: 1em;
}

p.caption
{
font-size: x-small;
font-style: italic;
text-align: center;
margin-bottom: 1em;
}

/* ===================== Added Styles ===================== */

p.indent
{
text-indent: 1.00em;
margin-top: 0.0em;
margin-bottom: 0.0em;
text-align: justify;
}

p.right
{
text-align: right;
}

p.center
{
margin-top: 1em;
text-align: center;
margin-bottom: 1em;
margin-left: 1px;
}

a.hlink
{
text-decoration: none;
}

p.figure
{
font-size: small;
margin-top: 2em;
text-align: center;
margin-bottom: 2em;
}

h1.subtitle
{
font-size: x-large;
text-align: center;
font-weight: bold;
margin-bottom: 4em;
}

h1.contents
{
font-size: medium;
text-align: center;
font-style: italic;
font-weight: bold;
}

h2.title
{
font-size: medium;
text-align: center;
letter-spacing: -2px;
}

p.smallheight
{
margin-top: 1em;
}

p.mediumheight
{
margin-top: 2em;
}

p
{
margin-top: .3em;
margin-bottom: .3em;
}

div.cover
{
text-align: center;
}
div.titlepage
{
text-align: center;
}

img
{
max-height: 100%;
max-width: 100%;
}

img.inline
{
vertical-align: middle;
}

a.pubhlink
{
text-decoration: none;
color: green;
}

p.extract
{
text-indent: 0;
text-align: justify;
margin-top: 1em;
margin-bottom: 0;
}

p.extract1
{
text-align: justify;
text-indent: 1.00em;
margin-top: 1em;
margin-bottom: 0;
}

div.textbox
{
margin-top: 2em;
margin-bottom: 2em;
border-bottom: 1px solid;
border-top: 1px solid;
line-height: 1.5em;
text-align: center;
}

h1.caption
{
font-size: medium;
margin-bottom: 1em;
}

p.box
{
border-bottom: 1px double;
border-left: 1px double;
border-top: 1px double;
border-right: 1px double;
text-align: justify;
}

div.abstract
{
font-size: small;
text-align: justify;
margin-left: 2em;
margin-right: 2em;
}

div.appendix
{
margin-top: 1em;
font-size: medium;
text-align: justify;
}

p.reference
{
text-align: justify;
text-indent: -1.00em;
margin-left: 1em;
}

div.biboliography
{
font-size: medium;
text-align: justify;
}

div.preface
{
margin-top: 4em;
font-size: medium;
text-align: justify;
}

div.preface1
{
margin-top: 1em;
font-size: medium;
text-align: justify;
}

p.cop
{
margin-bottom: 1em;
}

p.nonindent
{
margin-top: 0.0em;
margin-bottom: 0.0em;
text-align: justify;
text-indent: 0;
}

span.small
{
font-size: x-small;
}

div.toc
{
font-size: medium;
text-align: center;
}

p.stanga
{
text-align: justify;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
}

body
{
font-size: medium;
line-height: 1.2em;
margin-top: 1em;
margin-left: 1em;
margin-right: 2em;
font-family: ABeeZee;
}

@font-face
{
font-family: "ABeeZee";
font-style: normal;
font-weight: normal;
src:url(../Fonts/ABeeZee.ttf);
}

@font-face
{
font-family: "ABeeZee";
font-style: normal;
font-weight: bold;
src:url(../Fonts/ABeeZee.ttf);
}

@font-face
{
font-family: "ABeeZee";
font-style: italic;
font-weight: normal;
src:url(../Fonts/ABeeZee.ttf);
}

@font-face
{
font-family: "ABeeZee";
font-style: italic;
font-weight: bold;
src:url(../Fonts/ABeeZee.ttf);
}

h3.title
{
font-size: medium;
text-align: center;
margin-bottom: 3em;
}

span.dropcapsimage
{
float: left;
font-size: 90px;
line-height: 100px;
padding-top: 1px;
margin-top: .1em;
margin-right: .09em;
}

span.dropcaps
{
float: left;
font-size: 50px;
line-height: 50px;
padding-top: 1px;
margin-top: -.09em;
margin-right: .09em;
}

span.dropcaps3lines
{
float: left;
font-size: 80px;
line-height: 70px;
padding-top: 1px;
margin-top: -.09em;
margin-right: .09em;
}

sup.small
{
font-size: small;
line-height: 0.0em;
}

div.footnote
{
font-size: small;
border-style: solid;
border-width: 1px 0 0 0;
margin-top: 2em;
}

p.footnote
{
text-align: justify;
}

p.question
{
text-align: justify;
margin-top: 1em;
}

div.small-page
{
margin-top: 2em;
font-size: medium;
margin-left: 12em;
margin-right: 6em;
}

h1.toc
{
font-size: medium;
margin-bottom: 1em;
}

ol.upperalpha
{
text-align: justify;
list-style-type: upper-alpha;
}

ol.upperroman
{
text-align: justify;
list-style-type: upper-roman;
}

ol.lowerroman
{
text-align: justify;
list-style-type: lower-roman;
}

ol.loweralpha
{
text-align: justify;
list-style-type: lower-alpha;
}

ol.arabic
{
text-align: justify;
}

h1.section
{
text-align: left;
font-size: medium;
margin-bottom: 1em;
margin-top: 4em;
}

h2.section
{
text-align: center;
font-size: medium;
margin-bottom: 1em;
margin-top: 2em;
}

h3.section
{
text-align: left;
font-size: medium;
margin-bottom: 1em;
margin-top: 2em;
}

h4.section
{
text-align: left;
font-size: medium;
margin-bottom: 1em;
margin-top: 2em;
}

h5.section
{
text-align: left;
font-size: medium;
margin-bottom: 1em;
margin-top: 2em;
}

span.underline
{
text-decoration: underline;
}

span.big
{
font-size: xx-large;
}

p.crt
{
margin-top: 1em;
text-align: center;
margin-bottom: 1em;
text-indent: 0em;
}

span.overline
{
text-decoration: overline;
}

h1.chapter1
{
font-size: 1.3em;
text-align: left;
font-weight: bold;
line-height: 2em;
margin-top: 4em;
margin-bottom: 1em;
}

p.textbox
{
text-indent: 0;
text-align: justify;
margin-left: 1em;
margin-right: 1em;

}

p.textbox1
{
text-indent: 1.00em;
text-align: justify;
margin-left: 1em;
margin-right: 1em;
}

div.chapter
{
margin-top: 2em;
margin-left: 0.5em;
margin-right: 0.5em;
}

span.strike
{
text-decoration: line-through;
}

sup
{
vertical-align: 4px;
}

sub.frac
{
font-size: 0.7em;
}

sup.frac
{
font-size: 0.7em;
}

p.pagebreak
{
page-break-after: always;
}

div.part
{
margin-top: 2em;
margin-left: 1em;
margin-right: 1em;
}

img.middle
{
vertical-align: middle;
}

div.textbox1
{
margin-left: 2em;
margin-right: 2em;
margin-top: 2em;
margin-bottom: 2em;
border-bottom: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
border-top: 2px solid;
line-height: 1.3em;
text-align: center;
}

/* =============== New Style added =============== */

/* == For TOC == */

div.toc_fm
{
margin-top:1em;
margin-bottom:1em;
margin-left:0em;
font-size:.9em;
line-height:1.3em;
text-align: left;
}

div.toc_chap
{
margin-left:0em;
font-size:1em;
line-height:1.4em;
}

div.toc_sub
{
margin-left:1.3em;
font-size:smaller;
line-height:1.4em;
}

div.toc_part
{
margin-left:0em;
margin-top:1.2em;
line-height:1.5em;
font-size:1.2em;
}

div.toc_part .toc_chap
{
font-size:medium;
margin-left:1.5em;
}

div.toc_part .toc_chap .toc_sub
{
font-size:smaller;
margin-left:1.5em;
}

/* == For Block Quotes == */

div.block
{
margin-left: 0em;
margin-right: 0em;
text-align:justify;
margin-top: 1em;
margin-bottom: 1em;
}

p.bl_nonindent
{
text-indent: 0;
font-size: small;
margin-left:1.5em;
margin-right:1.5em;
text-align:justify;
}

p.bl_indent
{
font-size: small;
text-indent:1em;
margin-left:1.5em;
margin-right:1.5em;
text-align:justify;
}

/* For Hanging Paragraphs */

p.hanging
{
text-indent: -1em;
font-size: small;
text-align: justify;
}

div.hanging
{
margin-left: 1.0em;
}

/* For Dialogue Text */

div.dialogue
{
margin-left: 4.2em;
margin-bottom: 2em;
margin-top: 1.5em;
font-size: small;
}

p.d_hanging
{
text-indent: -4.2em;
font-size: small;
margin-top: 0.5em;
}

/* For bullet list */

ul.bullet
{
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
}
div.bullet
{
margin-left: .8em;
margin-top: 0;
margin-bottom: 0;
text-align: justify;
}

/* For Fractions */
.frac_num
{font-size:x-small; vertical-align:text-top;}
.frac_den
{font-size:x-small; vertical-align:text-bottom;}

p.bl_extract
{
text-indent: 0;
font-size: small;
margin-left:1.5em;
margin-right:1.5em;
text-align:justify;
margin-top: 1em;
}

p.bl_right
{
font-size: small;
text-align: right;
margin-right:1.5em;
}

div.toc_bm
{
margin-top:1em;
margin-bottom:1em;
margin-left:0em;
font-size:.9em;
line-height:1.3em;
text-align: left;
}

span.small1
{
font-size: medium;
}

p.bl_center
{
font-size: small;
margin-left:1.5em;
margin-right:1.5em;
text-align:center;
}

p.bl_nonindent1
{
text-indent: 0;
font-size: small;
margin-left:2.5em;
margin-right:2.5em;
text-align:justify;
}

p.bl_indent1
{
font-size: small;
text-indent:1em;
margin-left:2.5em;
margin-right:2.5em;
text-align:justify;
}

p.bl_center1
{
font-size: small;
margin-left:2.5em;
margin-right:2.5em;
text-align:center;
}

p.bl_extract1
{
font-size: small;
text-indent:1em;
margin-left:1.5em;
margin-right:1.5em;
text-align:justify;
margin-top: 1em;
}

p.bl_right1
{
font-size: small;
text-align: right;
margin-right:2.5em;
}

div.bl_hanging
{
margin-top: 1em;
margin-bottom: 1em;
margin-left:3em;
}

p.bl_hanging
{
font-size: small;
text-indent: -1.5em;
margin-right:1.5em;
text-align:justify;
}

p.footnote1
{
text-indent: -1em;
margin-left: 1.2em;
text-align: justify;
}

p.footnote2
{
text-indent: -1.8em;
margin-left: 1.5em;
text-align: justify;
}

p.footnote3
{
text-indent: -2em;
margin-left: 1.3em;
text-align: justify;
}

span.small2
{
font-size: small;
}

h1.chapter2
{
font-size: 1.3em;
text-align: center;
font-weight: bold;
line-height: 1.3em;
margin-top: -2em;
margin-bottom: 3em;
}

div.appendix1
{
margin-top: 4em;
font-size: medium;
text-align: justify;
}

p.primary
{
text-indent: -1em;
margin-left: 1em;
}

p.secondary
{
text-indent: -1em;
margin-left: 2em;
}

p.center1
{
margin-top: -1em;
text-align: center;
margin-bottom: 1em;
margin-left: 1px;
}

span.color1
{
color: #818284;
}
span.color2
{
color: #646466;
}
span.color3
{
color: #A8A9AD;
}
span.color4
{
color: #58585A;
}

span.dropcaps1
{
float: left;
font-size: 10px;
line-height: 10px;
padding-top: 1px;
margin-top: -.09em;
margin-right: .09em;
}
div.san
{
font-family: ABeeZee;
}

h1.otherbooks00
{
text-align: center;
font-size: 25px;
margin-bottom: 1em;
font-weight: normal;
margin-top: 4em;
}

p.nonindent00
{
margin-top: 1em;
margin-bottom: 0.0em;
text-align: justify;
text-indent: 0;
}

KatyPerryFan4Eva
KatyPerryFan4Eva's picture
Offline
newbie
Scarborough, UK
Last seen: 5 years 37 weeks ago
Scarborough, UK
Joined: 2016-03-17
Posts: 2
Points: 3

 

 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Selectors and mutual exclusivity

The 'first-line' is selected by the §7.1. The ::first-line pseudo-element. For example:

p::first-line {
  text-indent: 2em;}
or
p.indent::first-line {  /*that is a really poor choice of class names*/
  text-indent: 2em;}

'Justify' and 'letter-spacing' are mutually exclusive. When you declare [text-align: justify;}, the browser adjusts letter spacing to achieve justification. You must leave letter spacing to its default or declare {letter-spacing: normal;} to overrule a previous non-default value. It may be, and your question implies, that your browser overrides letter spacing in order to justify the text, although the specs indicate that the browser should not do this. See letter-spacing.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.