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

lowercase : will make your text lowercase.

uppercase : WILL CAPITALISE ALL LETTERS.

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

Font-Weight for Multiple Elements

Line-Height to space the Text

Adjust the Hover State of an Anchor Tag

<style>

a {

color: #000;

}

a:hover {

color: #00F;

}

</style>

Changing the Element’s Relative Position

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:

p {

position: relative;

top: 15px;

}

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

Here is what we start with:

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

<style>

#searchbar {

position: absolute;

right: 50px;

top: 50px;

}

section {

position: relative;

}

</style>

<body>

<h1>Welcome!</h1>

<section>

<form id="searchbar">

<label for="search">Search:</label>

<input type="search" id="search" name="search">

<input type="submit" name="submit" value="Go!">

</form>

</section>

</body>

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