CSS Basics For Beginners

[kayakauthority]

Hello-

I'm new to coding so my questions will be very easy for someone with experience. I just what to be completely sure what I am doing before I go ahead and change code.

Per the directions (https://www.studiopress.com/colored-content-boxes-buttons/), I need to add the CSS code to my style sheet. I will do this by logging into my hosting account and use File Manager.

Do I add the code to my Child Theme?

When adding the code, I just need details on how to properly do this. For example, here are the last 5 lines in my style.css sheet:

.magazine-home .content .genesis_responsive_slider .slide-excerpt {
width: 100%;
}

}

Of note, that last bracket is on line # 2203.

When pasting the new code, do I just add spaces (bringing me to line # 2205) and paste the new code into the style.css sheet? If this is correct, what do you recommend I do before pasting anything? For example, should I save a copy of the original of the style.css sheet before editing, and if so, how?

Thanks for any detailed input you can provide so I can learn how to add code properly.

http://www.kayakauthority.com

[Victor Font]

Adding CSS code to the style sheet IS adding code to your child theme. The most basic child theme consists of a style sheet and a functions file.

The bottom of Studio Press themes consists of the media query areas. Media queries are special sections of the style sheet that affect mobile devices. You'll want to place code that impacts the entire site above the media queries, not below them.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[kayakauthority]

Hello-

Thank you for the information. This is definitely helpful and much appreciated.

This is where I am at now:

In style.css sheet, I located the media query section near the end. This is what it looks like as you get into the media query section of the style sheet.

.magazine-pro-orange .button:hover {
color: #fff;
}

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1139px) {

If I were to add the code from the Studiopress tutorial (https://www.studiopress.com/colored-content-boxes-buttons/) for the colored content boxes, would it look like the following when finished?

.magazine-pro-orange .button:hover {
color: #fff;
}

/* Content Boxes
------------------------------------------------------------ */

.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}

.content-box-blue {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}

.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}

.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}

.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}

.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}

.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1139px) {

Is there one blank line after the bracket ( } ) from the existing code before the ( /* ) of the new code for the colored content boxes?

Are there two blank lines after the bracket ( } ) of the newly added code of the colored content boxes before the media query section starts ( /* )?

[Victor Font]

The number of blank lines is irrelevant.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts