HTMLHelp Forums > Change font color at a point in this .html

Full Version: Change font color at a point in this .html

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

vst

Nov 14 2014, 04:11 PM

Hi all, Much appreciation to anyone that can help me inject a color change in this file. I've highlighted the section in red that I would like to be color #FFAD33. The color of all the text is currently #C90707. I deleted parts of the code for brevity.

<html>

<head>

<script>

<title>pebbly</title>

<style type="text/css">

* {

padding: 0;

margin: 0;

}

@font-face {

font-family: 'roboto-black-webfont';

src: url('roboto-black-webfont.eot');

src: url('roboto-black-webfont.woff') format('woff');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'roboto-thin-webfont';

src: url('roboto-thin-webfont.eot');

src: url('roboto-thin-webfont.woff') format('woff');

font-weight: normal;

font-style: bold;

}

body {

background:#transparent url(bg.png) no-repeat center center;;

color: #C90707;

background-size: 100%;

font-size:24px;

}

#hour {

font-family: 'roboto-black-webfont', sans-serif;

font-size: 250%;

text-transform:lowercase;

}

#minute, #temp, #tempplus1, #tempplus2, #tempplus3, #tempplus4 {

font-family: 'roboto-thin-webfont', sans-serif;

font-size: 120%;

text-transform:lowercase;

margin-top:-5px;

}

#date, #WeatherContainer

{

font-family: 'roboto-thin-webfont', sans-serif;

font-weight: 900;
font-size: 90%;

margin-top:10px;

padding-top:10px;

border-top:.1px solid #333;

}

#container {

margin: auto;

width: 200px;

padding: 80px 0 0 0;

}
..................

Christian J

Nov 14 2014, 04:40 PM

You seem to be familiar with CSS, so why not just add a color property in the highlighted rule? Not sure which rule one you meant though, was it this one:

CODE

#date, #WeatherContainer {
color: #FFAD33;
background: #FFFFFF;
}

or this one:

CODE

#container {
color: #FFAD33;
background: #FFFFFF;
}

?

There are also a couple of errors in the CSS: http://jigsaw.w3.org/css-validator/

vst

Nov 14 2014, 07:28 PM

Thank you!! the top one fixed it although I took the background line out. 100 internets to you kind sir.

Christian J

Nov 15 2014, 06:51 AM

You're welcome!

It's usually good practice to specify color and background together, to avoid situations where a background inherited from a parent element is too similar to the text color.

In your case it seems BODY uses a transparent background-color (showing the browser's default background color) covered by the background image "bg.png". If an older browser like IE8 doesn't support "background-size: 100%", or if the image doesn't load, the user might see dark red or yellow text on a white background, which admittedly isn't catastrophic (it would be worse if the text was say white or very light yellow).

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.