Have you ever looked at those blue words and blue underlines? Yeah, same. It's just a pain to see them in Word documents. How about in websites made of HTML and CSS? Can we make them more gorgeous and clickbait-y?

Well, you can definitely style your links in CSS. However, you have to specify a pseudoclass for this, which is :link. This is placed adjacent to the anchor tag, like a:link. This will only work for unvisited links. If you want to modify visited links too, you can also add a:visited.

After specifying the pseudoclasses, set the text-decoration property under both unvisited and visited links to none to remove the unwanted underline. Next, change the font color using the color property to change the blue color of the text.

Taking these a step further, you can add the pseudoclasses :active and :hover for interactions upon clicking and hovering, respectively. Adding a transition time will make those changes smooth.

In this particular section, I will only discuss five of the six different values of the position property. These are static, absolute, relative, fixed, and sticky.

position: static; — the default setting for elements. The flow will behave as ordered in the source code. Positional properties will be disregarded for this certain type.

position: absolute; — removes the element from the flow of the document. It is always relative to a parent whose position is non-static. If there are none, it will automatically be positioned relative to the document.

position: relative; — modifies an element's position relative to its original location. Positional properties will work and nudge the element.

position: fixed; — functions like absolute positioning. It is always relative to the document and stays on-screen even with the movement of scrollbars.

position: sticky; — will initially function like relative positioning but will function like fixed positioning upon scrolling to a certain extent. See the header and the footer of this site as reference.

With these, you can either do a trial-and-error to see what type works best for your element or idealize before executing your plan.

Have you noticed that after letting your mouse cursor touch an element to experience the hover effect, the effect abruptly wears off? It's kind of sudden. However, if you want to make it smoother by adding some transition time before returning to its original style, then this tip is for you!

A negation pseudoclass can be used to make this more smooth. This is declared by using :not. However, you also need to specify the class which is supposed to be negated. For instance, if you want to add an animation after hovering, you can use :not(:hover).

This can also be used to exclude certain classes. For instance, if you want to exclude div#ter, you can use :not(#ter).

Horizontally aligning a text or an image is really easy. Inserting the text-align property will solve it. However, vertically aligning an element will be a challenge if you don't know how to approach it.

A common misconception to vertically aligning elements is using the vertical-align property; similarly, using the text-align property on everything doesn't quite solve your problem on alignment and yield an intended result.

There are two approaches when it comes to aligning items both vertically and horizontally. The solution is actually changing the display property instead of the default block value. You can change it to display: flex; or display: grid; to gain the ability of aligning properly and simultaneously.

When using display: flex;, the alignment will depend on the flex-direction property. By default, this is set to row value. With the default setting, the justify-content and the align-items property will align elements horizontally and vertically, respectively. However, when this is set to column value, the properties will align elements inversely to the row value. These will apply even with the row-reverse and column-reverse values.

When using display: grid;, there are two properties which will align the elements decently. These are the justify-items property and the align-items property. Think of the first as aligning on the x-axis, while the second as aligning on the y-axis.

Remember the position: sticky; discussed earlier? How about position: fixed;? These work similarly, the only difference is that the former can appear later, whereas the latter always appears on-screen.

You can choose to select position: sticky; if you want headers that stay on-screen to hint the audience of your site about the topic and to not get lost in reading. You can also choose this property like the header designed in this website to occupy a space without obstructing other elements, since it is designed to be like relative positioning until a certain extent where it imitates fixed positioning. Do note, however, that once the parent is gone, so is the child whose position is sticky. The only exception is if the parent is the body.

Selecting position: fixed; is best for advertisements on site and retaining any elements on-screen. This has a tendency to block other elements.

Simply putting input tags on a contact section is boring and dull. Let's spice it up!

You may want to add the padding and the margin properties on those input whose type involves text. You can select certain types of input by declaring input[type] in the site's CSS.

Customizing the submit button? Bring it on! You can modify the word inside a submit button by typing value="SEND" as an example. Add some hover and active effects and you've got yourself a gorgeous button.

With all these inspirations, you'll start thinking, "Hey, maybe I'll remove all of these elements of—". No, I recommend you don't. Just stick with your ideas and focus on styling these. Maybe you'll be better off doing this rather than starting from square one.

Remember: "Believe in all your heart." Put your best interest first when it comes to styling your websites. Have fun in making your project!