File last modified on August 18, 2022

CSS Tutorials

Zero CSS

0, 0em and 0px all represent zero and have no effect on the styling in XHTML documents and the only effect you'll notice is a larger CSS file. Since we want to make sure our customers are getting the best performance when they read their digital content, in the future, please make sure to code all 0em or 0px to 0. You could work on your D.R.Y. and help reduce unnecessary file size by coding:

css
1margin: 0 0 0 0;
2padding: 0 0 0 0;

to the simple approach of:

css
1margin: 0;
2padding: 0;

If you wanted you could script this in AppleScript with:

applescript
1tell application "BBEdit"
2    activate
3    set cssFile to name of active document of project window 1
4    set searchOptions to {search mode:grep, starting at top:true, wrap around:false}
5    set srcLocate to find "^\\tmargin:(| )0 0 0 0;.*$" searching in text 1 of text document cssFile options searchOptions
6    if found of srcLocate = true then replace (found text of srcLocate) as text using "\\tmargin:0;" searching in text 1 of text document cssFile options searchOptions saving no
7end tell

Since the above just handles margin we could add padding but our replace will change:

applescript
1tell application "BBEdit"
2    activate
3    set cssFile to name of active document of project window 1
4    set searchOptions to {search mode:grep, starting at top:true, wrap around:false}
5    set srcLocate to find "^\\t(margin|padding):(| )0 0 0 0;.*$" searching in text 1 of text document cssFile options searchOptions
6    if found of srcLocate = true then replace "^\\t(margin|padding):(| )0 0 0 0;.*$" using "\\t\\1:0;" searching in text 1 of text document cssFile options searchOptions saving no
7end tell

given that the above only targets margin and padding with a single zero and doesn't check for px or em we can target that with a change to our find:

bash
1^\t(margin|padding):(| )0(|em|px) 0(|em|px) 0(|em|px) 0(|em|px);.*$

Amazon CSS

This is to help address the reported Amazon Reworks issue of the dropcap. Because we do not have every device to test every Mobi and CSS issues can be tracked back to how the font is designed the following is a correction for the reported error.

You will need to isolate the applied class and it's CSS for the <p> tag and apply it to the dropcap's span, example:

XHTML file:

xhtml
1<p class="first">
2  <span class="_idGenDropcap-1">M</span>ost every mother remembers an incident beyond the “It’s a
3  boy!”
4</p>

CSS from file:

css
1.first {
2  font-family: 'Berling LT Std Roman', serif;
3  font-size: 0.917em;
4  font-style: normal;
5  font-variant: normal;
6  font-weight: normal;
7  line-height: 1.636;
8  margin: 0 0 0 0;
9  orphans: 2;
10  page-break-after: auto;
11  page-break-before: auto;
12  text-align: justify;
13  text-decoration: none;
14  text-indent: 0;
15  text-transform: none;
16  widows: 2;
17}
18._idGenDropcap-1 {
19  float: left;
20  font-family: 'Avenir LT Std 35 Light', sans-serif;
21  font-size: 3.311em;
22  font-style: normal;
23  font-weight: 300;
24  line-height: 1;
25  margin-bottom: -0.244em;
26  margin-right: 0.05em;
27  margin-top: -0.039em;
28}

In the CSS file the following media queries will need to be added:

css
1@media amzn-kf8 {
2}
3@media amzn-mobi {
4}

The CSS from the para will need to override the drop cap for Amazon only, example:

css
1@media amzn-kf8 {
2  ._idGenDropcap-1 {
3    font-family: 'Berling LT Std Roman', serif;
4    font-size: 0.917em;
5    font-style: normal;
6    font-variant: normal;
7    font-weight: normal;
8    line-height: 1.636;
9    margin: 0 0 0 0;
10    orphans: 2;
11    page-break-after: auto;
12    page-break-before: auto;
13    text-align: justify;
14    text-decoration: none;
15    text-indent: 0;
16    text-transform: none;
17    widows: 2;
18  }
19}
20@media amzn-mobi {
21  ._idGenDropcap-1 {
22    font-family: 'Berling LT Std Roman', serif;
23    font-size: 0.917em;
24    font-style: normal;
25    font-variant: normal;
26    font-weight: normal;
27    line-height: 1.636;
28    margin: 0 0 0 0;
29    orphans: 2;
30    page-break-after: auto;
31    page-break-before: auto;
32    text-align: justify;
33    text-decoration: none;
34    text-indent: 0;
35    text-transform: none;
36    widows: 2;
37  }
38}

Missing colon check

Here is a tutorial on how to check for missing colons in a CSS file. This helps to check your work since the W3C validator doesn't catch this currently.

Open a CSS file in a BBEdit Project

Remove blank lines in the file: ^[[:blank:]]*$\r, breakdown how:

In BBEdit open Find Panel

menu bar: Search > Find
shorthand: ⌘+F

bash
1## Find:
2^[[:blank:]]*$\r
3
4## Replace:

Grep should be checked, wrap around is optional but suggested

Click Next

If space was found it should go to it then click Replace All

Check for missing colons:

bash
1## Find:
2(?<!;|{|}|\*/)$

In BBEdit open Find Panel

menu bar: Search > Find
shorthand: ⌘+F

bash
1## Find:
2(?<!;|{|}|\*/)$
3
4## Replace:

Grep should be checked, wrap around is optional but suggested

Click Next

If any are found they should be highlighted. If semi-colons are not found the application will beep. To help expedite the checking process you can save the Find and Replace as a Pattern then access it through the dropdown:

At the right of where the buttons are in BBEdit's Find Panel there will be two dropdowns sitting left of the buttons: