14 Replies - 1260 Views - Last Post: 30 September 2017 - 11:02 AM

#1 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

placing CSS styling

Posted 27 September 2017 - 02:03 PM

I took the instruction from this page:
https://www.w3school...border-collapse

I put the HTML on my page.then put the CSS in my CSS file at the very bottom. but it's not showing the dividing of the tables. just the outside borders.

<?php

 
  $pageTitle = "Home";
  include('inc/header.php');
  ?>

  <div class="container bg-color">
      <div class="row">
            <div  style="padding-top: 15px;">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                        <li data-target="#myCarousel" data-slide-to="4"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                     <div class="carousel-inner" role="listbox">
                        <div class="item active">
 <img src="img/AdobeStock_83234383.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_110313737.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_72595945.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image5675.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image6633.jpg" alt="" width="1920" height="546">
</div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span></a>
              </div>  
        </div>
    </div>
</div>
       
        &nbsp;
        <div class="container bgWhite">
        <div id="title">
         <div class="left">Buy</div>
         <div class="right"><a href="https://www.facebook.com/groups/637729496399795/" target="_blank"><img src="img/Facebook.jpg" width="50" height="50" alt="Facebook"/></a>&nbsp;&nbsp;<a href="https://twitter.com/EmpoweredGolf" target="_blank"><img src="img/twitter.jpg" width="50" height="50" alt="Twitter"/></a></div>
        </div>
 </div>

    
&nbsp;
      
        <div class="container bgWhite">
        
        &nbsp;
     <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>    
  &nbsp;       
    </div>

&nbsp;
 


    <?php include('inc/footer.php'); ?>



#header {
    margin-top: 1em;
    margin-bottom: 0.75em;
    border-radius: 0.75em;
    background-color: #21cf20;
 }

 #myNavbar a:hover {
    color: #000000; /* edit color to taste */
	
 }
#myNavbar a:hover {
color: white;
}

body {
	width: 100%;
    height: 100%;
    background-image: url("../img/background.jpg");
	background-attachment: fixed;
    background-position: center center;
    background-size: cover;

}
a {
color: #19aa18;
text-decoration: none;
}
a:hover {
color: #000000;

}
.bgWhite {
    background-color: #ffffff;
    border-radius: 1em;
    padding-bottom: 1em;
	border:6px solid #21cf20;
}
.bg-color {
    border-radius: 1em;
    padding-bottom: 1em;
    background-color: #21cf20;
 }


.navbar-custom {
    background-color: transparent;
    border: none;
    color: white;
    padding-top: 1em;
}

.navbar-inverse .navbar-nav>li>a {
    color: #000000;
    font-size: 1.60em;
    font-weight: bold;
}

.moveDown {
    padding-bottom: .50em;
}

.whiteText {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px #000000;
}
.row {
  padding: 1em;
}
html {
     overflow: -moz-scrollbars-vertical;
     overflow-y: scroll;
}
.errors p,
.success p {
  padding: 15px;
}

 u {
    text-decoration: none;
    border-bottom: 1px solid black;
 }
  
h3.big {
    line-height: 30px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    display: inline-block;
    *display: inline;
    zoom: 1
}
@media only screen and (max-width: 480px) {
  ul {
     float: left;
     clear: left;
  }
 }
#filter fieldset div {
     float: left;
     width: 50%; 
     padding-left: 0.4em; 
     box-sizing: border-box;
 }
#filter fieldset div:first-of-type {
     width: 100%;
     padding-bottom: 1em;
 }
#filter fieldset div:first-of-type  input {
     width: 21em;
 }
 
 .big{
	 font-size: 1.6em;
 }
  dt {
     font-size: 1.3em;
  }
  dl {
     font-size: 1.5em;
  }
  dd {
     font-size: 1.2em;
  }
 .alert {
	 color: red;
	 font-size: 1.4em;
 }
 .alert2 {
	 color: black;
	 font-size: 1.3em;
 }
 textarea { 
 font-size: 18px; 
 }
input[type=checkbox] {
    zoom: 1.5;
}
.form-control {
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

ul.new-style {
font-size:1.5em;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
#title {
	font-size:2.1em;
	margin-top: 0.4em;
}
.left {
    float: left;
}
.right {
    float: right;
}
.rTableCell {
	font-size: 1.2em;
}
.description {
    font-size: 1.6em;	
}


#balls{
    overflow: hidden;
 }
