Here are samples of all the CSS styles used throughout this blog.
A sample of the style is on the left, and the CSS code to generate it is on the right.
For a tutorial on how all this works, please see my "HTML and CSS References" link from the
home page. Just scroll down to the "HTML/CSS Goodies" section at the bottom of the links on the right
side.
HEADING 1 | |
Class = "h1_medium" |
font-size:1.6em; padding-left:50px; padding-right:50px; |
Class = "h1_small" |
font-size:1.2em; padding-left:50px; padding-right:50px; |
HEADING 2 and 3 | |
Class = h2_blk20" |
font-size:1.4em; margin:0 30px 0 25px; |
Class = "h2_blk20_small" |
font-size:1.0em; margin:0 30px 0 25px; |
Class = "h2_blk20_sm_sred" |
color:#970A00; font-size:1.0em; margin:0 30px 0 25px; |
Class = "h2_small" |
font-size:1em; text-align:center; text-indent:0px; |
Class = "h2_small_mt0" |
font-size:1em; text-align:center; text-indent:0px; margin-top:0; |
Class = "h2_small_mb0" |
font-size:1.2em; text-align:center; text-indent:0px; margin-bottom:0; |
Class = "h2_med" |
font-size:1.4em; text-align:center; text-indent:0px; |
Class = "h2_sred |
font-size:1.2em; font-weight:bold; text-align:center; color:#970A00; margin:0; padding:0; |
Class = "h2_sred_small" |
font-size:1em; font-weight:bold; text-align:center; color:#970A00; |
Class = "h2_sred_med" |
font-size:1.4em; font-weight:bold; text-align:center; color:#970A00; |
Class = "h3_sred" |
text-align:center; color:#970A00; margin:5px 0 5px 0; |
Class = "h3_small" |
text-align:center; text-indent:0px; |
Class = "h3_small_nm" |
text-align:center; text-indent:0px; margin:0 0 5px 0; |
Class = "h3_blk20" |
margin:0 20px 0 20px; |
PARAGRAPH | |
Plain ol' "p" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-align:justify; text-indent:17px; font:1em Arial,Helvetica,sans-serif; margin:0 15px 0 10px; padding:0px 5px 0px 5px; |
Class = "p_bi" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; margin-left:27px |
Class = "p_bi2" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; margin-left:40px; |
Class = "p_list" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:30px; margin-right:25px; |
Class = "p_list2" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:50px; margin-right:25px; |
Class = "p_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
padding-top:0.5em; |
Class = "p_b12" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
padding-top:1em; |
Class = "p_a6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
padding-top:0; padding-bottom:0.5em; |
Class = "p_ti0" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; |
Class = "p_ti0_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; padding-top:0.5em; |
Class = "p_ti0_tal" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; text-align:center; |
Class = "p_blk20" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:25px; margin-right:30px; |
Class = "p_blk20_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:25px; margin-right:30px; padding-top:0.5em; |
Class = "p_blk20_a6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:25px; margin-right:30px; padding-bottom:0.5em; |
Class = "p_blk20_ti0" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; margin-left:25px; margin-right:30px; |
Class = "p_blk20_ti0_a6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; margin-left:25px; margin-right:30px; padding-bottom:0.5em; |
Class = "p_list20" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:45px; margin-right:30px; |
Class = "p_list20_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:45px; margin-right:30px; padding-top:0.5em; |
Class = "p_list20_a6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:45px; margin-right:30px; padding-bottom:0.5em; |
Class = "p_list20_b6a6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:45px; margin-right:30px; padding-top:0.5em; padding-bottom:0.5em; |
Class = "p_blk20_left" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:5px; margin-right:50px; border-right:1px solid; border-top:1px solid; border-bottom: 1px solid; |
Class = "p_blk20_rt" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:50px; margin-right:5px; border-left:1px solid; border-top:1px solid; border-bottom: 1px solid; |
Class = "p_blk50" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:50px; margin-right:60px; |
Class = "p_blk50_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:50px; margin-right:60px; padding-top:0.5em; |
Class = "p_blk50_a6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:50px; margin-right:60px; padding-bottom:0.5em; |
Class = "p_blk50_ti0" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; margin-left:50px; margin-right:60px; |
Class = "p_list50" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:70px; margin-right:60px; |
Class = "p_list50_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:70px; margin-right:60px; padding-top:0.5em; |
Class = "p_list50_a6" |
display:list-item; text-indent:0; margin-left:70px; margin-right:60px; padding-bottom:0.5em; |
Class = "p_blk80" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:80px; margin-right:80px; |
Class = "p_blk80_ti0" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
text-indent:0; margin-left:80px; margin-right:90px; |
Class = "p_blk100" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:100px; margin-right:100px; |
Class = "p_blk100_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:100px; margin-right:100px; padding-top:0.5em; |
Class = "p_list100" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:100px; margin-right:100px; |
Class = "p_list100_b6" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:list-item; text-indent:0; margin-left:100px; margin-right:100px; padding-top:0.5em; |
Class = "p_sred" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
color:#970A00; |
Class = "p_sgreen" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
color:#255045; |
Class = "p_sdkyel" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
color:#AB8505; |
Class = "p_sblue_ti0" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
color:#000A97; text-indent:0; text-align:left; |
Class = "p_wlb_desc" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
color:#000A97; text-indent:0; margin-left:100px; margin-right:100px; padding-top:0.5em; |
Class = "p_bg_grey" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
margin-left:50px; border:1px solid; background-color:#CDCDC8; width:450px; |
Class = "p_bg_grey_nm" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:inline-block; border:1px solid; background-color:#CDCDC8; |
Class = "p_bdr1p" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
border:2px solid; padding-top:1em; padding-bottom:1em; (!) |
Class = "p_bdr2p" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
border:2px solid; padding-top:0.5em; padding-bottom:0.5em; (!) |
Class = "p_quote" This is a line of text. |
text-indent:0; text-align: center; (!) |
Class = "p_center" This is a line of text. |
text-indent:0; text-align: center; font-weight:bold; padding-top:0.5em; (!) |
Class = "p_center_nb" This is a line of text. |
text-indent:0; text-align: center; padding-top:0.5em; padding-bottom:0.5em; (!) |
Class = "p_tac" This is a line of text. |
text-indent:0; text-align: center; font-weight:bold; (!) |
Class = "p_bquote" This is a line of text. |
text-align:right; font-size:1.2em; margin-right:100px; |
Class = "p_w250" This is a line of text. |
width:275px; |
Class = "p_right" This is a line of text. |
text-align:right; |
Class = "p_inblk_w25" This is a line of text. It's in the style specified |
display:inline-block; width:25%; |
Class = "p_inblk_w40" This is a line of text. It's in the style specified |
display:inline-block; width:40%; |
Class = "p_inblk_w50" This is a line of text. It's in the style specified, and should be sufficiently |
display:inline-block; text-indent:0; width:50%; margin:0 0 8px 50px; |
Class = "p_inblk_w70" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. |
display:inline-block; width:70%; margin:0 0 8px 20px; |
Class = "p_inblk" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:inline-block; |
Class = "p_inline" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:inline; margin:0; |
Class = "p_inblk_journ" This is a line of text. It's in the style specified, and should be sufficiently. |
display:inline-block; font-size:1.4em; color:#970A00; margin:10px 0 0 20px; |
Class = "p_inline_journ" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:inline; margin:0; font-weight: bold; |
Class = "p_inblk_ti0" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:inline-block; text-indent:0; margin:2px; |
Class = "p_inblk_ti0_mr50" This is a line of text. It's in the style specified, and should be sufficiently long to get two lines in a 550px wide table box. OK. Maybe 2 to 3 lines. |
display:inline-block; text-indent:0; margin:3px 50px 3px 3px; |
Class = "p_inl_bkgnd_grey" This is a line of text. |
display:inline; font-size:1.2em; color:#DDDDDD; background-color:#4A4A4A; padding:0 4px 0 4px; |
Class = "p_copy" Copyright © 2019 J.A. |
font-size:1.2em; margin-top:10px; |
SPAN | |
Here's a span of Class = "sp_sred" in this line. |
color:#970A00; |
Here's a span of Class = "sp_syel" in this line. |
color:#FFD222; |
Here's a span of Class = "sp_sltyel" in this line. |
color:#FFD222; SAME as sp_syel |
Here's a span of Class = "sp_sdkyel" in this line. |
color:#AB8505; |
Here's a span of Class = "sp_sgreen" in this line. |
color:#255045; |
Here's a span of Class = "sp_sdkblue" in this line. |
color:#222255; Not used???? |
Here's a span of Class = "sp_sblue" in this line. |
color:#000A97; font-weight:bold; |
Here's a span of Class = "sp_sgreen" in this line. |
color:#255045; font-weight:bold; |
Here's a span of Class = "sp_code" in this line. |
font-family:Lucida Console; font-weight:bold; color:#970A00; |
Here's a span of Class = "sp_nums" in this line. |
font-size:1.2em; font-weight:bold; |
LINKY-DINKIES "block" causes the border of the link to extend to the edge of its container (SEE "na_links" - they're in a table "td") "inline-block" causes the border to fit just the link itself. | |
| Plain ol' "a" | display:inline-block;font-size:0.9em; text-decoration:none; padding:1px; |
(Id = "a_id_back".) | |
| Class = "a_gen_purp" | color:#4A4A4A; text-indent:0; |
| Class = "a_grey_fnt12" | font-size:1.2em; color:#DDDDDD; background-color:#4A4A4A; border:6px solid #BBBBBB; margin-bottom:10px; |
| Class = "a_blk_grey" | display:block; font-size:0.9em; font-weight:bold; color:black; border:4px solid #4A4A4A; margin-left:5%; |
| Class = "a_inblk_grey" | font-weight:bold; border:4px solid #4A4A4A; margin-left:5%; width:200px; |
| Class = "a_inl_grey" | display:inline; font-weight:bold; height:1.5em; border:4px solid #4A4A4A; |
| Class = "a_blk_red" | display:block; font-weight:bold; text-align:center; margin-bottom:5px; margin-left:4px; margin-right: 4px; |
| Class = "a_inblk_red" | font-weight:bold; text-align:center; margin-bottom:5px; width:235px; height:1.5em; |
| Class = "a_inblk_red_s" | font-weight:bold; text-align:center; margin-bottom:5px; width:200px; height:1.5em; |
| Class = "a_inl_red" | display:inline; font-weight:bold; text-align:center; margin-left:10px; margin-right:10px; |
PARAGRAPH AND LINK ON ONE LINE Boxes with green borders indicate the combinations that work (and have the "fancy" link). The combinations with link as inline work, but the border of link inline protrudes slightly out of its container. The combinations with "p" as inline work, but the "p" will not obey padding or margin specs. | |
This is the default "p" default link |
"p" is first, link is second. NOTE: default link has inline-block Does NOT work |
| default link This is the default "p": |
Link is first, "p" is second. Does NOT work |
| |
class = "p_inblk" default link |
"p" of inline-block will put p and link on one line ("p" is first) |
| default link class = "p_inblk" |
This works if link is first, too. |
| |
class = "p_inline" default link |
"p" of inline will put p and link on one line ("p" is first) |
| default link class = "p_inline" |
This also works if link is first, too. |
| |
class = "p_inblk" class = "a_blk_grey" |
"p" is inline-block, link is block Does NOT work. Also, link as block goes to edge of container. |
| |
class = "p_inblk" class = "a_inblk_grey" |
"p" is inline-block, link is inline-block. (Works only for short "p") |
| |
class = "p_inblk" class = "a_inl_grey" |
"p" is inline-block, link is inline. (Works only for short "p") |
| |
class = "p_inline" class = "a_blk_grey" |
"p" is inline, link is block Does NOT work. Also, link as block goes to edge of container. |
| |
class = "p_inline" class = "a_inblk_grey" |
"p" is inline, link is inline-block. (Works only for short "p") |
| |
class = "p_inline" class = "a_inl_grey" |
"p" is inline, link is inline. (Works only for short "p") |
| |
class = "p_inblk" This is a long line of text. It's a pretty short long line, as far as long lines of text go. class = "a_inblk_grey" |
"p" is inline-block, link is inline-block If the paragraph is a long line, this does NOT work. |
| |
class = "p_inblk_w40" (w = 40%) This is a long line of text. It's a pretty short long line, as far as long lines of text go. class = "a_inblk_grey" |
"p" is inline-block, w = 40%, link is inline-block. Slight issue is that
link is lined up with last line of "p". To fix, you can use a table. |
| |
class = "p_inblk_w40" (w = 40%) This is a long line of text. It's a pretty short long line, as far as long lines of text go. class = "a_inl_grey" |
"p" is inline-block, w = 40%, link is inline. Slight issue is that
link is lined up with last line of "p". To fix, you can use a table. |
| |
Copyright © 2019 J.A.