Borja Borja - 1 year ago 117
HTML Question

Internal CSS not override external CSS (api google)... why?

I do not understand why internal css does not overwrite the external css created by google ...
This external css need to create the Google search bar (in my case, only serves to create a results page-SERP)

<!DOCTYPE html>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"> </script>
<style type="text/css">

.gs-result .gs-title, .gs-result .gs-title * {

.gs-result, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;

.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
<script type="text/javascript">

google.load('search', '1');
// other js-code that works ;)

why ???



the result page is created by google cse and is added in my div.. this the code created:

<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">

Here there is a part of my code:

is only a part so doesn't work ;)

Answer Source

Use !important on your code, altough I would not encourage you to do that permanently, use it just for testing:

.gs-result, .gs-result .gs-visibleUrl {
            color: #008000 !important;
            text-decoration: none !important;
            display: none !important;