#balls img:first-of-type {
    float: left;
    width: 30%;
    height: auto;
 }
#balls img:last-of-type {
    float: right;
    width: 28.575%; 
    height: auto;
 }
 hr { 
    display: block;
	height: 0.3em;
	background-color:#21cf20;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 0px;
}
#comments {
	line-height: 150%;
	font-size: 1.5em;	
}

em {      
	font-size: 160%;
	color:#21cf20;
}






#myNavbar .dropdown-menu a {
    background-color: #21cf20;
    padding: 10px 15px;
    color: #000;
	font-size: 22px;
	font-weight: bold;
    }
     #myNavbar .dropdown-menu a:hover {
   color: #fff;
    }
     #myNavbar .dropdown-menu  {
    padding: 0;
    border: 1px solid #21cf20;
		 
    }
    #myNavbar .dropdown-menu li {
    border-bottom: none;
    border-bottom: 1px solid #000000;
    }
    #myNavbar .dropdown-menu li:last-child {
    border-bottom: none;
    }

    .navbar-inverse .navbar-nav>.active> a {
    background-color: transparent!important;
    }
    #myNavbar a {
    color: #000000;!important
    }

  .list-columns {
	  margin-left: 50px; 
-moz-column-count: 2;
-moz-column-gap: 240px;
-webkit-column-count: 2;
-webkit-column-gap: 240px;
column-count: 2;
column-gap: 240px;
}

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}


Is This A Good Question/Topic? 0
  • +

Replies To: placing CSS styling

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 13489
  • View blog
  • Posts: 53,886
  • Joined: 12-June 08

Re: placing CSS styling

Posted 27 September 2017 - 02:11 PM

Where's the .CSS file being added?
Was This Post Helpful? 0
  • +
  • -

#3 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

Re: placing CSS styling

Posted 27 September 2017 - 02:15 PM

My CSS file is in a folder called custom.css.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 13489
  • View blog
  • Posts: 53,886
  • Joined: 12-June 08

Re: placing CSS styling

Posted 27 September 2017 - 02:22 PM

Okay.. where abouts do you have the <link href="asfasdf.css" type="text/css" rel="stylesheet" /> ?
Was This Post Helpful? 0
  • +
  • -

#5 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

Re: placing CSS styling

Posted 27 September 2017 - 02:26 PM

Oh, I don't. the Custom. css is for header and footer
Was This Post Helpful? 0
  • +
  • -

#6 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

Re: placing CSS styling

Posted 27 September 2017 - 06:16 PM

I added the following code but then my page does not work.

<link rel="stylesheet" href="css/custom.css">

<?php

 
  $pageTitle = "Home";
  include('inc/header.php');
  ?>

  <div class="container bg-color">
      <div class="row">
            <div  style="padding-top: 15px;">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                        <li data-target="#myCarousel" data-slide-to="4"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                     <div class="carousel-inner" role="listbox">
                        <div class="item active">
 <img src="img/AdobeStock_83234383.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_110313737.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_72595945.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image5675.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image6633.jpg" alt="" width="1920" height="546">
</div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span></a>
              </div>  
        </div>
    </div>
</div>
       
        &nbsp;
        <div class="container bgWhite">
        <div id="title">
         <div class="left">Buy</div>
         <div class="right"><a href="https://www.facebook.com/groups/637729496399795/" target="_blank"><img src="img/Facebook.jpg" width="50" height="50" alt="Facebook"/></a>&nbsp;&nbsp;<a href="https://twitter.com/EmpoweredGolf" target="_blank"><img src="img/twitter.jpg" width="50" height="50" alt="Twitter"/></a></div>
        </div>
 </div>

    
&nbsp;
      
        <div class="container bgWhite">
        
        &nbsp;
     <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>    
  &nbsp;       
    </div>

&nbsp;
 


    <?php include('inc/footer.php'); ?>

Was This Post Helpful? 0
  • +
  • -

#7 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 13489
  • View blog
  • Posts: 53,886
  • Joined: 12-June 08

Re: placing CSS styling

Posted 27 September 2017 - 08:43 PM

I am not seeing it in your code.
Was This Post Helpful? 0
  • +
  • -

#8 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

Re: placing CSS styling

Posted 28 September 2017 - 06:49 AM

Here is my html code

