@astrophile I must say, that I started to understand the concept by the third paragraph and did the fourth, fifth just out of happiness at finally understanding the concept of anchor! 
Thanks a lot, Lumi! 
I have a suggestion: Can you post some more tags for HTML just to learn and practise, just like you have done for BBcode here:
Some things make more sense once you do them. Glad you were able to figure it out.
A cutie ghost is cutie. Good hugs. Can’t feel but it’s there. Very there. 10/10 hug.\
Ghosties.
Are.
Cute.
Super cute kitty. Kitty looks super cute. Pat pat goes the head.
I.
Like.
Kitties.
Bear hug so sweet. Brown bear looks mostly confused though. Still caught white bear. Maybe brown bear happy on the inside?
I.
Ship.
The Bears.
Apparently the Great Wizard’s type of magic deals with destruction and unbalance. The Great Wizard isn’t as perfect as they appear to be, and their fatal flaw is trying to keep all of the power to themself.
Those who try to steal the Great Wizard’s power want to restore balance.
The dragadon is a hologram that helps us with our new life by answering a few questions every day. The dragadon serves an unknown master. This master could be the Great Wizard, since the dragadon’s master doesn’t seem to like the Necromancer (see below) and the Necromancer works with creation (which is the opposite of destruction). The master could also be someone who works with a type of magic called Illusion (see the third type of magic) because the hologram could be considered an illusion.
The Necromancer raises things from the dead, and that can be seen as “creating” new life. Therefore, the Necromancer works with the Creation type of magic. The Necromancer typically hangs out in the Lair, and they have eyes everywhere except in some PMs and the in-between.
According to the dragadon, the Necromancer prefers being around dead things and doesn’t care too much about the living.
This is the third and last type of magic. It is also the type of magic that we know least about, although many people believe Illusion can be represented by 
or 
.
Some people also believe the dragadon’s master works with Illusion, since the Great Wizard works with destruction, the Necromancer works with creation, and another master must work with illusion. The hologram can be thought of as an illusion as well. Most of these thoughts are just theories, though.
Does this work?
Yes, your link works.
lots
of
text
here
la
dee
da
even
more
text
here
la
dee
daa
guess
what
more
text
here
la
dee
da
wanted to do more but I need to shut down computer FAST!
Huge thunder storm
Unit 3: Introduction to CSS
@flyingCouch @xinmure @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @Beth-Pebble @JJJ000YYY @Nablai @keen
Today’s lesson is one that you will use and remember for a very long time to come. After all the build-up we’ve done with practicing the different types and being careful with our anchor construction, it’s time to dip our toes into the deep, deep waters that is code customization. For now, we’ll be practicing in a smaller pool but… one day, you, too, will be able to swim in the ocean of coding by yourself.
When designing webpages, CSS is the language used to make it look pretty. Click the word “CSS” to access a page to learn about it more in-depth but… basically, with CSS, you can change the color of the words, the font, add a background picture, and much, much more. Notice how these assignment posts have a border around them. That’s CSS. Notice the spacing between the words and the border. That’s also CSS. Notice the title at the top with the unit number and the unit title. That’s also CSS. CSS, when one knows how to wield it, can be used to create wondrous things… almost like how a magic wand allows the user to create and use spells. It’s a skill that can be refined with practice, so let’s dig in.<span style="font-size: 10px; display: block; color: white; background-color: tomato; width: 100px; height: 100px; border: 2px solid blue;">This is a sentence. This is another sentence.</span>
Looks a bit nasty, doesn’t it? There’s a lot of different elements going on, so we’ll need to break this apart bit by bit before we can understand what’s going on. First, we use the HTML tag span. Span acts as a container where we can put in style instructions and the content of our post. Everything within the style="" is considered inline CSS, a specific form of CSS that works inline. It is also the form of CSS commonly used when stylizing forum posts. Everything in the inline CSS that follows is in the form of property-value pairs, each separated by a semicolon as a delimiter. Here’s a closer look at this:
When coding in the forums, font-size: 10px; must be used first. It can be another value besides 10px but it has to be included and it has to be first. No one really knows why. If you code elsewhere, you’ll notice it’s not needed there. However, when coding here, you’ll need to use it. If you ever find yourself wanting to code but not wanting your font size to change, you can use this variation of it: font-size:;, which would also satisfy the requirement of using it.It’s a pain but you’ll get used to it.
Loopholes aside, the font-size property is used to change the size of the font. Default font size without any changes is around 12px. Don’t quote me on that. I’m not too sure on the exacts of it. Increasing past 12px will make the font size bigger just like how decreasing below 12px will make the font smaller. For the unit title of this post, I am using 20px for the font-size. Playing around with the number will help you get a good sense of how the sizing works. It’s something that comes with practice.
I will go into more detail about display: block; in a future assignment but for now, all you need to know is that it changes the behavior of the span container to make it more versatile for modifications.color: white; will change the words in the container to be the color white. White is one of many CSS colors where you can use the name and the code will know which color you’re referring to. You can, alternatively, use hex codes (color: #ffffff) if you want to be more specific. More systems for colors exist, such as rgba, but for the sake of keeping things simple, we will not be covering those.background-color: tomato; will add the color tomato behind the words you wrapped with the span tag. You can also use hex colors for more specificity, and it works similarly to the color property. This is the bread and butter of thread design and one of the most commonly used properties.width: 100px; and height: 100px; define the dimensions of the container you’re making. It tells the system to make your box 100px by 100px. Px (short for pixels) is a unit of measurement often used in coding. We will cover other common units in a later lesson but for now, we will use pixels only.border: 2px solid blue; creates a border around your words (similar to how I have a border around these assignments). 2px is how wide the border should be. solid is the border style (and there are many, many more you could use). blue is the color that the border should be. You can also write border: 2px solid; if you want the border color to default to the same color as the default text color. On the light and graceful theme, the default for text and borders is black. On the dark theme, the default for text and borders is white. It’s important to be aware of different themes when coding because of accessibility. Certain colors may be harder to see on some themes compared to others (e.g making your text color white with no background color behind it would make your words only readable by those using the dark theme). Keep this in the back of your mind whenever you code or design a thread.</span> is a very important property because it defines the end of your container. I’ve seen many people in the past who get lazy and leave it out but then something in their code ends up breaking because of its absence. Whenever you code, get in the habit of writing a closing </span> tag every time you open and write a new <span tag. The opening and closing tag come in pairs and it’s just proper code-writing to always close the tags you open. The img tag is one exception to this but most tags that you use will need a closing tag. If you’re ever not sure if a tag needs to be closed, just ask.
Okay, so… that was a lot but we finally understand the example code we started with. Now, it’s time for you to splash around a bit. Using my above explanation of the code and the example I shared, I want you to change all of the following properties:
● font size
● color
● background-color
● width & height
● all 3 things about the border
Direct reply to this message with your submission by August 31st 6pm PDT. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!
@astrophile I have a question about last week’s assignment, Lumi. While I was writing this code:
It’s generally not recommended to mix coding types together, which is why we spent time going over the differences in the first assignment. Mixing the types can still be done but it requires being very careful and making sure you space out your lines so that only one code type is in each line, if that makes sense.
Something like this as a basic example:
[center]
<b>hello</b>
[/center]
Yes, that makes sense, Lumi! 
Thank you! 
No problem! 
can I ask how you make the space between the border and the words?
Add in padding like this:
padding: 10px;
You can read more about it here:
thanks!
No problem!
An has semper indoctum. Pri audire omnesque ne. Summo platonem adipiscing in vim, quo ex aperiri aliquid voluptatum. Unum aeque dignissim ex eum, no cum sanctus consulatu posidonium, mea in tamquam concludaturque. Ne essent complectitur consequuntur has. Ut verear nominavi antiopam eos, habemus mnesarchum accommodare te pro.
Ut has dolorem pertinacia, adhuc elitr vim ex. Homero oporteat te est. Cu eam movet denique. Erat persecuti qui eu, ex mel nostrum mentitum. Ne congue graece vis, et alterum bonorum percipitur qui, illum suscipit pro id.
Populo volutpat quaerendum has at, vel iusto decore concludaturque ut. Id mel ubique temporibus, aperiam officiis perpetua ius ad. Omnis luptatum salutatus sea in, no cetero maluisset intellegam eos, atqui temporibus vel no. Debitis fuisset ad usu, eam affert lucilius ea, eam salutandi gloriatur ut. Mea cu docendi erroribus, pro id efficiendi conclusionemque.
Vix ex choro nullam temporibus, deleniti oporteat posidonium ad vix, id eam voluptaria scriptorem. Duo ad causae aliquid accusamus. Ex cum ignota invidunt, ut dicat torquatos sit. Placerat definitiones et sit, pro ipsum fugit persequeris id. Accusam definiebas ut pro.
I can’t even imagine who that would be. 
I, too, wonder who. 
I will go hide now.