Unit 3: Introduction to CSS
Calling all students!
@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!