CSS - Latest Bytes

Andrew Neiderer

I am somewhat new to HTML and CSS. So please be patient or point me to a FAQ
that addresses this.

I am developing a Google AJAX search app that makes use of Google's gsearch.css
for defining properties (terminology?), one of which is a search box

----------------------------------------------------------------------------
/** Copyright 2005 Google Inc. All rights reserved. */

/* the GSearchControl CSS Classes
* .gsc-control : the primary class of the control
*/
..gsc-control {
width: 300px;
}

..gsc-control div {
position: static;
}

/* control inputs
* .gsc-search-box : the container that hosts the text input area
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/
form.gsc-search-box {
font-size: 13px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 4px;
margin-left : 0px;
width: 100%;
}

/*
* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div's background image
*/
table.gsc-search-box {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
margin-bottom : 2px;
}
..
..
..
-----------------------------------------------------------------------------

I need to make the search box wider (I think I am looking in the correct place).

I would just like to over-ride their style for this using my own width.
How do I do this?

My HTML <bodyin part looks like

<body onload="onLoad()">
<img src="rtna.bmp" width="750"/>

<h1>
using the Google AJAX Search API
</h1>

<table>
<tr>
<td class="search-control">
<div id="searchcontrolDiv">
Loading...
</div>
</td>
</tr>
I don't think simply placing an internal style definition will work, e.g.

<style type="text/css">

Feb 2 '07 #1

Subscribe Reply

3323

Andy Dingley

On 2 Feb, 15:01, neide...@osprey.arl.army.mil (Andrew Neiderer )
wrote:

I am developing a Google AJAX search app that makes use of Google's gsearch.css
for defining properties (terminology?), one of which is a search box

CSS doesn't define anything, and doesn't define the classes. At most
it offers some defaults for how classes might be recognised and
responded to, but it's still the _HTML_ that defines the classes, not
the CSS. Whether you choose to use them or not is entirely up to you
-- if you don't, then attaching Google's CSS won't do a thing. If you
want to ignore something, just ignore it.

.gsc-control {
width: 300px;
}

I need to make the search box wider (I think I am looking in the correct place).

I would just like to over-ride their style for this using my own width.
How do I do this?

Add some more CSS to the "CSS Cascade" (the bucket of all the
applicable CSS) and give it a rule that has a selector that's more
specific than all of those supplied by Google.

Formally it's defined over here (for CSS 2.1 anyway):
http://www.w3.org/TR/CSS21/cascade.html#cascade

NB - A "rule" means setting one property, not the block within the
{ ... } Even though one selector gets applied to all of them, it
gets evaluated individually for each property.

You can make selectors more specific (of the many possible ways) by
using classes instead of element names, by using ids instead of
classes, by adding more things to match on or (conveniently here)
simply by being the last one in the cascade with an equally weighted
selector. As Google just uses a single class for their selector your
own example ought to work fine, so long as it appears in or is
imported into your HTML document somewhere after the Google
stylesheet.

Although CSS does distinguish between stylesheets and style attributes
directly on elements, it doesn't care whether stylesheets are internal
or external.

Feb 2 '07 #2

Similar topics

PHP & Authorize.net w/o cURL?

by: William C. White | last post by:

Does anyone know of a way to use PHP /w Authorize.net AIM without using cURL? Our website is hosted on a shared drive and the webhost company doesn't installed additional software (such as cURL)...