Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

C#

Yuxuan Luan
Yuxuan Luan
30 Points
Posted by Yuxuan Luan
Yuxuan Luan
30 Points

my css and html split and css doesn't work

my css names "Index.css"

and I add <link rel="stylesheet" type="text/css" href="Index.css" /> to my html

Here is my Index.css code

.btn-outline-secondary{ border-color: darkgrey; }

.row.content { height: 500px; }

.sidenav { background-color: white; height: 100%; border: 1px solid grey; border-radius: 10px; }

.footer { background-color: #f1f1f1; border-left: thin; height: auto; padding: 15px; }

.gap { width: 100%; height: 70px }

I could not figure out why css doesn't work

1 Answer

Eric M
Eric M
11,546 Points
Eric M
Eric M
11,546 Points

Hi Yuxan,

We're not going to be able to figure it out just based on your css. Could you post your entire HTML and CSS files?

Please also use the backticks ``` to format your code. This will make it much easier to read which will make it easier to help you. I've put an example below.

Also, you've posed this in the C# section, but this looks like a HTML/CSS question, is that correct?

e.g.

Here's my HTML

```HTML

your html code here

```

Here's my CSS

```CSS

your css code here

```

That will make your code look like this: Here's my HTML

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8" />
                <title>
                        Page Title
                </title>
                <link rel="stylesheet" type="text/css" href="style.css">
                <script src="action.js" ></script>
        </head>
        <body>
                <div class="sidebar">
                        <!-- Left hand side non-scrolling sidebar -->
                        <section class="sidebar-content">
                                <h1>
                                        Heading
                                </h1>
                                <h4>
                                        Subheading
                                </h4>
                                <p>
                                        Content...
                                </p>
                        </section>
                </div>
                <main class="main-article">
                        <section class="header-image" id="top">
                                <img src="img/heading.png" />
                        </section>
                        <section class="header-text cat-ux">
                                <h1>
                                        Heading Text
                                </h1>
                        </section>
                        <!-- Page Body Content -->
                        <div class="articles-body">
                                <article>
                                        <h2>
                                                Sphinx of black quartz, judge my vow!
                                        </h2>
                                        <p>
                                                The quick brown fox jumped over the lazy dog.
                                        </p>
                                        <p>
                                                Pack my box with five dozen liquor jugs.
                                        </p>
                                </article>
                        </div>
                </main>
        </body>
</html>

Here's my CSS:

html, body
{
        margin: 0;
        padding: 0;
}

html
{
        height: 100%;
}

body
{
        font-family: 'Hind', sans-serif;
        background-color: #f3f3f3;
        height: 100%;
        overflow: hidden;
}

a
{
        text-decoration: inherit;
        color: inherit;
}

.sidebar
{
        position: relative;
        margin: 0;
        padding: 0;
        float: left;
        height: 100vh;
        max-width: 360px;
        width: 25%;
        background-color: white;
        color: #393939;
}