How to change color and font in CSS Stylesheet Editor

I added the custom code from jetpack-carousel.css to Appearance > Theme Options > Custom CSS, but the changes do not appear.

The code below does not seem to effort the thumbnails page or in the Carousel slideshow https://dev.nataliebork.com/#jp-carousel-908

I added it to
Appearance > Theme Options > Custom CSS
and
Appearance → Edit CSS

See the code in Chrome > Tools > Developer Tools and let me know why I am not successful getting the code to work.

/* ADDED jetpack-carousel.css to change text font, color, size, placement */
/* make it orange links */
.jp-carousel-info ::selection {
	background: #f1831e;
/* Safari */
	color: #fff;
}

.jp-carousel-info ::-moz-selection {
	background: #f1831e;
/* Firefox */
	color: #fff;
}

div.jp-carousel-buttons a:hover {
	color: #f1831e;
	border: none !important;
}

div.jp-carousel-buttons a.jp-carousel-reblog:hover {
	background-position: 6px -56px;
	color: #f1831e;
}

a.jp-carousel-image-download:hover {
	background-position: 0 -122px;
	color: #f1831e;
	border: none !important;
}

.jp-carousel-comments p a:hover, .jp-carousel-comments p a:focus, .jp-carousel-comments p a:active {
	color: #f1831e !important;
}

////////////
/* text caption center horizontally in gallery thumbnail*/
.gallery-item .wp-caption-text {
	text-align: center;
	color: #000 !important;
	font-size: 1em !important;
}

/* carousel text size and color */
/** Title and Desc Start **/
.jp-carousel-titleanddesc {
	border-top: 1px solid #222;
	color: #000;
	font-size: 15px;
	padding-top: 24px;
	margin-bottom: 20px;
	font-weight: 400;
}

.jp-carousel-titleanddesc-title {
	font: 300 1.5em/1.1 "Helvetica", sans-serif !important;
	text-transform: none !important;
/* prevents uppercase from leaking through */
	color: #fff;
	margin: 0 0 15px;
	padding: 0;
}

.jp-carousel-photo-info h2 {
	font-size: 1em !important;
	color: #000 !important;
	font-family: font-name !important;
	text-align: center;
}

/* text description left horizontally in Carousel slideshow*/
.jp-carousel-titleanddesc-desc p {
	font-size: 1em !important;
	color: #000 !important;
	text-align: left;
	line-height: 1.4;
	margin-bottom: .75em;
	padding-top: 0;
}

.jp-carousel-titleanddesc p a,
.jp-carousel-comments p a,
.jp-carousel-info h2 a {
	color: #fff !important;
	border: none !important;
	text-decoration: underline !important;
	font-weight: normal !important;
	font-style: normal !important;
}

.jp-carousel-titleanddesc p strong,
.jp-carousel-titleanddesc p b {
	font-weight: bold;
	color: #000;
}

.jp-carousel-titleanddesc p em,
.jp-carousel-titleanddesc p i {
	font-style: italic;
	color: #000;
}

.jp-carousel-titleanddesc p a:hover,
.jp-carousel-comments p a:hover,
.jp-carousel-info h2 a:hover {
	color: #f1831e !important;
}

.jp-carousel-titleanddesc p:empty {
	display: none;
}

.jp-carousel-photo-info h1:before,
.jp-carousel-photo-info h1:after,
.jp-carousel-left-column-wrapper h1:before,
.jp-carousel-left-column-wrapper h1:after {
	content: none !important;
}

/** Title and Desc End **/
/** Meta Box Start **/
.jp-carousel-image-meta {
	display: none;
	background: #fff;
	border: 0 solid #fff;
	color: #fff;
	font-size: 13px;
	font: 12px/1.4 "Helvetica", sans-serif !important;
	overflow: hidden;
	padding: 0;
	width: 0 !important;
}

.jp-carousel-image-meta li,
.jp-carousel-image-meta h5 {
	font-family: "Helvetica", sans-serif !important;
	position: inherit !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	background: none !important;
	border: none !important;
	font-weight: 400 !important;
	line-height: 1.3em !important;
}

.jp-carousel-image-meta ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.jp-carousel-image-meta li {
	width: 48% !important;
	float: left !important;
	margin: 0 2% 15px 0 !important;
	color: #fff !important;
	font-size: 13px !important;
}

.jp-carousel-image-meta h5 {
	color: #000 !important;
	text-transform: uppercase !important;
	font-size: 15px !important;
	margin: 0 0 2px !important;
	letter-spacing: .1em !important;
}