<?php

 <link rel="stylesheet" href="css/custom.css">
  $pageTitle = "Home";
  include('inc/header.php');
  ?>

  <div class="container bg-color">
      <div class="row">
            <div  style="padding-top: 15px;">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                        <li data-target="#myCarousel" data-slide-to="4"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                     <div class="carousel-inner" role="listbox">
                        <div class="item active">
 <img src="img/AdobeStock_83234383.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_110313737.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_72595945.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image5675.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image6633.jpg" alt="" width="1920" height="546">
</div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span></a>
              </div>  
        </div>
    </div>
</div>
       
        &nbsp;
        <div class="container bgWhite">
        <div id="title">
         <div class="left">Buy</div>
         <div class="right"><a href="https://www.facebook.com/groups/637729496399795/" target="_blank"><img src="img/Facebook.jpg" width="50" height="50" alt="Facebook"/></a>&nbsp;&nbsp;<a href="https://twitter.com/EmpoweredGolf" target="_blank"><img src="img/twitter.jpg" width="50" height="50" alt="Twitter"/></a></div>
        </div>
 </div>

    
&nbsp;
      
        <div class="container bgWhite">
        
        &nbsp;
     <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>    
  &nbsp;       
    </div>

&nbsp;
 


    <?php include('inc/footer.php'); ?>


And my CSS code.

#header {
    margin-top: 1em;
    margin-bottom: 0.75em;
    border-radius: 0.75em;
    background-color: #21cf20;
 }

 #myNavbar a:hover {
    color: #000000; /* edit color to taste */
	
 }
#myNavbar a:hover {
color: white;
}

body {
	width: 100%;
    height: 100%;
    background-image: url("../img/background.jpg");
	background-attachment: fixed;
    background-position: center center;
    background-size: cover;

}
a {
color: #19aa18;
text-decoration: none;
}
a:hover {
color: #000000;

}
.bgWhite {
    background-color: #ffffff;
    border-radius: 1em;
    padding-bottom: 1em;
	border:6px solid #21cf20;
}
.bg-color {
    border-radius: 1em;
    padding-bottom: 1em;
    background-color: #21cf20;
 }


.navbar-custom {
    background-color: transparent;
    border: none;
    color: white;
    padding-top: 1em;
}

.navbar-inverse .navbar-nav>li>a {
    color: #000000;
    font-size: 1.60em;
    font-weight: bold;
}

.moveDown {
    padding-bottom: .50em;
}

.whiteText {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px #000000;
}
.row {
  padding: 1em;
}
html {
     overflow: -moz-scrollbars-vertical;
     overflow-y: scroll;
}
.errors p,
.success p {
  padding: 15px;
}

 u {
    text-decoration: none;
    border-bottom: 1px solid black;
 }
  
h3.big {
    line-height: 30px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    display: inline-block;
    *display: inline;
    zoom: 1
}
@media only screen and (max-width: 480px) {
  ul {
     float: left;
     clear: left;
  }
 }
#filter fieldset div {
     float: left;
     width: 50%; 
     padding-left: 0.4em; 
     box-sizing: border-box;
 }
#filter fieldset div:first-of-type {
     width: 100%;
     padding-bottom: 1em;
 }
#filter fieldset div:first-of-type  input {
     width: 21em;
 }
 
 .big{
	 font-size: 1.6em;
 }
  dt {
     font-size: 1.3em;
  }
  dl {
     font-size: 1.5em;
  }
  dd {
     font-size: 1.2em;
  }
 .alert {
	 color: red;
	 font-size: 1.4em;
 }
 .alert2 {
	 color: black;
	 font-size: 1.3em;
 }
 textarea { 
 font-size: 18px; 
 }
input[type=checkbox] {
    zoom: 1.5;
}
.form-control {
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

ul.new-style {
font-size:1.5em;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
#title {
	font-size:2.1em;
	margin-top: 0.4em;
}
.left {
    float: left;
}
.right {
    float: right;
}
.rTableCell {
	font-size: 1.2em;
}
.description {
    font-size: 1.6em;	
}


#balls{
    overflow: hidden;
 }
#balls img:first-of-type {
    float: left;
    width: 30%;
    height: auto;
 }
#balls img:last-of-type {
    float: right;
    width: 28.575%; 
    height: auto;
 }
 hr { 
    display: block;
	height: 0.3em;
	background-color:#21cf20;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 0px;
}
#comments {
	line-height: 150%;
	font-size: 1.5em;	
}

