The Main Stylesheet For This Book

Since I've given you a lot of examples using HTML, it's only right that I should show you a reasonably complex and large Stylesheet that actually styles a website. As it so happens, I have one: the Stylesheet that formats this book. This may seem put together higgledy-piggledy, and in many cases it was. There's a reason for that, and that reason lies in the three ways a Stylesheet can be created for a website:

  1. Create the Stylesheet, then create the website using the Stylesheet's rules.
  2. Create the website, then create the Stylesheet to format it.
  3. Create the Stylesheet as you go along creating the website.

I wish you all the luck in the world should you go with method #1. Likely, you'll find yourself adding rules while the rules you created at first languish and gather dust.

Most Stylesheets are created with a combination of 2 and 3: A few webpages are created, styled, and the rest of the website is created, with new rules added as they are needed. A FEW rules may be laid down through method 1, but those are usually very general rules (centering all headers, the basic font you want, and the like).

This has a lot of what I talked about in the chapters on CSS. I even import another style sheet into this one, specifically, chapter_numbers.css, which is used not only in this Stylesheet, but also in four other stylesheets. It is integral to all of them, so I simply use an @import rule instead of a separate link element.

You'll also notice that I have an outline. While it's not necessary, it did help me figure out what rules are where, as they are organized by context to make this Stylesheet easier to follow and edit.

So, without further ado, book_main.css

/* ----------------- Sheet Outline -----------------

*/

/* ----------------- Import chapter_numbers.css ----------------- */

@import url('./chapter_numbers.css');

/* ----------------- HTML Element ----------------- */

html
{
  • line-height:2;
  • font-size:12pt;
  • background:#fff;
  • color:#000;
}

/* ----------------- Headers ----------------- */

h1, h2, h3, h4, h5, h6
{
  • text-align:center;
  • line-height:1.3;
  • border-color:black;
}
h1, h2, h3
{font-family:"Copperplate Gothic Light", serif;}
h1, h2 span
{border-style:double;}
h1
{border-width:0 0 5px;}
*.chapter h1:before, *.appendix h1:before
{
  • display:block;
  • text-align:center;
}
*.chapter h1:before
{content:'Chapter ' counter(chap_num) ':';}
*.appendix h1:before
{content:'Appendix ' counter(app_num, upper-alpha) ':';}
h2 span
{border-width:0 0 3px;}
h3, h5 span
{border-style:solid;}
h3
{
  • border-color:black;
  • border-style:solid;
  • border-width:1px 0;
}
h4, h5, h6
{font-variant:small-caps;}
h4
{font-size:2em;}
h5 span
{
  • border-width:1px;
  • padding:5px 100px 5px 100px;
  • display:inline-block;
}

/* ----------------- Lists ----------------- */

/* --- Item Lists --- */

ol, ul
{
  • margin:0 0 16px 40px;
  • padding:0;
}
ol.choices
{list-style-type:upper-alpha;}
li.list_header
{
  • list-style-type:none;
  • font-weight:bold;
  • margin-left:-20px;
  • padding:0;
  • text-decoration:underline;
  • font-variant:small-caps;
  • font-style:normal;
}
ol
{list-style-type:decimal;}
ol ol
{list-style-type:lower-alpha;}
ol ol ol
{list-style-type:lower-roman;}
ol.alter_count
{list-style-type:none;}
ol.alter_count li
{counter-increment:list_counter;}
ol.alter_count li:before
{
  • content:counter(list_counter) '.\0000A0';
  • display:inline-block;
  • text-indent:-25px;
}

/* --- Definition Lists --- */

dt
{
  • margin:40px 40px 0 40px;
  • font-weight:bold;
}
dt.subseq_term
{margin-top:0;}
dd
{margin:0;}
dl
{
  • margin:10px 0 10px 60px;
  • border-left:1px solid black;
  • padding-left:10px;
}

/* ----------------- Paragraphs ----------------- */

p
{
  • margin-top:0;
  • margin-bottom:0;
  • text-indent:30px;
}
dd p, p.continued
{
  • margin:0;
  • text-indent:0;
}

/* ----------------- Block Quotes ----------------- */