a.jp-carousel-image-download {
	padding-left: 23px;
	display: inline-block;
	clear: both;
	color: #fff;
	line-height: 0;
	font-weight: 400;
	font-size: 13px;
	text-decoration: none;
	background-position: 0 -82px;
}

a.jp-carousel-image-download span.photo-size {
	font-size: 11px;
	border-radius: 1em;
	margin-left: 2px;
	display: inline-block;
}

a.jp-carousel-image-download span.photo-size-times {
	padding: 0 0 0 2px;
}

a.jp-carousel-image-download:hover {
	background-position: 0 -102px;
	color: #fff;
	border: none !important;
}

/** Meta Box End **/
/* ----- Light variant ----- */
.jp-carousel-light .jp-carousel-overlay {
	background: #fff;
}

.jp-carousel-light .jp-carousel-next-button:hover span,
.jp-carousel-light .jp-carousel-previous-button:hover span {
	opacity: .8;
}

.jp-carousel-light .jp-carousel-close-hint:hover,
.jp-carousel-light .jp-carousel-titleanddesc div {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-comments p a,
.jp-carousel-light .jp-carousel-comment .comment-author a,
.jp-carousel-light .jp-carousel-titleanddesc p a,
.jp-carousel-light .jp-carousel-titleanddesc p a,
.jp-carousel-light .jp-carousel-comments p a,
.jp-carousel-light .jp-carousel-info h2 a {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-comments p a:hover,
.jp-carousel-light .jp-carousel-comment .comment-author a:hover,
.jp-carousel-light .jp-carousel-titleanddesc p a:hover,
.jp-carousel-light .jp-carousel-titleanddesc p a:hover,
.jp-carousel-light .jp-carousel-comments p a:hover,
.jp-carousel-light .jp-carousel-info h2 a:hover {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-info h2,
.jp-carousel-light .jp-carousel-titleanddesc,
.jp-carousel-light .jp-carousel-titleanddesc p,
.jp-carousel-light .jp-carousel-comment,
.jp-carousel-light .jp-carousel-comment p,
.jp-carousel-light div.jp-carousel-buttons a,
.jp-carousel-light .jp-carousel-titleanddesc p strong,
.jp-carousel-light .jp-carousel-titleanddesc p b,
.jp-carousel-light .jp-carousel-titleanddesc p em,
.jp-carousel-light .jp-carousel-titleanddesc p i {
	color: #fc6412;
}

.jp-carousel-light .jp-carousel-buttons {
	border-bottom-color: #f0f0f0;
	background: #f5f5f5;
}

.jp-carousel-light div.jp-carousel-buttons a:hover {
	text-decoration: none;
	color: #f1831e;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog,
.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog:hover {
	background-position: 4px -56px;
	padding-left: 24px !important;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged,
.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like.liked {
	background-color: #2ea2cc;
	color: #fff;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-commentlink {
	background-position: 0 -176px;
}

.rtl .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-commentlink {
	background-position: 100% -176px;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like,
.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like:hover {
	background-position: 5px -15px;
	padding-left: 23px !important;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
	background-position: 5px -36px;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like.liked {
	background-position: 5px 5px;
}

.jp-carousel-light div#carousel-reblog-box {
	background: #eee;
	background: -moz-linear-gradient(bottom,#ececec,#f7f7f7);
	background: -webkit-gradient(linear,left bottom,left top,from(#ececec),to(#f7f7f7));
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
}

.jp-carousel-light #carousel-reblog-box textarea {
	border: 1px inset #ccc;
	color: #666;
	border: 1px solid #cfcfcf;
	background: #fff;
}

.jp-carousel-light #carousel-reblog-box .canceltext {
	color: #888;
}

.jp-carousel-light #carousel-reblog-box .canceltext a {
	color: #666;
}

.jp-carousel-light #carousel-reblog-box select {
	background: #eee;
	color: #333;
	border: 1px solid #aaa;
}

.jp-carousel-light #carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
	color: #333;
	background: #fff;
	background: -moz-linear-gradient(bottom,#ddd,#fff);
	background: -webkit-gradient(linear,left bottom,left top,from(#ddd),to(#fff));
	border: 1px solid #aaa;
}

.jp-carousel-light .jp-carousel-image-meta {
	background: #fafafa;
	border: 1px solid #eee;
	border-top-color: #f5f5f5;
	border-left-color: #f5f5f5;
	color: #333;
}

.jp-carousel-light .jp-carousel-image-meta li {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-close-hint {
	color: #ccc;
}

.jp-carousel-light .jp-carousel-close-hint span {
	background-color: white;
	border-color: #ccc;
}

.jp-carousel-light #jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
	color: #aaa;
}

.jp-carousel-light #jp-carousel-comment-form-comment-field:focus {
	color: #333;
}

.jp-carousel-light #jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
	color: #ddd;
}

.jp-carousel-light a.jp-carousel-image-download {
	background-position: 0 -122px;
}

.rtl .jp-carousel-light a.jp-carousel-image-download {
	background-position: 100% -122px;
}

.jp-carousel-light a.jp-carousel-image-download:hover {
	background-position: 0 -122px;
	color: #f1831e;
}

.rtl .jp-carousel-light a.jp-carousel-image-download:hover {
	background-position: 100% -122px;
}

.jp-carousel-light textarea#jp-carousel-comment-form-comment-field {
	background: #fbfbfb;
	color: #333;
	border: 1px solid #dfdfdf;
	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
}

.jp-carousel-light #jp-carousel-comment-form-commenting-as input {
	background: #fbfbfb;
	border: 1px solid #dfdfdf;
	color: #333;
	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
}

.jp-carousel-light #jp-carousel-comment-form-commenting-as input:focus {
	background: #fbfbfb;
	color: #333;
}

.jp-carousel-light  #jp-carousel-comment-post-results span {
	background: #f7f7f7;
	border: 1px solid #dfdfdf;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
	box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.jp-carousel-light .jp-carousel-slide {
	background-color: #fff;
}

.jp-carousel-light .jp-carousel-titleanddesc {
	border-top: 1px solid #eee;
}

.jp-carousel-light .jp-carousel-fadeaway {
	background: -moz-linear-gradient(bottom,rgba(255,255,255,0.75),rgba(255,255,255,0));
	background: -webkit-gradient(linear,left bottom,left top,from(rgba(255,255,255,0.75)),to(rgba(255,255,255,0)));
}

OHAI, you can’t change a colour that easily if it has been pre-set with !important as is the case. Try putting an !important behind your declaration, too. Like so:

.jp-carousel-light .jp-carousel-info h2,
.jp-carousel-light .jp-carousel-titleanddesc,
.jp-carousel-light .jp-carousel-titleanddesc p,
.jp-carousel-light .jp-carousel-comment,
.jp-carousel-light .jp-carousel-comment p,
.jp-carousel-light div.jp-carousel-buttons a,
.jp-carousel-light .jp-carousel-titleanddesc p strong,
.jp-carousel-light .jp-carousel-titleanddesc p b,
.jp-carousel-light .jp-carousel-titleanddesc p em,
.jp-carousel-light .jp-carousel-titleanddesc p i {
	color: #fc6412 !important;
}

I removed !important; from jetpack-carousel.css code and added it to Appearance > Theme Options > Custom CSS

See the code in Chrome > Tools > Developer Tools and let me know why I am not successful getting the code to work. I do not see the update, even after clearing the browser cache.

https://dev.nataliebork.com/
I would like the font size to be larger.

https://dev.nataliebork.com/#jp-carousel-908
I would like to make the link orange (#fc935a), like at https://dev.nataliebork.com/, instead of blue (#1e8cbe).
Also, I would like to change the font size for the title, description, and caption.

Update:

https://dev.nataliebork.com/#jp-carousel-908

I was able to get the text link to be orange, but it’s still black when you mouse over.

See the code in Chrome > Tools > Developer Tools and let me know why I am not successful getting the code to work.

/* slideshow caption link text color */
.jp-carousel-titleanddesc p a,
.jp-carousel-comments p a,
.jp-carousel-info h2 a {
	color: #fc6412 !important;
	border: none !important;
	text-decoration: none !important;
	font-weight: normal !important;
	font-style: normal !important;
}

.jp-carousel-titleanddesc p a:hover,
.jp-carousel-comments p a:hover,
.jp-carousel-info h2 a:hover {
	color: #68c9e8 !important;
}

Chrome’s developer tools can also help you inspect :hover elements. Here is how:
https://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools

Thanks Jeremy.

I’m so close. What am I missing?

See the screen shot of Chrome Developer with Hover state and comparing it to CSS file in Dreamweaver

That’s not what I see on my end:
https://i.wpne.ws/YATm

Also, as a reminder:
https://www.ads-software.com/support/topic/remove-view-full-size-in-jetpack-carouselcss-update?replies=20#post-5857821

The link is now orange (and during mouse over). – https://dev.nataliebork.com/#jp-carousel-908

It seems to take one day for the changes to appear, but I’ll add the custom CSS to Appearance > Edit CSS and let’s see what happens.

Thanks again for your help.