10 Fundamentals & Resources
Pressbooks-specific Behavior
Pressbooks can occasionally automatically add HTML tags or remove HTML tags it doesn’t “like” (so to speak). Random <span> tags with orphan and font-size properties will occasionally be inserted into the middle of paragraphs, with no visual effect. If inline CSS (or plain HTML) is written incorrectly, it will commonly remove the incorrect markup (“code”) from the text editor entirely.
Importantly, the Custom Styles tab does not do this with incorrectly written external CSS. If an entire page suddenly has absolutely no CSS styling, there is probably a missing closing curly bracket or semi-colon in the Custom Styles external CSS.
Units
Adapted from W3Schools.
| Unit | Description |
|---|---|
| px | (pixels) ABSOLUTE LENGTH; avoid as much as possible. Screen sizes vary, so relative lengths (the following) are best. |
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| % | Relative to the parent element |
Classes
Classes allow you to edit many elements at the same time.
An element is assigned the class (e.g., <ol class=”red”>)
The properties of the class are edited in the external CSS (Custom Styles)
.red {
color:red;
}
This would turn all of the text content in any <ol> tag (the entire list) with the class=”red” red, no matter where it is in the book.
This is beneficial because, while you do have to add the class tags initially, you can change all of the desired elements at once. So, if you change the color of all headers with a certain class, and you dislike the color in retrospect, you can change it very quickly, rather than having to go through the entire book and manually change each header. Classes promote organization and efficiency.
More on Using Classes
Only selecting <p> elements with the class “red”:
p.red {
color:red;
}
Only selecting <p> elements with the class “red” and “happy”
p.red.happy {
color:red;
}
Combinators
Adapted from W3Schools
Descendant Combinator
This selects every element inside another element. The following will turn all <p> text red that is inside a <div> element.
div p {
color:red;
}
You can also add classes. The following with only turn the <p class=”red”> text inside <div class=”textbox”> red.
div.textbox p.red {
color:red;
}
Selector List
This selects each element separately in the list. The following turns all text in <td> (table data cells) and <p> tags red:
td, p {
color:red;
}
Pseudo Classes
Adapted from W3Schools
Pseudo classes target elements in special states.
:first-child/:last-child
Selects the first child of another element. The following will only turn the first list item of a list red.
ol:first-child {
color:red;
}
:not()
Selects all elements except the specified one. The following turns all <h2> red except for <h2 class=”textbox”>
h2:not(.textbox) {
color:red;
}
:lang()
Selects elements with a certain language tag. The following turns all <p lang=”ar”> text red:
p:lang(ar) {
color:red;
}
At-Rules
The only at-rule I’ve used here is @counter-style. It lets you customize your own lists. More examples of this in the “Custom List Styles” chapter.
Mary’s To Do
- Common properties
