Hi everyone, I’m new in coding. I need help to know why the classes that are created in the index.html page can not be stylized in my sandbox.css?
I have this in index.html:
Wich is enough to link the css style sheet rigth? But, when I try to “call” the classes cretaed in index.html, seems like they are not available and the classes dont take the styles…
<link rel="stylesheet" href="sandbox.css">
How does file structure look like?
Is your sandbox.css on the same level or in the same folder as your index.html?
Yes it is. My sandobx.css is in the same folder as my index.html
Do you have a link to your repo?
Or even screenshots of your file structure and your files?
This is the index.html
CSS3 Fancy Buttons | Code 30 Things in 30 Days with CSS3<!-- NORMALIZE CSS -->
<link rel="stylesheet" href="../_theme-styles/normalize.css">
<!-- PROJECT THEME CSS -->
<link rel="stylesheet" href="../_theme-styles/theme.css">
<!-- FINAL PROJECT CSS (use for reference) -->
<link rel="stylesheet" href="final.css">
<!-- SANDBOX CSS (this is your file!) -->
<link rel="stylesheet" href="sandbox.css" media="all">
<div class="sandbox">
<h2>Sandbox <small>This is where you play</small></h2>
<div class="content">
<p><strong>Instructions:</strong> Use CSS3 to create visually attractive buttons of all different shapes, sizes and effects!</p>
<section>
<h4>Facebook Style</h4>
<button type="button" name="button" class="facebook-style-btn facebook-style-dark">Button Dark</button>
<button type="button" name="button" class="facebook-style-btn facebook-style-light">Button Light</button>
</section>
<section>
<h4>3D Buttons</h4>
<button type="button" name="button" class="btn-3d-1">3D Button 1</button>
<button type="button" name="button" class="btn-3d-2">Circle!</button>
</section>
<section>
<h4>Gradient Bordered Buttons</h4>
<button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
<button type="button" name="button" class="gradient-button-2">Gradient button 2</button>
</section>
<section>
<h4>Animated Buttons</h4>
<button type="button" name="button" class="animated-button-1">Animated button 1</button>
<button type="button" name="button" class="animated-button-2">Animated button 2</button>
</section>
<section>
<h4>Toggle Switch UI Buttons</h4>
<label for="toggle1" class="toggle-1">
<input type="checkbox" id="toggle1" class="toggle-1__input" />
<span class="toggle-1__button"></span>
</label>
<label for="toggle2" class="toggle-2">
<input type="checkbox" id="toggle2" class="toggle-2__input" />
<span class="toggle-2__button">Click me to activate</span>
</label>
</section>
</div>
</div>
<div class="final-result">
<h2>Final Result <small>Use this for reference!</small></h2>
<div class="content">
<section>
<h4>Facebook Style</h4>
<button type="button" name="button" class="final__facebook-style-btn final__facebook-style-dark">Button Dark</button>
<button type="button" name="button" class="final__facebook-style-btn final__facebook-style-light">Button Light</button>
</section>
<section>
<h4>3D Buttons</h4>
<button type="button" name="button" class="final__btn-3d-1">3D Button 1</button>
<button type="button" name="button" class="final__btn-3d-2">Circle!</button>
</section>
<section>
<h4>Gradient Bordered Buttons</h4>
<button type="button" name="button" class="final__gradient-button-1">Gradient button 1</button>
<button type="button" name="button" class="final__gradient-button-2">Gradient button 2</button>
</section>
<section>
<h4>Animated Buttons</h4>
<button type="button" name="button" class="final__animated-button-1">Animated button 1</button>
<button type="button" name="button" class="final__animated-button-2">Animated button 2</button>
</section>
<section>
<h4>Toggle Switch UI Buttons</h4>
<label for="final-toggle1" class="final__toggle-1">
<input type="checkbox" id="final-toggle1" class="final__toggle-1__input" />
<span class="final__toggle-1__button"></span>
</label>
<label for="final-toggle2" class="final__toggle-2">
<input type="checkbox" id="final-toggle2" class="final__toggle-2__input" />
<span class="final__toggle-2__button">Click me to activate</span>
</label>
</section>
</div>
</div>
<div class="info">
<h2>Information <small>About this lesson</small></h2>
<h3>What are we making?</h3>
<p>Fun & fancy buttons of all shapes and sizes, made 100% with CSS3!</p>
<h3>Where can I use it?</h3>
<p>In your websites and client projects as an appealing UI element.</p>
<h3>How compatible are these styles with major browsers?</h3>
<p>Check the CSS3 styles from your stylesheet <a href="http://caniuse.com/">on this website.</a> It allows you to see the compatibility of every CSS style with major browser.</p>
</div>
<footer>
<div class="logo">
<a href="http://codecollege.ca/" id="logo">
<img src="../_theme-styles/img/bggray.svg" width="60px" id="logo_bg-gray">
<img src="../_theme-styles/img/bgyellow.svg" width="60px" id="logo_bg-yellow">
<img src="../_theme-styles/img/codecollegelogo.svg" width="60px" id="logo_codecollege">
<!-- <img src="../_theme-styles/img/codecollegelogo.png" alt="Learn to Code at CodeCollege.ca" height="60px"> -->
</a>
</div>
<div class="made-by">
Made by <a href="http://bradhussey.ca/">Brad Hussey</a>
</div>
<div class="course">
<a href="http://codecollege.ca/">Code 30 things in 30 days with CSS3</a>
</div>
<div class="copyright">
©2018 Brightside Studios Inc.
</div>
</footer>
I would like to understand why the changes I try to make in sandbox.css I do not see it when I run the page in the Chrome browser.
Change
href="sandbox.css"
To
href="./sandbox.css"
I already did it and it does not work either.
These files that I took from a course, but when I created my personal page from scratch everything works perfectly