blockquote
{
  • margin:5px 50px 5px 50px;
  • padding:10px;
  • border:1px dotted gray;
}

/* ----------------- Tables ----------------- */

table
{
  • counter-increment:tbl_num 1;
  • margin-bottom:2em;
}
table, td, th
{
  • border:blue solid 1px;
  • padding:5px;
  • border-collapse:collapse;
  • text-align:center;
}
table.css_values
{
  • width:100%;
  • border:0;
  • counter-increment:none;
}
caption
{
  • font-size:0.8em;
  • font-weight:bold;
}
caption:before
{content: 'Table ' counter(chap_num) '.' counter(tbl_num) ': ';}
table[id|='Appendices'] caption:before{content: 'Table ' counter
(app_num, upper-alpha) '-' counter(tbl_num) ': ';}
table td.empty
{background:#ccf;}
table.css_values td, table.css_values th
{
  • vertical-align:top;
  • border:0;
}
table.css_values td, td.text
{text-align:left;}
table.css_values th
{
  • text-align:right;
  • width:150px;
  • padding-right:10px;
}
table.css_values p
{text-indent:0;}

/* ----------------- Language Classes ----------------- */

*.foreign_phrase
{font-style:italic;}
*:lang(en)
{quotes:'\00201C' '\00201D' '\002018' '\002019' ;}
*:lang(fr), *:lang(el)
{quotes:'\0000AB' '\0000BB' '\002039' '\00203A';}
*:lang(ru)
{quotes:'\0000AB' '\0000BB' '\00201E' '\00201C';}
*:lang(de)
{quotes:'\00201E' '\00201C' '\00201A' '\002018';}

/* ----------------- Coding ----------------- */

/* --- Inline HTML Code --- */

*.el_name,
*.file_name,
dl.el_names > dt,
*.el_names > li
{font-style:italic;}
*.el_name
{
  • font-family:monospace;
  • font-variant:normal;
}
*.el_name:before,
*.el_names > li:before,
dl.el_names > dt:before,
*.tag:before
{content:"<";}
*.el_name:after,
*.el_names > li:after,
dl.el_names > dt:after,
*.tag:after
{content:">";}
dl.code_steps > dt
{font-weight:normal;}
*.tag *.el_name:before,
*.tag *.el_name:after,
*.el_names *.list_header:before,
*.el_names *.list_header:after
{display:none;}
*.author_code_comment
{
  • background-color:rgb(200, 220, 220);
  • border:thin blue solid;
  • margin:10px;
  • padding:10px;
  • font-style:italic;
}
dl.el_names > dt,
dl.att_names > dt,
dl.declarations > dt,
dl.selectors > dt,
dl.properties > dt,
*.selectors > li,
*.el_names > li,
*.att_names > li,
*.declarations > li,
*.declaration
{font-family:monospace;}
*.el_names *.list_header
{
  • font-family:inherit;
  • font-style:inherit;
}
dl.att_names > dt,
*.att_names > li,
*.att_name,
*.attribute
{
  • font-family:monospace;
  • text-decoration:underline;
}

/* --- Inline CSS Coding --- */

*.default_css_value
{font-weight:bold; text-decoration:underline;}

/* --- Inline JavaScript Coding --- */

var
{color:blue;}
*.javascript
{
  • padding:5px 10px;
  • background:rgb(200, 220, 220);
}
*.property, dl.properties > dt
{color:rgb(0, 74, 0);}
var,
*.bool,
*.event,
*.events > dt,
*.events > li,
*.procedure,
*.procedures > li,
*.procedures > dt,
*.javascript,
*.keyword,
*.node,
*.object,
*.property,
*.uri,
*.form_el
{font-family:monospace;}
*.procedure:after, *.procedures > li:after, , *.procedures > dt:after
{
  • content:'()';
  • color:black;
}
*.sample *.procedure:after,
*.javascript *.procedure:after,
*.procedure.w-value:after,
*.procedures > li.w-value:after,
*.procedures > dt.w-value:after
{display:none;}
*.procedure span.func_param
*.procedures > li span.func_param
*.procedures > dt span.func_param
{color:black;}
*.keyword, *.string
{color:purple;}
*.regex
{color:rgb(192,70,0);}
*.object, *.form_el
{color:navy;}
*.procedure,
*.procedures > li,
*.procedures > dt
{color:maroon;}
*.bool, *.event, *.events > dt, *.events > li
{color:rgb(0, 96, 96);}
*.node
{color:rgb(64, 64, 0);}
*.uri,
*.event,
*.events > dt,
*.events > li,
*.comment,
*.form_el,
*.foreign
{font-style:oblique;}

/* --- Code Examples --- */

div.code
{
  • counter-increment:ex_num 1;
  • counter-reset:line ex_subnum;
  • margin-top:2em;
}
div.code div.code_header,
div.code div.code_notes,
div.code div.code_subheader
{
  • font-family:"Copperplate Gothic Bold", serif;
  • text-align:center;
  • display:block;
  • font-size:1em;
}
div.code div.code_subheader
{counter-increment:ex_subnum;}
div.code div.code_header
{font-size:1.2em;}
div.code_header:first-child:before
{content: 'Example ' counter(chap_num) '.' counter(ex_num) ': ';}
div.code_subheader:before
{content: 'Ex. ' counter(chap_num) '.' counter(ex_num) '-' counter(ex_subnum, lower-alpha) ': ';}
div.code_header code.el_name
{font-size:110%;}
div.code div.sample
{
  • display:block;
  • margin:10px 30px 10px 30px;
  • background:rgb(245, 245, 245);
  • padding:20px;
  • font-family:monospace;
  • font-size:13pt;
}
div.code_sample
{
  • font-style:italic;
  • color:#44f;
  • font-weight:bold;
  • margin:10px;
}
div.alt
{
  • font-style:italic;
  • text-decoration:underline;
}
div.indent1
{margin-left:40px;}
div.indent1:before
{left:-40px;}
div.indent2
{margin-left:80px;}
div.indent2:before
{left:-80px;}
div.indent3
{margin-left:120px;}
div.indent3:before
{left:-120px;}
div.indent4
{margin-left:160px;}
div.indent4:before
{left:-160px;}
div.indent5
{margin-left:200px;}
div.indent5:before
{left:-200px;}
div.indent6
{margin-left:240px;}
div.indent6:before
{left:-240px;}
*.hilite_b
{font-weight:bold;}
*.hilite_u
{text-decoration:underline;}
*.hilite_i
{font-style:oblique;}
div.absent_tag
{
  • font-style:italic;
  • color:silver;
}
div.numbered_lines div.sample div
{counter-increment:line;}
div.numbered_lines div.sample div:before
{
  • color:#888;
  • content:counter(line) ' >';
  • position:relative;
  • display:block;
  • float:left;
  • clear:left;
  • width:3em;
  • margin-right:2em;
  • text-align:right;
  • font-style:oblique;
  • font-family:arial, sans-serif;
}
*.comment
{
  • color:rgb(0, 96, 0);
  • font-style:oblique;
}
div.sample *.tag_name
{color:blue;}
div.sample *.att_name
{
  • color:rgb(200, 70, 0);
  • text-decoration:none;
}
div.sample *.att_value
{color:purple;}
div.sample *.doctype, div.sample.doctype
{
  • color:rgb(165, 42, 42);
  • font-style:italic;
}
div.sample *.char_ref
{color:maroon;}
div.sample *.xml_dec, div.sample.xml_dec
{
  • color:rgb(42, 42, 242);
  • font-style:italic;
}
div.sample *.selector
{color:rgb(230,0,0);}
div.sample *.css_prop
{color:rgb(0,0,180);}
div.sample *.css_val
{color:rgb(0,80,80);}

/* ----------------- Graphics ----------------- */

div.graphic
{margin:10px 0px 10px 30px;}
img
{border:none;}
*.bordered img
{border:3px double black;}
div.graphic,
ul.graphic_list,
ul.sbs_graphics,
dl.labelled_graphics,
dl.described_graphics div
{
  • counter-increment:fig_num 1;
  • counter-reset:fig_subnum 0;
  • list-style-type:none;
}
ul.graphic_list li,
ul.sbs_graphics li,
dl.labelled_graphics dd,
dl.described_graphics div
{counter-increment:fig_subnum 1;}
ul.graphic_list li,
ul.sbs_graphics li:first-child
{float:left;}
ul.sbs_graphics li:first-child + li
{float:right;}
ul.graphic_list li
{
  • margin-right:40px;
  • margin-bottom:70px;
  • padding:0;
}
ul.graphic_list img
{display:block;}
div.graphic:before,
div.graphic:after,
ul.graphic_list li:before,
ul.graphic_list li:after,
ul.sbs_graphics li:before,
ul.sbs_graphics li:after,
dl.labelled_graphics dd:before,
dl.labelled_graphics dd:after,
dl.described_graphics div:before,
dl.described_graphics div:after
{
  • display:block;
  • font-size:0.8em;
  • font-style:italic;
}
ul.sbs_graphics > li:first-child + li:before,
ul.sbs_graphics > li:first-child + li:after
{text-align:right;}
div.graphic:before,
ul.graphic_list li:before,
ul.sbs_graphics li:before,
dl.labelled_graphics dd:before,
dl.described_graphics div:before
{
  • font-variant:small-caps;
  • font-weight:bold;
}
ul.graphic_list li:before,
ul.sbs_graphics li:before,
dl.labelled_graphics dd:before
dl.described_graphics div:before
{content:'Figure ' counter(chap_num) '.' counter(fig_num) counter(fig_subnum, lower-alpha);}
ul.sbs_graphics img
{display:block;}
ul.sbs_graphics li:first-child + li
{text-align:right;}
ul.sbs_graphics li:first-child + li img
{float:right;}
ul.sbs_graphics li:first-child + li:after
{clear:right;}
ul.graphic_list:after, ul.sbs_graphics:after
{
  • clear:both;
  • content:'\A0';
  • display:block;
  • font-size:0em;
  • height:0;
  • margin:0;
  • padding:0;
}
div.graphic:before
{content:'Figure ' counter(chap_num) '.' counter(fig_num);}
div.graphic:after,
dl.labelled_graphics dd:after,
ul.sbs_graphics li:after,
ul.graphic_list li:after
dl.described_graphics div:after
{content: attr(title);}
dl.described_graphics div:before
{
  • margin:20px 0 0 30px;
  • padding:10px 0;

/* ----------------- References to Chapters and Appendices ----------------- */

*.chap_title_ref,
*.app_title_ref
{font-style:oblique;}
*.chap_title_ref:before,
*.chap_title_ref:after,
*.app_title_ref:before,
*.app_title_ref:after
{font-style:normal;}
*.chap_title_ref:before
{content:' Chapter ' counter(chap_ref) ' (';}
*.app_title_ref:before
{content:' Appendix ' counter(app_ref, upper-alpha) ' (';}
*.chap_title_ref:after, *.app_title_ref:after
{content:')';}
*.chap_num_ref:after
{content:' (Chapter ' counter(chap_ref) ') ';}
*.app_num_ref:after
{content:' (Appendix ' counter(app_ref, upper-alpha) ')';}

/* ----------------- General Styles ----------------- */

em.extra
{font-weight:bold;}
em.more
{
  • font-size:1.2em;
  • color:red;
  • border-bottom:medium double;
  • text-transform:uppercase;
}
*.underline
{text-decoration:underline;}
*.left
{float:left;}
*.right
{float:right;}
*.clear
{clear:both;}
*.clear:before, *.clear:after
{display:none;}
*.center
{text-align:center;}
*.greek_letter
{font:110% "Euclid", serif;}
strong.plural, dt strong
{text-decoration:underline;}
div:not(.code):not(.graphic) + p:not(.chap_links):before
{
  • display:block;
  • border-top:1px solid #777;
  • margin:30px 200px;
  • height:1px;
  • content:" ";
}

/* ----------------- First Letter ----------------- */

div.chap_intro > p:first-child:first-letter
{
  • display:block;
  • float:left;
  • font-size:3em;
  • line-height:1em;
  • font-family:"Times New Roman", serif;
  • text-indent:0px;
  • padding:10px 10px 5px 5px;
}
div.chap_intro > p:first-child
{text-indent:0px;}
div.chap_intro > p:first-child + *
{clear:left;}