.fear {display: none;} — A Beginners Guide to Tackling CSS Fearlessly

6 min readOct 10, 2019

Computer graphic resembling a Mac with “CSS” written on it

What is CSS?

Before we dive into the wonderful (albeit occasionally fickle) world of CSS, we need to define what it is and what it does. CSS stands for Cascading Style Sheet and is used to format and style the layout, text, table sizes, plus many other features of web pages. It allows a developer to create uniform styling from page to page by defining classes, IDs, or by inline-styling directly in the HTML file.

What are classes and IDs?

Classes

Classes are used when you want to consistently style multiple elements throughout a website or application. Classes are really useful for when you have, or might possibly have in the future, multiple elements that need to be styled in the same way. Classes can be used on multiple elements and the same element can have more than one class assigned to it! Furthermore, classes are generally used to define behavioral styles, not just visual ones.

Cool, right? The CSS would look like this on the styling sheet:

.comment_class {
   font-color:#000;
}

IDs

IDs are used for elements that will only get a style once since ID’s must be unique and are for single-use only. They are unique because they have a higher specificity value than a class does. ID’s can only be used on one element and the same element can only have one ID attached to it. It can, however, be attached to an element that has class styling in addition to the ID.

The CSS would look like this on the styling sheet:

#main_id {
   font-color:#000;
}

Where does the CSS go?

The most common place to implement CSS is inside a separate CSS file using external styling, but you can also use internal styling inside some <style> tags in your HTML’s <head> section, or even by adding inline styling directly to your HTML attributes.

External Styling

External styling is probably the most convenient way to add CSS to your website or application. Any changes made in your external file will be reflected immediately on your website or application globally. The page will load the fastest of the three options because the styling is not on the page. It also makes your HTML pages smaller and have a cleaner structure.

You just have add a simple reference to the .css file inside the <head> section of your .html file as shown below:

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="styles.css">
   <head>
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   <body>
</html>

Open your .css file and input the following code:

body {
   background-color: grey;
}h1 {
   color: #080835;
}p {
   color: #ffffff;
}

Once you have those files typed up and linked together, open the page in your browser and you should see a page that looks like this:

A grey background with navy blue “This is a heading” on the first line and white “This is a paragraph.” on the second line

Internal Styling

Internal styling is done by putting your CSS styling in <style></style> tags within the <head></head> of your HTML document. That means the classes and IDs are defined but they are only active on that one particular page. Internal CSS styles are downloaded every time the page loads so it could increase loading speeds, however, there’s a time and place to use internal stylesheets. A great example would be sending someone a page template — as everything is in one page, it is a lot easier to see a preview.

The styling below is added between the <style> tags:

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-color: grey;
         }         h1 {
            color: #080835;
         }         p {
            color: #ffffff
         }
      </style>
   <head>
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   <body>
</html>

And once the page is opened in your browser… surprise! It looks exactly the same as before!

Inline Styling

Inline styling uses a <style> attribute on each specific HTML tag. Using CSS this way is not recommended since each HTML tag has to be styled individually. However, it can be useful in some circumstances, like when you need to test and/or preview changes, need a quick fix, don’t have access to .css files, or need to apply styling on a single element. It can also lower your HTTP requests!

An example of HTML page with inline CSS would look like this:

<!DOCTYPE html>
<html>
   <head>
   <head>
   <body style="background-color: grey;">
      <h1 style="color: #080835;">This is a heading</h1>
      <p style="color: #ffffff;">This is a paragraph.</p>
   <body>
</html>

Once saved and opened in browser, it once again turns into the same page that we’ve now made three different ways!

Tips and Tricks

Hover Effects

Hover effects are used on buttons, navigation bars, text links, icons, box selections, and so much more! You can do anything you want on a hover and nothing will automatically change unless you tell it to. In the example below, we’re changing the text color from black to red.

.navigation h2{
    font-size:36px;
    color:#000000;
    font-weight:800;
}.navigation h2:hover{
    color:#f00000;
}

Links

When you’re designing a website, make sure your links fit in with your color palette. Link styling is missed by a lot of designers and it has the potential to confuse your visitors to a point that might cause a usability issue. The :link portion of the CSS below controls all links that haven’t been clicked on yet and the :visited handles the styling of all of the links you’ve already visited.

a:link { 
   color: blue; 
}a:visited { 
   color: purple; 
}

Box-Sizing

If you’ve ever run into padding or layout issues then box-sizing will solve all of your problems and it’s really simple! The code below is an example that would construct something similar to the boxes in the photo. The box-sizing styling will keep the box 300px by 300px even with the added padding!

.box_class {
   width: 300px;
   height: 300px;
   padding: 10px;
   box-sizing: content-box;
   background-color: grey;
   border-style: solid;
   border-color: blue;
   border-width: 5px;
}

Drop Caps

Drop caps are used in traditional printed books and are easily applied to <p> tags with the css below. The “p” portion is referring to the <p> tag and the “:first-letter” portion is referring to — you guessed it! — the first letter! To change the size of your letter, just change the font-size.

p:first-letter {
    display:block;
    float:left;
    margin:3px;
    color:#f00000;
    font-size:300%;
}

Absolute Positioning

Absolute positioning is used when you want to control where a certain element is placed on a webpage, no matter what. The code below sets whatever object gets this class to sit 20px from the top and 20px from the right, so it’ll be in the top right-hand corner no matter what!

.main-photo {
   position:absolute;
   top:20px;
   right:20px;
}

Select All Elements

Using a “*” before an element selects every single instance of that element in your HTML and sets styling for it. For example, the code below changes the font color to white in every single <p> tag on the page, no matter when it was added.

*p {
   color: white;
}

Transitions

When you have transitions between hover effects, whether on a button, menu, or image, you don’t want things to happen too quickly. Ideally you’d like to ease from one style to the next, which is where the transition property can really help you make your website/application look professional! The code below will make the change happen over .3 seconds instead of instantly and is much more pleasing to use.

.log-in-button h2:hover {
   color: #f00000;
   transition: all 0.3s ease;
}