A really simple webpage would look like...
<html> <head> </head> <body> <p>Hello Internet</p> </body> </html>
What you see above is some HTML- 'Hypertext Markup Language'
It would "work"... even though fails to supply certain basic elements that HTML 5 expects. (They're details for another time!) For now, we have enough to press on with to learn a bit about CSS... "Cascading Style Sheets".
Before I discuss the above, let me tell those who don't already know: You don't need a webserver on the internet to experiment with these ideas. (I'll explain that in a moment.)
Also, for those who are crying "but I don't WANT my pages more complicated! I don't WANT to get mixed up with CSS": I feel for you. That was my view for a long time. All I can say is, for me, the pain (considerable!) has been worth it. But I was self-taught, with many, many hours of staggering around in the dark. I hope this and other things will make your "getting started" pains minimal. (The W3 Schools reference is excellent, by the way. Especially their "try it" feature.)
Type the HTML into a simple text editor, e.g., in Windows, the excellent free Textpad.
Save the file on your local storage, using .htm or .html as the extension.
Switch to any web browser. (I like Firefox and Brave). Use File/ Open File (or whatever your browser calls it... I've given the commands for Firefox. With the Brave browser/ Windows, drag the file from a File Explorer window into an open Brave browser.)
Going back to the code...
Notice the nested blocks. At the highest level, the page is just...
<html>
(some stuff)
</html>
(Colored text, like "(some stuff)" in the above is not HTML and wouldn't work.
Go a little deeper, and it is...
<html>
<head>
(an empty "head" block)
</head>
<body>
(a "body" block, with one "tag- with- content" in it.)
<body/>
</html>
If you take my advice, your pages will use the same basics. They will eventually have a great deal of other stuff in them... but all my web pages have the structure above.
The page presented, absent other things, would put "Hello Internet" on your screen if you fetched it with a browser.
LOTS of things about the displayed text can be changed... if you know how.
There are many ways! Each with its own charms. CSS is all about "tweaking" things. For instance...
If the following appears in a "Body" block, and other things aren't having an influence too, the following will give us what we had before, but the text will be in blue! Whoop de do!
<p style="color:blue;">Hello Internet</p>
But before you get too dismissive, before you let pride go before a fall, just please take note of a few things.
What we did there was we said: "For this <p>...</p> block, we want the text to be blue, not the default color for <p>...</p> block text."
Once you know the right syntax for changing the color of the text in a block, you know the right syntax for doing a HUGE number of things. You can of course, have other colors. But the WAYS you can specify the color you want are many and marvelous. And you can of course change more that the text color.
The W3 Schools reference is superb... but don't be a kid in a toy shop and try to play with EVERYTHING right away!
The W3 Schools reference says, on https://www.w3schools.com/css/css_text.asp that you can use the color property to set the color of the text in the <p>...</p> block.
Those are some of the "grown-up" words you will find useful in web searches.
Once you know how to change the value of (aka "setting for") one property, a vast array of possibilities opens out for you.
If the following lines...
<p style="color:blue;">Hello Internet</p> <p style="font-style: italic;">Hello Internet</p> <p style="color:red; font-style: italic;">Hello Internet</p>
...were in the <body>...</body> block of the html presented earlier (and nothing else was going on... I'll say that a lot in this!), then you would see...
=========== (this just to mark start of what you would see)
Hello Internet
Hello Internet
Hello Internet
And, by the way, you could use the same thing in other tags, e.g....
<body> <h2 style="color:blue;">Hello Internet as heading</h2> <p style="font-style: italic;">Hello Internet</p> <p style="color:red; font-style: italic;">Hello Internet</p> <body/>
... produces...
==========
Hello Internet
Hello Internet
------------------------------
Using CSS styling this way, you insert style="" inside the tag ("<p>...</p>")
Then, inside the quotation marks following the equals sign after "style", you insert one or more bits, following the following syntax:
property-name colon property state
Taking...
style="font-style: italic;"
... as an example:
That sort of CSS is called "inline CSS", which is the lowest level sort. It works fine... but the big benefits of CSS only begin to open up when you get more "clever" in your use of CSS.
It pains me, as a CSS enthusiast, to mention the following.
It seems to be an untidy detail to stay on top of. I don't know why it has to be... but it does. Such things are NOT typical!
At some point, you'll want to do things with the font-family property...
font-family: "Times New Roman", Times, serif;
That won't work for in-line styling.
For in-line styling you have to change the quote marks to apostrophes...
font-family: 'Times New Roman', Times, serif;
(You only need to put the font name in quotes or apostrophes if there is a space in the name.)
When are you not using in-line styling? Ah! That's what I'm just about to explain!...
---
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?
The next level above inline CSS is "internal" CSS...
If you had the following inside the <head>...</head>block...
<style>
.give-color {
color:blue;
</style>
... then, down in the <body>...</body>block, you could say...
<p class=give-color>Hello Internet>
... and get what you got before!
It is still based on "color:blue;"... you are still saying "give the "blue" value to the color property of this.
But you are saying that a better way.
How is it "better"? Why is it "better"? I wish I had more time. For now, I want to explain more about how you can do things. Just try it. I think you'll see, once the details of doing it become familiar.
The next level, above embedded CSS, is external CSS...
I've put an example of using external CSS online for you.
Before you can use external CSS in a web page, you need to have some "external CSS".
You provide yourself with this by making an additional file available to the browser displaying the web page. It should have .css for its extension.
For our purposes here (and for your needs "in the real world", not infrequently) just put the .css file in the same folder as the .htm file. (Write it with a simple text editor.)
For our simple case, the .css file can be...
/*basic-styling.css
vers 09 Mar 2024
started 09 Mar 2024
*/
/*Comments in .css files go inside
a slash+asterisk to start, an
and asterisk+slash to end!
*/
.give-color {color:SlateBlue;}
Actually, the file could consist of JUST the last line. The rest of it is comments. Comments are good. Use them!
You can save that under any name ending .css... but for our purposes here, call it basic-styling.css.
... and then, in the <head>...</head> block of basic-styling.htm, add...
<!-- =================== --> <!-- EXTERNAL CSS styling --> <link href="basic-styling.css" rel="stylesheet" media="all">
It should go BEFORE any internal styling you may have in your page.
IF YOU HAVE tweaked the color of <p>...</p> blocks in your page's internal CSS styling section, rem those tweaks out for the moment. (/*like this*/, if inside a <style>...</style> block, instead of the usual- for- HTML <!-- ... -->)
... and now you page should be displayed... exactly as it was displayed before!
But now we're using powerful mojo to do it.
Imagine you have five pages talking about, I don't know, a trip you took?
Wouldn't it be nice is the style of everything was consistent across all 5 pages? Let's say your trip report is done like a diary, with headings marking the beginning of each new day.
And let's say, half way through the project, you want to change what those headings look like.
If you've used external styling: No problem!
(You do see why, right? If not, review what we've done so far. You should see why, in those circumstances, you've done the styling with an external style sheet.)
I've said comments are good. You can also use them in internal and in-line CSS. Use the same delimiters ( /* ... */ ) when you are inside the "{style}...{/style}" block of some embedded code, or inside the style="..." blocks, respectively
CSS stands for Cascading Style Sheets.
So far, I've completely neglected the "Cascading" part... and it is a wondrous thing. But I'm out of time for today.
But I'll make a poor start.
Suppose you've got .give-color in both your external and internal styling. AND you've styled a particular <p>...</p> block a bit with inline styling...
<p class=give-color style="background-color:yellow;">Hello Internet
It's okay! All of the things you've asked for, in the various places, will show up in what appears on the page!
But! (There's always a "but", isn't there?)
What if, in the external styling you've said that the text should be green, and in the internal styling you've said it should be blue?
Don't worry! It will all work... and even work according to sensible rules. As I said, I'm out of time... for now "the last thing the browser was told is what it will use" will have to suffice.
It was this business that led me to say "and other things aren't having an influence" so often earlier in this tutorial.
You can't learn "all" of CSS in one tutorial.
What I've tried to do here is to show you HOW to put some CSS into how your page displays. WHAT you can do with CSS (beyond changing the color of some text!) will come. But I hope you can now at least do that, by the several available techniques.
Why have I troubled novices with more than one way of doing something? Because it is when these are used in combination that CSS becomes the wonderful tool it can be.
I was very resistant to CSS when it came along. I have been won over.... even though I like my web pages "simple".
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 .....