ASK change internal css to external css

Discussion in 'CSS' started by liyman, Apr 12, 2007.

  1. #1
    umm , it it possible to change internal css to external css completely?
    if so, what element vital then? Can someone help me change this code? Note: I'm computer noob, Thanks for help tho
    <head> 
    	<style type="text/css">
    	html{
    		height:100%;
    		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    	}
    	body{
    		margin:0px;
    		padding:0px;
    		text-align:center;
    		height:100%;
    	}
    	#mainContainer{
    		width:760px;
    		border-left:1px solid #000;
    		border-right:1px solid #000;	
    		margin:0 auto;
    		height:100%;
    		text-align:left;
    	}
    	#topRow{
    		
    	}
    	#mainContent{
    		padding-left:10px;
    		padding-right:10px;
    	}
    	
    	#dhtmlgoodies_marquee{
    		/* general marquee layout*/
    		padding-top:3px;
    		height:25px;
    		background-color: #000;
    		
    		
    		/* End general marquee layout */
    		
    		
    		position:absolute;
    		left:0px;
    		z-index:1000;
    		bottom:0px;		
    		display:none;		
    		width:100%;
    		overflow:hidden;
    	}
    	body > div#dhtmlgoodies_marquee{	/* Firefox rule */
    		position:fixed;
    	}	
    	#dhtmlgoodies_marquee .textObj{	/* Layout for the marquee text */
    		position:absolute;	
    		color: #FFF;
    		font-weight:bold;
    		white-space:nowrap;
    		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    	}
    	/* Just some layout classes used in this example script */
    	.highlighted{
    		color:#F00;	// Red color
    	}
    	.greenText{
    		color:#0F0;	// Green color
    	}
    	</style>
    	<script type="text/javascript">
    	/************************************************************************************************************
    	(C) www.dhtmlgoodies.com, October 2005
    	
    	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
    	
    	Terms of use:
    	You are free to use this script as long as the copyright message is kept intact. However, you may not
    	redistribute, sell or repost it without our permission.
    	
    	Thank you!
    	
    	www.dhtmlgoodies.com
    	Alf Magne Kalleland
    	
    	************************************************************************************************************/	
    	var dhtmlgoodies_marqueeSteps = 2;	// Higher = Faster, Lower = slower and more smoothly
    	var dhtmlgoodies_marqueeSpeed = 8;	// Lower value = Faster
    	var dhtmlgoodies_marqueeStopOnMouseOver = false;	// Make the marquee stop moving when user moves his mouse over it
    	var dhtmlgoodies_marqueePosition = 'bottom';	// "top" or "bottom"
    	
    	/* Don't change anything below here */
    	var dhtmlgoodies_marqueeObj;
    	var dhtmlgoodies_marqueeTextObj;
    	var dhtmlgoodies_marqueeTmpStep;
    	var dhtmlgoodies_marqueeTextObjects = new Array();
    	var dhtmlgoodies_marqueeHiddenSpans = new Array();
    	
    	var dhtmlgoodies_marqueeIndex = 0;
    	function repositionMarquee(e,timeout)
    	{
    		if(document.all)e=event;
    		if(dhtmlgoodies_marqueePosition.toLowerCase()=='top'){
    			dhtmlgoodies_marqueeObj.style.top = '0px';
    		}else{
    			dhtmlgoodies_marqueeObj.style.bottom = '-1px';
    		}
    		if(document.all && !timeout)setTimeout('repositionMarquee(false,true)',500)
    	}
    	function marqueeMove()
    	{
    		var leftPos = dhtmlgoodies_marqueeTextObj.offsetLeft;
    		leftPos = leftPos - dhtmlgoodies_marqueeTmpStep;
    		var rightEdge = leftPos + dhtmlgoodies_marqueeHiddenSpans[dhtmlgoodies_marqueeIndex].offsetLeft;
    		if(rightEdge<0){
    			leftPos = document.documentElement.offsetWidth;
    			dhtmlgoodies_marqueeTextObj.style.display='none';
    			dhtmlgoodies_marqueeIndex++;
    			if(dhtmlgoodies_marqueeIndex>=dhtmlgoodies_marqueeTextObjects.length)dhtmlgoodies_marqueeIndex = 0;
    			dhtmlgoodies_marqueeTextObj = dhtmlgoodies_marqueeTextObjects[dhtmlgoodies_marqueeIndex];
    			dhtmlgoodies_marqueeTextObj.style.display='block';
    			
    		}
    		dhtmlgoodies_marqueeTextObj.style.left = leftPos + 'px';
    		
    	}
    	
    	function stopMarqueeMove()
    	{
    		if(dhtmlgoodies_marqueeStopOnMouseOver)dhtmlgoodies_marqueeTmpStep = 0;		
    	}
    	function resumeMarqueeMove()
    	{
    		dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps;
    	}
    	function initMarquee()
    	{
    		dhtmlgoodies_marqueeObj = document.getElementById('dhtmlgoodies_marquee');
    		
    		var spans = dhtmlgoodies_marqueeObj.getElementsByTagName('DIV');
    		for(var no=0;no<spans.length;no++){
    			if(spans[no].className=='textObj'){
    				if(!dhtmlgoodies_marqueeTextObj){
    					dhtmlgoodies_marqueeTextObj = spans[no]; 
    					spans[no].style.display='block';
    				}else spans[no].style.display='none';
    				dhtmlgoodies_marqueeTextObjects.push(spans[no]);
    				var hiddenSpan = document.createElement('SPAN');
    				hiddenSpan.innerHTML = ' '
    				spans[no].appendChild(hiddenSpan);
    				dhtmlgoodies_marqueeHiddenSpans.push(hiddenSpan);
    				
    			}
    		}
    		if(dhtmlgoodies_marqueePosition.toLowerCase()=='top'){
    			dhtmlgoodies_marqueeObj.style.top = '0px';
    		}else{
    			if(document.all){
    				dhtmlgoodies_marqueeObj.style.bottom = '0px';
    			}else{
    				dhtmlgoodies_marqueeObj.style.bottom = '-1px';
    			}
    		}
    		
    
    
    		
    		dhtmlgoodies_marqueeObj.style.display='block';
    		dhtmlgoodies_marqueeTextObj.style.left = document.documentElement.offsetWidth + 'px';
    		dhtmlgoodies_marqueeObj.onmouseover = stopMarqueeMove;
    		dhtmlgoodies_marqueeObj.onmouseout = resumeMarqueeMove;
    		if(document.all)window.onscroll = repositionMarquee; else dhtmlgoodies_marqueeObj.style.position = 'fixed';
    		
    		dhtmlgoodies_marqueeObj.style.display='block';
    		dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps;
    		
    		setInterval('marqueeMove()',dhtmlgoodies_marqueeSpeed);
    	}
    	
    	</script>
    <head> 
    
    
    ********************************************************************************
    
    
    <body>
    <!-- Start of marquee HTML code -->
    <div id="dhtmlgoodies_marquee">
    	<div class="textObj"><span class="highlighted">Breaking news!</span> This is the content of my marquee. </div>
    	<div class="textObj"><span class="highlighted">STOCK NEWS:</span> Company 1 <span class="greenText">82.5</span>(+0.5), Company 2 <span class="greenText">42.9</span>(-2.4), Company 3 <span class="greenText">189.9</span>(-13.7)</div>
    	<div class="textObj"><span class="highlighted">Sport:</span> The soccer season is almost over in Norway now. We have a few thrilling matches ahead of us.</div>
    	<div class="textObj"><span class="highlighted">Other news:</span> The quick brown fox jumps over a lazy dog.</div>
    </div>
    <!-- END OF MARQUEE HTML CODE -->
    <script type="text/javascript">
    initMarquee();	// Initialize marquee script
    </script>
    <body> 
    
    
    Code (markup):

     
    liyman, Apr 12, 2007 IP
  2. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #2
    Try this:
    <head> 
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<script type="text/javascript">
    	/************************************************************************************************************
    	(C) [url]www.dhtmlgoodies.com[/url], October 2005
    	
    	This is a script from [url]www.dhtmlgoodies.com[/url]. You will find this and a lot of other scripts at our website.	
    	
    	Terms of use:
    	You are free to use this script as long as the copyright message is kept intact. However, you may not
    	redistribute, sell or repost it without our permission.
    	
    	Thank you!
    	
    	[url]www.dhtmlgoodies.com[/url]
    	Alf Magne Kalleland
    	
    	************************************************************************************************************/	
    	var dhtmlgoodies_marqueeSteps = 2;	// Higher = Faster, Lower = slower and more smoothly
    	var dhtmlgoodies_marqueeSpeed = 8;	// Lower value = Faster
    	var dhtmlgoodies_marqueeStopOnMouseOver = false;	// Make the marquee stop moving when user moves his mouse over it
    	var dhtmlgoodies_marqueePosition = 'bottom';	// "top" or "bottom"
    	
    	/* Don't change anything below here */
    	var dhtmlgoodies_marqueeObj;
    	var dhtmlgoodies_marqueeTextObj;
    	var dhtmlgoodies_marqueeTmpStep;
    	var dhtmlgoodies_marqueeTextObjects = new Array();
    	var dhtmlgoodies_marqueeHiddenSpans = new Array();
    	
    	var dhtmlgoodies_marqueeIndex = 0;
    	function repositionMarquee(e,timeout)
    	{
    		if(document.all)e=event;
    		if(dhtmlgoodies_marqueePosition.toLowerCase()=='top'){
    			dhtmlgoodies_marqueeObj.style.top = '0px';
    		}else{
    			dhtmlgoodies_marqueeObj.style.bottom = '-1px';
    		}
    		if(document.all && !timeout)setTimeout('repositionMarquee(false,true)',500)
    	}
    	function marqueeMove()
    	{
    		var leftPos = dhtmlgoodies_marqueeTextObj.offsetLeft;
    		leftPos = leftPos - dhtmlgoodies_marqueeTmpStep;
    		var rightEdge = leftPos + dhtmlgoodies_marqueeHiddenSpans[dhtmlgoodies_marqueeIndex].offsetLeft;
    		if(rightEdge<0){
    			leftPos = document.documentElement.offsetWidth;
    			dhtmlgoodies_marqueeTextObj.style.display='none';
    			dhtmlgoodies_marqueeIndex++;
    			if(dhtmlgoodies_marqueeIndex>=dhtmlgoodies_marqueeTextObjects.length)dhtmlgoodies_marqueeIndex = 0;
    			dhtmlgoodies_marqueeTextObj = dhtmlgoodies_marqueeTextObjects[dhtmlgoodies_marqueeIndex];
    			dhtmlgoodies_marqueeTextObj.style.display='block';
    			
    		}
    		dhtmlgoodies_marqueeTextObj.style.left = leftPos + 'px';
    		
    	}
    	
    	function stopMarqueeMove()
    	{
    		if(dhtmlgoodies_marqueeStopOnMouseOver)dhtmlgoodies_marqueeTmpStep = 0;		
    	}
    	function resumeMarqueeMove()
    	{
    		dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps;
    	}
    	function initMarquee()
    	{
    		dhtmlgoodies_marqueeObj = document.getElementById('dhtmlgoodies_marquee');
    		
    		var spans = dhtmlgoodies_marqueeObj.getElementsByTagName('DIV');
    		for(var no=0;no<spans.length;no++){
    			if(spans[no].className=='textObj'){
    				if(!dhtmlgoodies_marqueeTextObj){
    					dhtmlgoodies_marqueeTextObj = spans[no]; 
    					spans[no].style.display='block';
    				}else spans[no].style.display='none';
    				dhtmlgoodies_marqueeTextObjects.push(spans[no]);
    				var hiddenSpan = document.createElement('SPAN');
    				hiddenSpan.innerHTML = ' '
    				spans[no].appendChild(hiddenSpan);
    				dhtmlgoodies_marqueeHiddenSpans.push(hiddenSpan);
    				
    			}
    		}
    		if(dhtmlgoodies_marqueePosition.toLowerCase()=='top'){
    			dhtmlgoodies_marqueeObj.style.top = '0px';
    		}else{
    			if(document.all){
    				dhtmlgoodies_marqueeObj.style.bottom = '0px';
    			}else{
    				dhtmlgoodies_marqueeObj.style.bottom = '-1px';
    			}
    		}
    		
    
    
    		
    		dhtmlgoodies_marqueeObj.style.display='block';
    		dhtmlgoodies_marqueeTextObj.style.left = document.documentElement.offsetWidth + 'px';
    		dhtmlgoodies_marqueeObj.onmouseover = stopMarqueeMove;
    		dhtmlgoodies_marqueeObj.onmouseout = resumeMarqueeMove;
    		if(document.all)window.onscroll = repositionMarquee; else dhtmlgoodies_marqueeObj.style.position = 'fixed';
    		
    		dhtmlgoodies_marqueeObj.style.display='block';
    		dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps;
    		
    		setInterval('marqueeMove()',dhtmlgoodies_marqueeSpeed);
    	}
    	
    	</script>
    <head> 
    
    
    ********************************************************************************
    
    
    <body>
    <!-- Start of marquee HTML code -->
    <div id="dhtmlgoodies_marquee">
    	<div class="textObj"><span class="highlighted">Breaking news!</span> This is the content of my marquee. </div>
    	<div class="textObj"><span class="highlighted">STOCK NEWS:</span> Company 1 <span class="greenText">82.5</span>(+0.5), Company 2 <span class="greenText">42.9</span>(-2.4), Company 3 <span class="greenText">189.9</span>(-13.7)</div>
    	<div class="textObj"><span class="highlighted">Sport:</span> The soccer season is almost over in Norway now. We have a few thrilling matches ahead of us.</div>
    	<div class="textObj"><span class="highlighted">Other news:</span> The quick brown fox jumps over a lazy dog.</div>
    </div>
    <!-- END OF MARQUEE HTML CODE -->
    <script type="text/javascript">
    initMarquee();	// Initialize marquee script
    </script>
    <body>
    Code (markup):
    External file, style.css:

    	html{
    		height:100%;
    		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    	}
    	body{
    		margin:0px;
    		padding:0px;
    		text-align:center;
    		height:100%;
    	}
    	#mainContainer{
    		width:760px;
    		border-left:1px solid #000;
    		border-right:1px solid #000;	
    		margin:0 auto;
    		height:100%;
    		text-align:left;
    	}
    	#topRow{
    		
    	}
    	#mainContent{
    		padding-left:10px;
    		padding-right:10px;
    	}
    	
    	#dhtmlgoodies_marquee{
    		/* general marquee layout*/
    		padding-top:3px;
    		height:25px;
    		background-color: #000;
    		
    		
    		/* End general marquee layout */
    		
    		
    		position:absolute;
    		left:0px;
    		z-index:1000;
    		bottom:0px;		
    		display:none;		
    		width:100%;
    		overflow:hidden;
    	}
    	body > div#dhtmlgoodies_marquee{	/* Firefox rule */
    		position:fixed;
    	}	
    	#dhtmlgoodies_marquee .textObj{	/* Layout for the marquee text */
    		position:absolute;	
    		color: #FFF;
    		font-weight:bold;
    		white-space:nowrap;
    		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    	}
    	/* Just some layout classes used in this example script */
    	.highlighted{
    		color:#F00;	// Red color
    	}
    	.greenText{
    		color:#0F0;	// Green color
    	}
    Code (markup):
    Make sure the path to the external css file is set correctly.
     
    Clive, Apr 12, 2007 IP
  3. liyman

    liyman Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks, you guys so helpful.

    I thought external css' format must somehow like this
    #example
    {
    }


    I figured out later then , it can be like
    example
    {
    }
    without #
    again, thanks
     
    liyman, Apr 12, 2007 IP
  4. Dan_A

    Dan_A Peon

    Messages:
    65
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It can't be example{}.
    It must be .example{} (for a class) or #example{} (for an id).
    Only existing html tags can be addressed by using ul, li, b, table... without a . or a #
     
    Dan_A, Apr 12, 2007 IP
  5. pixel_dust

    pixel_dust Peon

    Messages:
    151
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #5
    you could aslo clean up your page a bit more by making an external .js file instead of clunking up your head tag


    vanessa.
     
    pixel_dust, Apr 14, 2007 IP