Learning to Code: Day 12 — Applied Visual Design Part 2

Alright ya’ll, let’s jump back into learning about Applied Visual Design in HTML using CSS. Man, this is so exciting isn’t it? All lessons from FreeCodeCamp.

Hey can a shadow box? No, but a box-shadow! Awful. Forget I said it.

Using Text-Transform to Alter Text

Hey we all like consistency right? Well the text-transform property can ensure that all text is consistent, without having to go through the text content and edit it there in HTML. Let’s take a look at some values (text-transform:value;) and their results:

lowercase : will make your text lowercase.


capitalise : Will Make The First Letter Of Every Word A Capital Letter Like This.

initial : Uses the default value. It means the “default value of this property” which is none. So it’s the same as saying text-transform: none;.

inherit : The element adopts the value of the text-transform of the parent element.

These can be applied within the selector of which you’d want to affect a specific element with.

Font-Sizes for Multiple Elements

the font-size property can be used to create certain font size in multiple elements, for example the paragraphs (to be more visible to the user) or the headers (to be equal sizes in their layout overall) for a more consistent layout. Everything is just easier in life when there is consistency right?

Font-Weight for Multiple Elements

How much does that weigh you say? Well you can set the font-weight property to text with numbers of your choice (e.g. 200 or 800) within the element’s declaration, in the style tags, which will create a thickness to the text itself. You can be really specific about how thick or thin you want the text.

Line-Height to space the Text

Applying the line-height property will space the lines between text in a paragraph for better visibility for the user, and look less clustered. As you can tell, this is a vertical height that you are manipulating.

Adjust the Hover State of an Anchor Tag

Remember pseudo-class selectors? They are keywords that when added to selectors, they select a specific state of the element. We looked at one already: the :root selector. Well the :hover selector is active when the user moves the mouse over a hyperlink, which the anchor controls. We can change the colour of the hyperlink when the mouse “hovers” over the link. Here’s some code which shows just that. Within the style tags, we have the anchor stating that in it’s normal state the colour is black (#000, the abbreviated Hex code). Then we add a :hover to the anchor (written as a:hover) which says that when the :hover is active, change the colour of the anchor to blue (#00F, The F is the B for Blue in RGB at it’s maximum value, remember?)

Changing the Element’s Relative Position

Each element is treated as a box in HTML, which explains the term the CSS Box Model. The “normal flow” of a document, as it’s called, is how those boxes sit, block-level items start on a new line like paragraph, header and div, and images or spans sit within the surrounding content. But we can use CSS to override this layout with positioning properties like relative.

When we use the position:relative; in a CSS selector, the corresponding element is moved up, down, left or right of it’s original position (we’ll call that position zero). So, if you want to “push” the paragraph element down from it’s current position at 0px, you would say:

Now the paragraph has moved 15px south in the element, from it’s original position zero. We’re effectively offsetting the content of the element in the opposite direction to which we state (saying “top”, it moves downward and so on).

Locking an Element to It’s Parent Element with Absolute Positioning

With position:absolute; we can then lock an element to it’s parent container, this will take the element in question out of the “normal flow” off the document so surrounding elements will ignore it. You can use the id class selector (#example) within an element to identify what you want to lock. Here we look at the #searchbar selector. We’re going to lock it to the top-right of it’s section parent:

Here is what we start with:

Now let’s write the code in the #searchbar which locks it to the section as we wanted:

Which will give this result:

Note: This porperty command will lock the element to it’s closest positioning ancestor. If you haven’t defined one then the browser will ultimately pair it with the body tag.

Aaaaand let’s call it there. Remember I am only available to blog this lessons on Monday, Wednesday, Friday and weekends cause of my german classes starting up again (help).

We’ll continue this on Friday, I think we’ve got enough to chew on for now. Thanks guys for reading this and I’ll see you on Friday!

Step by step, learning to code with FreeCodeCamp