> If they're any html geeks to help out (;´Д`)
> https://lgayashii.neocities.org/
My first tip is to simply make sure your HTML is well formed:
- make sure <title>, <meta>, <style>, <link>, etc. elements are inside
a <head> section above the <body>
- make sure that the first thing in the <head> section is the character
encoding (e.g. <meta charset="UTF-8">)
- it's best to also include the following to make sure your page scales
correctly on different display sizes:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- don't close elements before you intend to, especially <body>!
- make sure to close all elements when appropriate to avoid confusion
and potential b0rkage, such as your <ul> list
- don't use HTML tags (<br>, <hr>) or spaces ( ) for styling or
layout - use CSS instead. margin and padding will help you space
things out - an understanding of the box model is key:
https://www.w3schools.com/css/css_boxmodel.asp
- avoid using deprecated tags (<tt>), use supported alternatives
(<pre>, <code>) if they describe the content, or just use CSS if it's
purely aesthetic
- make sure you put spaces between attributes, otherwise they won't be
seen as attributes
You can check to see if you've made any fundamental mistakes by using
an HTML validation tool: https://validator.w3.org/
------------------------------------------------------------------------
I also notice that right now you're using inline CSS - my second tip is
that if you want to make ur CSS more manageable, you can put all your
CSS inside <style> tags in the <head> section - this is mainly for when
you have a one-off page that you want styled uniquely, and don't want
the style to be used anywhere else
If you want it to be applied site-wide or on multiple pages, you can
use an external CSS file instead by putting:
<link rel="stylesheet" href="/ur_css_path/ur_css_filename.css">
...in the <head> section
Then to style an element, you can reference all HTML elements of a kind
like this:
body {
background-color: #004040;
color: #ffffff;
}
p {
margin: 0.5em 0;
}
If you only want it to apply to certain elements across the page/site
but not every element of that kind, you can add a class="className"
attribute to the HTML element:
<div class="zomgBox">teh contents</div>
<div class="zomgBox">moar contents</div>
<div class="totallyDifferentBox">no contents :(</div>
...then select the class in the CSS like so:
.zomgBox {
border: 2px ridge #cccccc;
}
If you only want to apply it to a specific element and nothing else,
you can add an id="idName" attribute to the HTML element, then select
the id like so:
#idName {
font-size: 1.25em;
font-weight: bold;
}
There's a lot more you can do with this (like selecting all elements of
type but only if they're children of a specific class, only selecting
an element when the mouse is hovering over it, selecting only the first
child, etc.), but this is enough to get you started! ヽ(´ー｀)ノ
Reference: 2022/05/15(Sun) 21:48:58