The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Change font color at a point in this .html
vst
post Nov 14 2014, 04:11 PM
Post #1





Group: Members
Posts: 2
Joined: 14-November 14
Member No.: 21,811
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;

}
..................
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 14 2014, 04:40 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vst
post Nov 14 2014, 07:28 PM
Post #3





Group: Members
Posts: 2
Joined: 14-November 14
Member No.: 21,811
Thank you!! the top one fixed it although I took the background line out. 100 internets to you kind sir.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 15 2014, 06:51 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:26 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC