I agree. It’s just brilliant. Switching tracks for a mo . . .
I understand the technical explanation for a “CSS Pixel”, I just don’t understand the context for which it is being used. My LG Stylo 4 SmartPhone has a 360px by 720px Viewport . . . and a 1080px by 2097px resolution.
Is it a factor? a basis for something? I obviously don’t code for a 360px-wide screen: where in fact is the 360px width being used? Thanks Paul.
It is the factor 
360px is the logical width of your device as far as responsive design is concerned. That’s the point that media queries will react to when using the correct viewport meta tag.
Your phone is 360px wide as I’ve been saying all along. The resolution has nothing to do with the css pixel width. The resolution is how sharp the display will be as many device pixels are mapped to the one css pixel.
Some devices may have resolutions double or more than yours and you would need to use a microscope to read the result following your approach.
How do you think I can type this message on my iphone as I am doing now if the whole Sitepoint desktop display was squashed into the device width?
I have mentioned a few times now that you should browse some modern sites on your phone so that you can see for yourself.
This of course is of no use to you at the moment because as you say you have a special use case and you are happy to scale your site very small. However this is not the way the rest of the world does it
When you add your specific 1080px width viewport tag you basically tell the browser that your site is that wide but you want it scaled smaller so it fits in the 360px available width. It’s like having an image at 1060px wide and then shrinking it down to 360px. That’s why everything is so tiny. However that seems to suit your purpose so I guess it’s ok for you
I want to make sure I understand what you are saying: You’re saying I should be coding at 360px? 360px really?
No, I am saying the exact opposite. You need to be device agnostic. You need to code for all widths.
You can do this on the desktop. Open your browser window to its widest then close it slowly 1 pixel at a time until you get down to about 300px wide.
Your design should work and adapt to all those widths without breaking and without a horizontal scroll bar appearing and without the need to zoom to see anything.
Using a fluid design and some well chosen media queries this can be accomplished quite simply and will cater for all devices now and in the future.
This is responsive design!
Please simply get on your phone and navigate to Sitepoint or some other modern sites to see how they change the design for smaller screen widths and then compare to the desktop version. It should be immediately obvious to you the difference between what you are doing and what every professional developer is doing.
In essence device sizes are irrelevant. All a developer really needs to take care of is what their design will look like at any width.
Again here is the proof. This is a screenshot of what I am typing now on my iphone.
And this is an image of the same page from my desktop.
Paul . . . The one thing that is making it hard for me to wrap my brain around – and it really is this one thing – is looking at this RNDBDR project either with a viewport of 1080 -or- no viewport tag at all because it looks GREAT. It displays exactly the way I want it to! And with your most recent selector code it is beyond my wildest dreams that I (but really you) created this, whereas before thousands of dollars worth of software (not to mention a desktop computer) would have been necessary.
I am not disputing that anything you have said in this thread – the only exception being that I must code for the internet (I don’t, but since absolutely no one is able to get their head around that, trust me – you’re not alone heh) – that everything you’ve said is true. I’m just explaining that the fact that it looks perfect to me as is makes it difficult for me to reconcile why I’d want to change it.
You’re correct; and unfortunately for us all, so is my phone.
The one remaining problem I’m running into is compiling it to a .PDF – but that’s a completely separate issue I’m not going to address in this lengthy thread, and probably has more to do with the flea-bitten free Android Apps I’ve been using thus far more than anything else (oh to have my desktop and my Acrobat Pro!). Thank you Paul. And Dave. You’re absolutely the best, both of you. 
As you have established that this is just for you then that is fine and you should keep what works for you. No need to change it now.
If however you were putting something out there for the whole world then ‘you’ would be the last person to be considered. You would need to consider everyone else first and design something that works for all people, all screen sizes, all devices and without needing extra steps (such as zoom) to interact with the design. The concept is simple but the application is not always easy.
Generally on small screens readable text should be 16px. It’s actually easier to read smaller text on a desktop than on a mobile. (Indeed this Sitepoint forum site has their text a little too small for my liking when viewed on a mobile but as I said before a forum design is a difficult thing to achieve on a mobile anyway.)
Yes it’s true I know of no one else who uses HTML the way that I do (a thing we can all be thankful for! lol). 
Seriously though, this last touchup – your margin device – is so elegant, so clever I am lovin’ me some nth-child! It’s devices like nth-child that keep pulling me back in to HTML because it just blows my mind what I can do with them.
Can I ask you/everyone here on Sitepoint a somewhat academic question? It has to do with attaching a style name in CSS when you are using a device such as nth-child on more than one place in the same document. I’ve repeatedly tried Googling this down through the years but the question is so ubiquitous by its very nature that I can’t find a decent link(s) I can bookmark whenever I need to return to it. It will save countless hours of revisions (and posts on Sitepoint) if I can see it summarized in one place – preferably in a ‘Cheatsheet’ graphical form since we all can agree how hopeless I am with numbers. 
I welcome all links so this is for anyone really, and I’ll keep it simple:
Let’s say we have 3 different tables – .RED, .GREEN and .BLUE – in one document and we want to use nth-child to perform function AA on TABLE RED one way, and the same function but differently on table BLUE? We can’t just say TABLE because there’s more than one table in the document. What is the correct way to write the CSS styling so that it targets just one styled table – or maybe two, such as GREEN and BLUE, (excluding RED in other words) specifically? Something like .RED > table ____ nth-child ____? or .RED, .BLUE ____ nth-child? Anyone have a decent Cheatsheet for a hopelessly right-brained Writer like me? 
Thanks everyone. Yes I’m aware how kindergarten-level the question is.
Add a class to the parent of the group you want to target and use that class as the basis.
e.g.
.test1 li:nth-child(2) {
background: red;
}
.test2 li:nth-child(3) {
background: blue;
}
<ol class="test1">
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
</ol>
<ol class="test2">
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
</ol>
If it was a table you would add the class to the table element and then target the inner element that you want to style.
.data-table tr:nth-child(even) {
background: green;
}
For up to date information check the MDN website.
CSS tricks is always good value also.
Yes Paul but what I wanted is a cheatsheet – or even a link for a quick reference. I always go through anxiety trying to remember the exact way I write out the style so it’s attached just to those elements. This kind of stuff:
Is it
.RED TABLE { etc.
or
TABLE .RED
or
TABLE.RED
or
.RED, TABLE
See what I mean? The damn thing can be written with just one space off – one comma in the wrong place – and you break the code. And what exactly is the word for what I’m talking about? The Style? The Label? Plain old CSS? I have a little collection of these as snippets but they don’t always work and they are by no means definitive.
And to be specific: I’m not talking about the HTML, I’m talking about how to type out the class so it attaches to only the one/more things you want it to and leaves the others alone.
Take nth-child. Man there’s a field replete with unexploded ordnance. Throw a selector in there and the output is Pablo Picasso if you don’t know what you’re doing! 
The only reason I’ve ever got striping to work on just one table is because I had to go through all the possible permutations for how it could be expressed, with periods, commas, gt symbols, spaces, no spaces . . . see what I mean? The only thing I know is that they’re close to each other and usually before the bracket (where the class is labeled). It’s no way to code! Surely someone has a reference chart or cheatsheet listing all of them? It can’t be a long list (or could it?).
You seem to be talking about the CSS selector, and you might find this guide helpful.
Another useful article here, this one on combinators (to combine selectors):
The problem is all of these do something completely different so you have to start with WHAT you’re trying to accomplish…
.RED TABLE { etc.
This will select ANY table inside the element that has a class of .RED
TABLE .RED
This will select anything that has a class of .RED inside a table.
TABLE.RED
This will select an entire table that has a class of .RED on it.
.RED, TABLE
This will apply the same style to anything with a class or .RED OR any table.
The MDN link @TechnoBear provided is a good reference and shows all the different types of selectors that can be applied. The Codrops one is for level two of understanding as it allows css to get more selective on what it picks, but it comes with a whole other level of curveballs to it.
You can’t really have a cheat sheet as such because it’s basically a set of rules that have to be followed depending on the structure of the html so it would be an endless cheat sheet if one existed.
The references already posted above are the best way to learn about how to use your ‘selectors’ properly and the basics are pretty straight forward but there are some complex selectors that take a little more understanding.
Dave has already answered your questions above but I’ll show some code examples as well which might help your understanding.
For the above to work you would need html like this.
<div class="red">
<table>
<tr>
<td>testing</td>
</tr>
</table>
</div>
.red table{background:red;}
Remember that a space between ‘normal’ selectors is a descendant selector so you are targeting a table that is a child of the element called .red. Indeed the class of .red could be on a far distant ancestor (or even the body tag) but then you style all tables in that context.
To explain that concept imagine this is your html.
<div class="red">
<table>
<tr>
<td>testing</td>
</tr>
</table>
<table>
<tr>
<td>testing</td>
</tr>
</table>
</div>
.red table{background:red;}
Now both those tables will get a red background as they are both children of .red. .red is a common parent of both.
If you only wanted to target one of those tables then the class would need to be on the table element itself.
e.g.
<div>
<table class="red">
<tr>
<td>testing</td>
</tr>
</table>
<table>
<tr>
<td>testing</td>
</tr>
</table>
</div>
.red {background:red;}
Now the red class is on the table itself so only tables that have that class applied will be red (i.e. the first table in the example above).
You could qualify with the element selector e.g. table.red {etc}
table.red {background:red;}
(Note that now there is no space between table and .red as it is not a descendant selector. It is a class attached to the table itself.)
However there is no need to have the word table in that rule and it will still work. .red {background:red;} Generally, avoid qualifying a selector (like div.test) because .test on its own is fine. The main reason you will see things like table.red is if you want to style tables differently to the normal class of .red.
It is also bad practice to name things by their appearance because if you suddenly wanted all tables to be blue you would have to not only change the css but change the html as well. You never want to have a rule like this. .red{color:blue} That would be nonsense. Therefore use something like this:
.warning{background:red} or .highlight{background:orange}
Avoid using sequences like text1,test2,text3 as that is hard to debug and hard to visualise. Usually there’s a reason why something is styled the way it is so use more descriptive classnames. Class names like .main-text or .sub-text or info-text are much more helpful than text1,test2,text3 etc.
That will style an inner element of a table assuming it has a class on it.
e.g. This structure
<table>
<tr>
<td class="red">testing</td>
</tr>
</table>
table .red {background:red;}
Notice the space between table and .red (the descendant selector).
However once again the selector ‘table’ is essentially redundant in that context and all you needed was.
.red {background:red;}
Keep your selectors as short as needed and don’t over-qualify as that makes specificity harder.
e.g. don’t do this: div table tr td div .warning{background:red} when you could simply do this:
.warning{background:red}
I covered that above and it would be this structure.
<table class="red">
<tr>
<td>testing</td>
</tr>
</table>
table.red{background:red}
However you can lose the table element selector as already mentioned for the same effect.
.red{background:red}
That is a different concept altogether and the comma is delimiter for a series of selectors that may or may not have anything in common with each other. It’s basically just a list of items that share the same styles at the end. Each selector has nothing in common with the one before other than that they will receive the same styles at the end.
e.g.
.warning,
.highlight,
.error,
.reset,
.urgent{
font-weight:bold;
background:red;
}
The comma just separates a list of different selectors (they have nothing to do with each other).
As you can see there are not really any cheat sheets we can give you but rather a set of rules that have to be learned and followed. In essence working with selectors really should be lesson 1 in CSS as you can’t make fast progress without a good understanding of how it all works and ties together and how it allows you to target the items that you need to style.
[quote=“PaulOB, post:52, topic:386265”]
so it would be an endless cheat sheet if one existed.[/quote]
As per maestro, U da Man. 
Okay I’ll add your post to my snippets file. No wonder I’ve never found one. Damn. Thanks Paul.
While I’ve got your attention . . . I can’t understand how to get the <PRE> and <CODE> tags to work. I’ve tried it a bunch of ways and I really need to get it working to add to the cheatsheet I’m making. The code is simple and here it is. Any idea why this isn’t working Paul? I’m using Firefox.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>USING <PRE> & <CODE> TO DISPLAY CODE</title>
<STYLE>
HTML, BODY {
text-size-adjust: 100%;
font-size: 16px;
line-height: 16px;
}
BODY {
margin: 200px;
font-size: 1.38rem; /* 22px */
line-height: 1.05;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
P {
font-size: 1rem; /* Use <p></p> for leading */
line-height: .25;
}
.COU {
font-size: 1.5rem; /* 24px */
line-height: 1.05;
font-family: 'Courier Prime', monospace;
}
.ROB {
font-size: 1.5rem; /* 24px */
line-height: 1.05;
font-family: 'Roboto', sans-serif;
}
.ROBb {
font-size: 1.5rem; /* 24px */
font-weight: 700;
line-height: 1.05;
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<div class="cou">
For the THICK HYPHEN use <PRE><CODE>━</CODE></PRE>
<P></P>
For the EXTRA THICK HYPHEN use <PRE><CODE>▬</CODE></PRE>
</div>
<span class="ROBb">For the THICK HYPHEN use
</span> <PRE><CODE>━</CODE></PRE>
<P></P>
<span class="ROBb">For the EXTRA THICK HYPHEN use
</span> <PRE><CODE>▬</CODE></PRE>
</BODY>
</HTML>
Thanks Technobear. Those are excellent links.
Groan. Jesus. I uh . . . don’t suppose you’d happen to have made your own cheatsheet Dave? heh heh
What are you trying to do? pre and code just default to the browsers default monospace font, regardless of the selected fonts for a container.
If you’re trying to see the actual html entity codes, you’re going to have to cheat and escape the characters, so
▬
becomes
&#9644;
which will then display as
instead of
What I wanted to do is get code to display as code. I am acquainted with both of these tags but suddenly neither works. In other words, I want my source code to display in a browser window. Not a button – the entire page (or as much as can be revealed before the browser just tosses it out). I used to be able to use <code> </code> but it doesn’t work.
You can use an online converter such as this one.
Convert the code and then paste it into your pre and code tags.
e.g.
I believe it only worked when using the xmp tag but that was obsoleted years ago. The tag probably still works in most browsers but not guaranteed and should be avoided.
Okay! What a change. You can tell it’s been many years since I used <CODE>! Thanks Paul.
I’m just admiring once again that link you provided TechnoBear – the codrops one. Stored!
I’m sharing these links for anyone who might find them useful. CHEATSHEETS have evolved since I last (seriously) went on the hunt for them. They may not be complete but their interactive properties are lightyears in advanced sophistication from the flat graphics of yesterday! These are not your grandmother’s cheatsheets . . .
https://htmlcheatsheet.com/css/
https://html-css-js.com/css/generator/border-radius/
https://html-css-js.com/css/generator/column/
https://html-online.com/editor/
Of course it means you won’t learn a damn thing 
but wtf, if you’re in a hurry you can whip something out that’s passable and go in and tweak it.
To build FLEXBOXES:
https://doodlenerd.com/css3-generator/flexbox-generator
CONVERT A TABLE to <DIV>s