I'm very much a beginner with CSS myself.
I can't promise that the rest of this is "gospel"... but maybe, even where flawed, it will help you figure out why your pages won't do what you think they should.
Remember: All computing stuff works the way it works... which isn't always the same thing as working the way you think it "should". Sorry!
I make my web pages (and the .css files that drive them, when I use external style sheets) the "simple" way: I type raw HTML/CSS into a text editor.
It may not be the easiest way to create pages. It may not open up some of the fanciest options to me. But it keeps things SIMPLE.
(I used Filezilla to upload the results to my webserver. Ionos and InMotionHosting.)
Goes mostly to w3schools.com. This is a free resource, a bit like, say, Wikipedia. It is clear and enormously helpful. It is also easy to find the bits I want, especially now that I am a little way "into" the world of CSS. w3Schools taught me much of what I know about HTML, too. (Learn a bit about HTML before you attempt CSS.)
You can read an excellent introduction to CSS at https://www.w3schools.com/css/css_intro.asp
My other CSS mentor has been.... the W3C CSS Validation Service.
Once you have a bit of HTML and CSS online... or even just on your hard disk... first check the HTML with the W3 Nu Html Checker. Once you've fixed any HTML errors, run your page through the W3C CSS Validation Service.
The output of the HTML checker is particularly helpful about showing you where your HTML is not right.
The CSS checker will show you places where you are badly "wrong"... but in addition to clearing up any such places, you will have to look carefully at the output from the checker.
Note: If, say, you've set up a class called MyClass in an external style sheet, the CSS checker will have an entry for the things you set there.
If you subsequently over-rode some elements of your "first", "top level" setting for MyClass in...q
... then what the CSS checker shows for that first entry won't be the full story, will it?
Scan down the list of Valid CSS information to see what over-rides have arisen.
Be advised: In-line CSS won't be reported in the Valid CSS information... but... I think... the CSS checker WILL flag particularly egreous errors in any in-line CSS.
(If you aren't sure about "external", "internal" and "in-line", I hope my tutorial about them will be useful to you.)
When you are working with CSS, the W3 checker will catch many things. But if you fail to use it, or in some cases even if you do, and there is something that doesn't obey the rules in your CSS, then that... and sometimes things around it... are just ignored!
So if something "isn't working", look closely at the code behind it. And the code near the code behind it.
---
By the way... I have another page that covers much of the same ground as this page. Why read both? Don't you, like me, find that reading something "twice" sometimes helps get you past some sticking point?
I had created a class called tkbR. I'd inadverently put...
<img class="tkbr" ...
...into the page I was working on. The class was supposed to put a border around an image.
The image was appearing... the <img...> tag was "working"... but not quite how I wanted it to.
That was because the browser didn't see "tkbR". It only saw "tkbr"... so it just ignored my attempt to add the border.
Suppose you want to use an external sheet, or a block of embedded code to make the text of H1, H2 and H3 headings blue.
Easy!...
h1, h2, h3 {color:green;}
You may find aspects of the syntax for doing things frustrating at first.
If you want to change the color of the text in something, the property is "color", and one way of saying the color of the sky is just "blue". (That would be the "value" you are assiging to the color property. (There are other ways of specifying the color you want, and the list of color names is not according to the dictionary, but to a list of "known colors".)
In most places, if you wanted the text of h1 headings blue, you would say...
h1 {color:blue;}
But if you were using in-line CSS formatting, it would be...
<h1 style="color:blue;">
The core... color:blue;.. would be the same in either case. But for inline, the property/value elements are wrapped in quotation marks.
Elsewhere, they are wrapped in curly brackets.
Can you put several property/value elements inside one set of wrappers? Certainly!
<h1 style="color:blue;background-color:red;">
New-lines and spaces are ignored. So if you'd rather, you could write the above thus:
<h1 style="color:blue;
background-color:red;">
Not only are spaces ignored... but, between property/value elements (e.g. color:blue;) they are optional.
Note the structure of a property/value element:
(property) COLON (value) SEMI-COLON
If your are in a <style>...</style> block, you use /* to start a comment, and */ to end it.
<h1 style="color:blue;
background-color:red;">
/*Like this. Comments can be single line */
/*And they can be...
multiline*/
As many as you like! You don't need a separate block for each specification.
<style> h1 style="color:blue; h2 style="color:red; </style>
In the body of my pages I sometimes have something like...
<p class=Accom>Ritz Hotel</p>
What's this Accom thing? What's this "class" thing?
You won't find "Accom" in any reference. At least not the "Accom" that is present in my web pages.
A "class" is a "thing" you an make up!
My "class" named "Accom" might simply present "Ritz Hotel" as it would have been presented minus the class, except that it is in green.
All I have to do to create the Accom class is to put the following in External or Internal CSS for the page...
.Accom {color:green;}
As I typed up the above, I thought to myself, "Duh. What's so hard about this?"
And then I remembered my early CSS days. I would struggle, and struggle, and struggle. With simple things.
Try to learn "the rules". Try to adhere to them.
If something isn't working, and you think adding (or removing!) semi-colon might be the fix, fine! But don't add (remove) it on a "poke and hope" basis. Think carefully: Does my CSS "fit" the pattern of the "known good" CSS in the turorial? In other references you have?
LEARN the patterns. Use them. They aren't very complicated. It just seems complicated when something big is built out of a bunch of small, individually simple, elements.
I admit, as I said: CSS isn't very kind to beginners. It doesn't say "you made a mistake in line 27". It just throws dumb insolence at you.
Don't let it beat you. You can do this!
I like to put images on my pages. (e.g. my page about a trip to Italy.)
Before you'll be doing that easily and well, you will have to come to terms with "the CSS box model". Again, I would point you to the W3 Schools.
The box model is important for things beyond the placing of images in your pages... but if you start there, what you learn will help you when you use it in other contexts. Headings would be a good place to be "box model aware", for instance.
**I don't fully understand the pros and cons**... but...
It may pay you to put
* {
box-sizing : border-box;
}
... near the top of your CSS. That, in some circles, is... or at least was... the proverbial best thing since sliced bread.
Alas, at 3/24 a few people are saying they are not fans.
I like it... but I am not even a journeymay CSSer.
But be aware of box-sizing. It may be A Good Thing.
Suppose you put a box on the left side of a page, and set it's width to 20%
And then you put a box on the right hand side of the page, width 20%.
Will the two boxes be the same width?
Sometimes: yes.
... and I think sometimes: no... but I'm not sure. (I told you I am a CSS beginner!)
How could the boxes NOT have the same widths?
I think that in some circumstances, the width of the second box will only be 20% of the width remaining after the first box has taken 20% of the page width that was available before it was put down.
Aren't computers fun?
If you found this of interest, please mention it in forums, give it a Facebook "like", or whatever. If you want more of this stuff, help!? There's not much point in me writing these things if no one feels they are of any use, is there? I'm not telepathic. Encouragement will be appreciated! Contact details below.
|
Unlike the clever Google search engine, this one merely looks for the words you type, so....
* Spell them properly.
* Don't bother with "How do I get rich?" That will merely return pages with "how", "do", "I"....
Please also note that I have three other sites, and that this search will not include them. They have their own search buttons.
It's both! Flat-Earth-Academy.com is something I started years ago. For a variety of reasons, I can't offer you httpS:// access there. (As you are not asked to input any information, that's moot, but it "worries" search engines.) So I'm moving to my new, all singing, and will do the httpS:// dance site, "WYWTK.com", and Flat-Earth-Academy is gradually acquiring pages there. (Well, HERE, as what you are reading is one of my "wywtk/fea" pages.)
Why "WYWTK"? It comes from "What You Want To Know".
Page has been tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. It passes in some important ways, but still needs work to fully meet HTML 5 expectations. (If your browser hides your history, you may have to put the page's URL into the validator by hand. Check what page the validator looked at before becoming alarmed by a "not found" or "wrong doctype".)
AND passes...
....... P a g e . . . E n d s .....