#🔒 CSS Styling

26 messages · Page 1 of 1 (latest)

balmy mango
#

I am trying to style my webpage with CSS and while it does work with colors and other things, I am having trouble fully understanding some styling methods such as margin and border. Could someone help me a bit? I will provide more info in the comments!

neon ridgeBOT
#

@balmy mango

Python help channel opened

Remember to:

  • Ask your Python question, not if you can ask or if there's an expert who can help.
  • Show a code sample as text (rather than a screenshot) and the error message, if you've got one.
  • Explain what you expect to happen and what actually happens.

:warning: Do not pip install anything that isn't related to your question, especially if asked to over DMs.

Closes after a period of inactivity, or when you send !close.
balmy mango
#

This is my current webpage, I chose some basic colors for now. It works.

image.png
#

How do I remove the white borders around the header and nav bar? I would like them to be uniform.

# 
body {
    margin-top: 0;
}
.navbar {
    background-color: tomato;
}
header {
    background-color: lightblue;
    border: 0px;
}
#

This is my CSS file with the colors. But the "border" and "margin" commands dont work at all for me.

#

Maybe I am doing something wrong but I think it should work.

twin aurora
# balmy mango Maybe I am doing something wrong but I think it should work.

DIVs etc have a few bordery properties. I'm no CSS expert, but have you looked them up?
Also, open your web browsers dev tools, get the "inspect element" facility (may even be an entry in your right-click/ctrl-click menu popup). It should show both explicit and compute CSS properties for elements, so you can see what's in effect.

marble geyser
#

^

marble geyser
#

By default, paragraphs, headers, and the body have margins applied to them. And not regular margins, iirc, but margin-block margins, which are margins that apply in a specific direction depending on text direction.

You can use the inspector as they said to view the exact styles and neutralize them manually (and you might want to move said neutralizations to it's own file). typically, for more complex projects, people will utilize a "reset" css file that removes all of these and standardizes them between browsers.

balmy mango
balmy mango
twin aurora
#

What is your browser?

balmy mango
twin aurora
#

The dev tools are in the Tools->Browser Tools->Web Developer Tools. Also the ctrl-click menu has an "Inspect" entry.
Eah of those should let you inspect the CSS properties in effect on your web page directly.
They should show the explicit and computed properties, and where those properties came from (eg some enclosing element).

tall iron
#

Yes. Imo, dev tools are amazing. I'd suggest taking inspiration from some webpages.

anyhow, edit the css in the browser directly. then after finding the perfect styling, copy it over to your local files.

balmy mango
# marble geyser By default, paragraphs, headers, and the body have margins applied to them. And ...

Here is my HTML code:

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
    </head>
    <body>
        <header>
            <h1>Scrappy</h1>
        </header>
        <nav class="navbar">
            {% for link in nav_links %}
            <a href="{{link.url}}">{{link.text}}</a>
            {% endfor %}
        </nav>
        {% block content %}

        {% endblock %}
    </body>
</html>
#

I dont know whats breaking

#

but I cant find a solution

#

I loaded my CSS file dynamically

#

But some things dont work

balmy mango
#

I found something! Yay

neon ridgeBOT
#
Python help channel closed for inactivity

This help channel has been closed. Feel free to create a new post in #1035199133436354600. To maximize your chances of getting a response, check out this guide on asking good questions.