em {      
	font-size: 160%;
	color:#21cf20;
}






#myNavbar .dropdown-menu a {
    background-color: #21cf20;
    padding: 10px 15px;
    color: #000;
	font-size: 22px;
	font-weight: bold;
    }
     #myNavbar .dropdown-menu a:hover {
   color: #fff;
    }
     #myNavbar .dropdown-menu  {
    padding: 0;
    border: 1px solid #21cf20;
		 
    }
    #myNavbar .dropdown-menu li {
    border-bottom: none;
    border-bottom: 1px solid #000000;
    }
    #myNavbar .dropdown-menu li:last-child {
    border-bottom: none;
    }

    .navbar-inverse .navbar-nav>.active> a {
    background-color: transparent!important;
    }
    #myNavbar a {
    color: #000000;!important
    }

  .list-columns {
	  margin-left: 50px; 
-moz-column-count: 2;
-moz-column-gap: 240px;
-webkit-column-count: 2;
-webkit-column-gap: 240px;
column-count: 2;
column-gap: 240px;
}

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: placing CSS styling

Posted 28 September 2017 - 09:08 AM

Your link is inside php tags. It is not php it is HTML.

You should enable php error reporting.
Was This Post Helpful? 0
  • +
  • -

#10 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

Re: placing CSS styling

Posted 28 September 2017 - 02:39 PM

So what I did was put the CSS right onto the same page as my form.And it's there. But I can't see the cells.

http://www.empowered...toba.ca/Buy.php



<html>
<style>
table, td, th {
    border: 2px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    height: 50px;
}
</style>
</html>
 <?php

 
  $pageTitle = "Home";
  include('inc/header.php');
  ?>

  <div class="container bg-color">
      <div class="row">
            <div  style="padding-top: 15px;">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                        <li data-target="#myCarousel" data-slide-to="4"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                     <div class="carousel-inner" role="listbox">
                        <div class="item active">
 <img src="img/AdobeStock_83234383.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_110313737.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/AdobeStock_72595945.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image5675.jpg" alt="" width="1920" height="546">
</div>
<div class="item">
 <img src="img/image6633.jpg" alt="" width="1920" height="546">
</div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span></a>
              </div>  
        </div>
    </div>
</div>
       
        &nbsp;
        <div class="container bgWhite">
        <div id="title">
         <div class="left">Buy</div>
         <div class="right"><a href="https://www.facebook.com/groups/637729496399795/" target="_blank"><img src="img/Facebook.jpg" width="50" height="50" alt="Facebook"/></a>&nbsp;&nbsp;<a href="https://twitter.com/EmpoweredGolf" target="_blank"><img src="img/twitter.jpg" width="50" height="50" alt="Twitter"/></a></div>
        </div>
 </div>

    
&nbsp;
      
        <div class="container bgWhite">
        
        &nbsp;
    <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>
  &nbsp;       
    </div>

&nbsp;
 


    <?php include('inc/footer.php'); ?>

Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: placing CSS styling

Posted 29 September 2017 - 04:16 AM

You must learn to use your browser's developer tools. They clearly show that your CSS is overruled by bootstrap (and an error confirms that your style.css isn't found).
Was This Post Helpful? 0
  • +
  • -

#12 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

Re: placing CSS styling

Posted 29 September 2017 - 08:31 AM

I had made a CSS file called custom.css to override bootstrap. But I'm guessing it only works with my header and footer file. Why not in any other pages.?
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: placing CSS styling

Posted 30 September 2017 - 02:04 AM

You should load your custom css after the framework, bootstrap, css. You then apply the same, or greater, specificity in order to modify or enhance the bootstrap styling. Your browser's developer tools help you to discover the selectors you need, and why your custom styles aren't working.

(You can also add your own class-names or id's, but avoid doing this too much as you'll end up working against bootstrap, not with it. Don't use id's or, particularly, !important to try and force your styling.)

The developer tools also let you know if your css file(s) cannot be found, for any particular page.
Was This Post Helpful? 0
  • +
  • -

#14 Maxx5  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 203
  • Joined: 15-September 15

Re: placing CSS styling

Posted 30 September 2017 - 05:35 AM

When you say development tools, you mean f12on keyboard?
Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: placing CSS styling

Posted 30 September 2017 - 11:02 AM

Yes. There are links in my signature below for various browsers.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1