![]() |
#76 | |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 31,064
Karma: 60358908
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
![]() Let's face it, there are garbage CSS as well as HTML code. KISS you want to be able to 'read' the selectors and quickly understand what is going on, without drilling way deep through layers upon layers of Div, span, classes to see what ultimately affects the one word that looks awful. (I have seen 5 selectors, it was terrible to follow) A quick peek says calibre 10 controls the style, except for the case we modify it with 'firstpara' Important is to parse Selector lists Left to right. The last value is the one used. OH! ![]() |
|
![]() |
![]() |
![]() |
#77 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
ok - catching up with you slowly - this next question will seem real dumb but what in the .css says that calibreX is a Class yet firstpara is a selector ?
does something become a class by being used in a "class=" construction in a line of code ? |
![]() |
![]() |
Advert | |
|
![]() |
#78 | |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 31,064
Karma: 60358908
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
I am probably not explaining well ![]() you should only have 1 of those selectors with a display: block (or other legal value), that defines a 'box' in a class, the rest, just tweak the box a bit more. |
|
![]() |
![]() |
![]() |
#79 |
Enquiring Mind
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
"Selectors" are simply the "identifiers" in a CSS definition that determine which elements in the HTML should have the specified CSS style applied. "Classes" are user defined labels which can be applied to HTML elements to make it possible to define selectors that involve just a subset of one or more elements.
Take the following example CSS code: Code:
h1 {font-weight:bold} p {text-indent:2em} p.noindent {text-indent:0}
|
![]() |
![]() |
![]() |
#80 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
Quote:
but a typical css has entires like .calibre1 .calibre2... not like p.calibre1 p.calibre2.... yet the calibreN things are classes ? |
|
![]() |
![]() |
Advert | |
|
![]() |
#81 |
Enquiring Mind
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
Yes, "calibre1", "calibre2", etc, are classes. When a class is used in the CSS code in the form:
.class_name {CSS formatting here} - that's actually shorthand for: *.class_name {CSS formatting here} - which is a selector that specifies that any element with the given class name should be given the listed formatting. So... "class_name" is a class, and in the stylesheet, it can be used in the any element selector ".class_name". |
![]() |
![]() |
![]() |
#82 |
Enquiring Mind
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
(Further to the previous post
![]() It's largely down to context. In the HTML code, "H1" is an HTML element, but when used in a CSS stylesheet, it becomes part of a selector which specifies which element(s) should have a particular set of formatting rules applied. Being used as a selector in the context of a CSS stylesheet doesn't stop it being an element in the context of HTML. |
![]() |
![]() |
![]() |
#83 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
thanks again - I am still looking for a good we page / crib sheet that covers the shorthand forms. books I have seen are aimed more at web page makers, I just want to understand all the stuff I see used in e-books.
|
![]() |
![]() |
![]() |
#84 |
Enquiring Mind
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
There's no difference between the HTML and CSS used in ebooks, and the HTML and CSS used for web pages (at least when considering EPUB ebooks). Except that e-reader devices and applications might only understand a subset of CSS (and working out what does and what does not work in an ebook is largely a matter of trial and error). But it's not like there's a different "flavour" of CSS used in ebooks compared to web pages. It's identical.
|
![]() |
![]() |
![]() |
#85 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
yep - it's finding a source that mostly just has the relevent subset, not 100s of pages on how to do interactive forms n stuff.
I looked through several & they failed to explain what you told me in a couple of short posts ( well maybe it was buried somewhere in the detail within the books, if I'd read them cover to cover ) |
![]() |
![]() |
![]() |
#86 |
Enquiring Mind
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
I know the official CSS specs can be hard going when you drill down into the deep detail, but they can be useful in terms of top level detail too - there's a table in the CSS2 spec that lists the different CSS selector types and syntax, which is actually quite useful in getting an overview. It's then a matter of choice whether to drill down into the more complex, detailed explanations of what each type of selector means and how it functions.
As far as the subset of CSS etc that is relevant to formatting ebooks, the most commonly referenced source of reliable info on formatting EPUBs that I've seen is Elizabeth Castro's book "EPUB - Straight to the Point". I haven't read it yet myself, but I've seen others here recommend it highly. Might be worth a look, if it isn't already something you've looked at. |
![]() |
![]() |
![]() |
#87 | |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 31,064
Karma: 60358908
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
p.calibre15 is only valid for <p class="calibre15"> and NOT valid for <h3 class="calibre15"> (All I care is what I type there works ![]() ![]() |
|
![]() |
![]() |
![]() |
#88 |
Enquiring Mind
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
|
![]() |
![]() |
![]() |
#89 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
There is an article on CSS in our own wiki that is oriented toward eBooks as well as hundreds of articles on other eBook topics.
|
![]() |
![]() |
![]() |
#90 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
Quote:
e.g. this css does not cascade the line spacing - it still defaults to 1em for my (now not indented) 1st para. .description 1 is the para style in this instance - so I add your noindent code immediately afterwards like so: .description1 { border-bottom: 0; border-top: 0; display: block; margin-bottom: 0.3em; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-top: 0; text-indent: 1em } .noindent {text-indent: 0} it works only if I add another line to noindent like so .noindent { margin-bottom: 0.3em; text-indent: 0} book code Code:
<br class="calibre6" /></h2> <p class="noindent"><span class="none">Randy left the house in time to see Missouri wedge herself under the wheel of the Henrys' Model-A Ford, an antique -so certified with a "Q" tag issued by the state-but kept in perfect running order by Malachai's mechanical ingenuity. "I haven't finished but I got to go now," she said. "Mrs. McGovern, she holds the clock on me. I'll be back tomorrow."</span></p> <p class="description1"><span class="none">The Model-A, listing to port with Missouri's weight, bounced down the pebbled driveway. Randy got into his new Bonneville. It was a sweet car, a compromise between a sports job and a hardtop, long, low, very fast, .and a lot of fun, even though its high-compression engine drank premium fuel in quantity.</span></p> can you explain this please. is it because the preceeding style to noindent ( in the book html, is calibre6, which inherits from calibre5 which inherits... - do I have to backtrack up that structure and/or place the .noindent definition elsewhere in the css ? Last edited by cybmole; 02-26-2011 at 05:05 AM. |
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Indents! Please Help! | Ephraim | Sigil | 8 | 11-23-2010 03:43 PM |
Margins and Indents | sloecoach | Calibre | 2 | 09-26-2010 04:41 PM |
Display of Hanging Indents | crutledge | Workshop | 1 | 09-25-2009 06:09 PM |
RFE: Remove remove tags in bulk edit | magphil | Calibre | 0 | 08-11-2009 10:37 AM |
Hanging indents? | llasram | Kindle Formats | 11 | 01-05-2009 10:59 AM |