10 CSS-related How-Tos Based On Search Prompts

Here’s a coding exercise: open new incognito tab and search for “CSS how to”. Then check if you know how to do the suggested prompts yourself.

With HTML-topic being done, why not trying the same exercise but with CSS this time (and maybe JavaScript at some point later).

So, the task is the same: new incognito search, checking the prompts, trying to figure out how to do it yourself.

• CSS how to center text

Apparently, the first result is the same as for the HTML search.

Centering text with text-align property:

<p class="text-block">Some text.<p>

.text-block {
  text-align: center;
}

No surprises here, same in the search results. Flexbox and margin are normally used for blocks of elements and not just for text, so it’s better to stick to text-align.

• CSS how to center an image

Again, one of the identical prompts as for the HTML search. Can be done with the same text-align property:

<div class="image-container">
  <img class="image" src="https://images.unsplash.com/photo-1517971053567-8bde93bc6a58?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4fEZ6bzN6dU9ITjZ3fHxlbnwwfHx8fHw%3D" alt="Islands, sea and boats." />
</div>

.image-container {
  text-align: center;
}

Or with flexbox:

.image-container {
  display: flex;
  justify-content: center;
}

Or with margin (width and height properties adjustment is needed in this case):

.image-container {
  width: 200px;
  height: 200px;
  margin: auto;
}

.image {
  width: 200px;
  height: 200px;
}

Among the search results the easiest solution seems to be with adding display: block (as it doesn’t require wrapping the image with another element):

<img class="image" src="https://images.unsplash.com/photo-1517971053567-8bde93bc6a58?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4fEZ6bzN6dU9ITjZ3fHxlbnwwfHx8fHw%3D" alt="Islands, sea and boats." />

.image {
  display: block;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

• CSS how to make text bold

Text can be made bold with font-weight property:

<p class="text-block">Some text.</p>

.text-block {
  font-weight: bold;
}

No surprises here. If we are doing this with CSS and not HTML tags like <b> and <strong>, then we have to use font-weight property.

• CSS how to remove underline from link

CSS text-decoration property set to none can be used to remove an underline from a link:

<a class="link" href="https://www.google.com/">google.com</a>

.link {
  text-decoration: none;
}

Among the search results you can also find information on how to style various effects for links (hover/visited/etc.), but when it comes to removing the underline, text-decoration property should be used.

One neat trick related to links (or other elements) is to remove all of the styling from them with all property:

a {
  all: unset;
}

However, when using this, you should keep in mind that it removes all of the styling from your elements (colors, cursor style, underline, etc.), so you have to set everything by yourself (for each element individually or for all of them by adjusting CSS for the appropriate elements).

• CSS how to change font color

Font color can be changed with CSS color property:

<p class="text-block">Some text.</p>

.text-block {
  color: green;
}

That’s pretty much the way to do it, so nothing unusual in search results.

• CSS how to

Contrary to the HTML prompts, “CSS how to” was listed as #6 prompt. There are so many ways to learn it, so I would say the same thing as for the HTML-story: just go with MDN docs and W3Schools if you want to learn it from scratch and later on you can decide where to go further (if you need some additional information).

• CSS how to change font

Font can be changed with font-family property:

<p class="text-block">Some text.</p>

.text-block {
  font-family: Arial;
}

I’ve already talked about setting various fonts in the previous story, so here we can stick to web safe fonts (those that should be available without any additions to your code and look more or less the same throughout various browsers). A quick search can bring a list of them, if needed.

• CSS how to change background color

CSS background-color or background properties can be used to change the color of the element’s background:

<p class="text-block">Some text.</p>

.text-block {
  background-color: blue;
  /* Alternatively */
  background: blue;
}

Not much else to say here. As with the text color, background colors are pretty much straightforward.

• CSS how to center a button

The same approach as for centering an image can be used for other elements, like buttons in this case. For instance (without wrapping the button with other tags):

<button class="btn">Button</button>

.btn {
  display: block;
  width: 100px;
  margin-right: auto;
  margin-left: auto;
}

Centering elements remains one of the most popular questions in web development it seems. In search results there are also suggestions on how to center buttons vertically (in which case absolute position and transform property can be used + you might also need to put your button inside of a container):

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• CSS how to hide scrollbar

The last prompt was a bit unexpected (at least for me), as I usually don’t need to do much with scrollbar (apart from playing around with its style from time to time).

The most direct approach is setting the overflow property to hidden:

body {
  /* Hide all scrollbars */
  overflow: hidden;
}

body {
  /* Hide vertical scrollbar */
  overflow-y: hidden;
  /* Hide horizontal scrollbar */
  overflow-x: hidden;
}

But this will remove the scroll functionality and might affect other elements.

A nice example of removing the scrollbars and keeping the scroll functionality is given by W3Schools, so I would just refer to it (simplified version):

<p class="text-block">Some scrollable text here. Some scrollable text here. Some scrollable text here. Some scrollable text here. Some scrollable text here.</p>

.text-block {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  overflow-y: scroll;
}

.text-block::-webkit-scrollbar {
  display: none;
}

So, here are 10 CSS-related search prompts to do a quick exercise and check how much of the most popular things you can do on your own. Quite similar to HTML prompts in some results, but then it is also obvious as HTML and CSS usually go hand to hand. A little bit unexpected came the scrollbar question, as it seems to be some sort of a niche thing, but it is nice to find something new (or rather something that has not been much used by you before).

Once again, not trying to reinvent the wheel here or to do any SEO-activities, just playing around with search prompts and testing my own knowledge.

Thank you for reading.