loading

What is CSS?| Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • Basics about CSS
  • Basic CSS Example

Cascading Style Sheets (CSS) define how elements are positioned and displayed on a webpage. CSS is composed of a series of key/value pairs called rules, that define the value for a given property.

HTML Simple Example

These HTML elements can be targeted using their attributes or CSS selectors.

Starting with a simple example, let’s go back to the ‘Learn More’ call to action in our example html.

HTML Simple Example

We can add the following style rules to the a tag to make a red button with white text:

CopyCopied!
a { color: white; background-color: red; font-size: 24px; font-weight: bold; text-decoration: none; padding: 8px; border-radius: 8px; &:hover { text-decoration: underline; } }

Walking through each property:

  • color sets the color of the text.
  • background-color sets the color of the background.
  • font-size sets the size of the font, and font-weight defines the boldness of the font.
  • text-decoration defines whether the text is underlined.
  • padding defines the spacing of the element between itself and its surroundings.
  • border-radius sets the curvature of the border, defined in pixels
  • &:hover allows us to define the behavior on hover - here, we’re adding an underline on hover.

These are only some of the properties you’re able to define via CSS, but it gives you a good sense of the elements you can easily customize.

Because we’re targetting the <a> HTML tag selector, any <a> tag we add to my HTML will get this same styling.

Try playing around for yourself! Change the background color to green and increase the font size to 36px.

CSS Selectors

The way we target the specific sections to apply the rules to is through selectors. The most common ones are listed below.

Type Example CSS Syntax Used for?
id <div id=”learn-more”>Learn More</div> #learn-more { Targeting styling for a single element
class <div class=”learn-more”>Learn More</div> .learn-more { Targeting styling for all elements with this class
html tag name <div>Learn More</div> div { Targeting all elements of this type
pseudo-classes <a href=”google.com”>Link</a> a:hover { Targeting different states of an element (ex. hover state for a button)

Pseudo-classes

Pseudo-classes aren’t explicitly defined in the HTML, but rather refer to states of an element, most often for interactive elements like links.

State CSS Syntax Limited to How to activate
hover .learn-more:hover n/a On desktop, hover over element
focus .learn-more:focus Input elements: <a>,<button>,<input> On desktop, tab through input
visited .learn-more:visited Links and buttons: , Always occurs after active

Here are some examples of the different states visually.

Pseudo-States

Most often, you’ll be playing with the hover state of interactive elements. See our example below, where, in addition to underlining on hover, we change the background-color to a darker red using a hex value, the cursor to a pointer, and increase the padding to grow the button larger. Try changing or adding any values for the hover state!

CopyCopied!
a { color: white; background-color: red; font-size: 24px; font-weight: bold; text-decoration: none; padding: 8px; border-radius: 8px; &:hover { text-decoration: underline; background-color: #8B0000; cursor: pointer; padding: 12px; } }

CSS Resources

You by no means need to memorize these properties - most are fairly straightforward, and you can always refer to online CSS materials to understand the properties you’re able to manipulate.

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    What does the CSS of the page control?

    Error Success Question 2 of 2

    What kind of properties can be defined via CSS? (Select all that apply)

    Soon you'll be your brand's hero! 🎓

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading