noemi's journal

i just want to get started on something new, that will accumulate slowly every day.
i want this journal to be a means of persisting with that.
let's start with this one, soon.

jump to the CSS study chamber

as requested by the neocities cat - presenting; the list nexus

My interests

• Playing video games!
• Learning about queer stuff!
• Thinking about music...

Favorite cities

1. San Francisco
2. Chicago
3. Los Angeles

and, just as a reference for the html tags, thus far, there exists --

• "h1-4" for headers
• "p" for paragraphs
• "br" for line breaks in text, as shown on the top of the page. does not need a closing tag
• "style" embedded in the opening tag of a text element, corresponding to color, font, size, etc.
• "background-color", within the body tag, or within text to use as a highlighter
• "title" to change the title of the browser tab, under the "head"
• "meta" to leave tags in the "head" for browsers to pick up, such as "keywords", "charset", or "author"
• "viewport" is used within "meta" to fit the page's contents neatly within the confines of the window, helpful for mobile devices
• "font-size" to specify the pixel size of embedded text, such as, "25px"
• "font-family" to specify the font used for embedded text
• "text-align" to determine the text alignment on the page
• "blockquote" for separate, centered blocks of text
• "q" to insert quotation marks, with questionable usefulness...
• "border" to add colored boxes around text
• "a" for hyperlinks
• "href" to indicate the destination of the hyperlink, such as to a bookmark on the webpage, or your email, using ="mailto:example@mail.com"
• "target", when determining where to place the destination of the hyperlink within an "a" tag
• "title" to include tooltip text on links
• "button" to create clickable buttons! you can specify what they do with JS...
• "body" for bodies of text
• "id" to create bookmarks, to link to sections of a long webpage
• "hr" for horizontal breaks, does not need a closing tag
• "br" for line breaks within text, does not need a closing tag
• "pre", in place of "p", to display preformatted text ~exactly~ the way you like, such as, for poems
• "img src" for displaying images in the neocities directory, does not need a closing tag, and can be placed within a hyperlink
• "float" to place images beside bodies of text
• "map" to lay out a specified clickable portion of an image using "coords"
• "area" within a map tag to make a clickable area using "shape" and "coords" style tags. rectangles, circles, and polygons of your specification can be used
• "onclick" within an area tag to execute JS functions, such as when clicking an image
• "width" and "height",using pixel count to resize an image. gets overriden by "style" parameters in the "head" section
• "picture" to show different images to screens of different sizes, or different filetypes, depending on compatability. it's confusing...
• "alt" for descriptions of images if they can't load, used exactly like "width" and "height"
• "script" to create JS scripts, such as alerts, which prompt a notification
• "function" can be defined within a "script" tag, to be recalled with commands like "onclick"
• "abbr" to insert the meaning of abbreviations ("title") within embedded text, such as, the APA
• "div" defines a division in an HTML document, and can be used in text or as a container
• "class" can be used within a "div" to recall CSS code that you've previously defined in the "head"
• "span" is used in bodies of text to specify the amount of space that a "style" effect should take up
• "iframe" to display an external webpage in a window with a size of your choosing
• "ul" and "ol" for unordered and ordered lists, can be nested for lists within lists
• "li" for the contents of those lists
• "dl" for descriptive lists, "dt" for for the contents of the list, and "dd" for an indented entry
• "lang" to specify the language spoken on the site, most helpful for being found on search engines
• and "html" for the whole shebang.

note; when directing to media (or links) using "a href" and "img src", use "=" immediately after the tag, and embed the desired media in quotation marks. "width", "font-size", and most "style" attributes also use the "=".

note; there are a lot of tags that work in place of "p" to format text. such as, "b" for bold text, and "i" for italics". a full list can be found here. "address" and "cite" basically just use italics, and are super redundant.

note; when using style tags to change color, font, size, etc, it has to be formatted after the "=", in quotation marks. for example, as "color:red;". it also appears like one text element can't have multiple styles..? look into it later.

note; there are only 8 widely supported fonts available by default in HTML, which can be found here. Georgia seems your style... also, a list of the legal HTML colors are found here, but any HEX code can be used. transparency can also be altered if you use an RGB or HSLA color code, after a comma.

note; insert developer commentary with this command; (). It's a little out of the way.

note; when using the "target" tag on a hyperlink, the default is "_self", which replaces the current tab. That isn't satisfactory, so I would prefer to use "_blank", which opens the link in a new tab. There is also "_parent" and "_top", but I don't really know what they do...

note; you can alter the background by using a "body" command within a "style" command in the "head". i left some disabled code that turns the entire website into onpu... generally, this is hideous, but you can also use "background-repeat: no-repeat;" if you just wanted one image in the background. or, "background-size:cover;" to encompass the entire element.

note; you can change the style of a list's bullet points by using using the list-style-type:disc;", or circle, square, or none in the specified part.

note; you can define "div" containers in the "html" tag of the page, by using "div.example" under a "style" tag, and following with the graphical specifications that you desire. when you use them in the main body of the code, you recall it with "div class="example"". There are also special "display" elements, like "flex", or "grid" which display boxes of "div" containers within one bigger "div" container.

let's try it, while leaving a tooltip on the text when you hover over it with your mouse;
the absolute truth will henceforth be spoken in red.
there we go... that's a great use of the "em" tag, hehe...

Canny Uncanny

You're not gonna believe that this was a pain in the ass to do. I haven't a clue how to get JS working and I just did what the book told me and defined a function that used "var" to change an image depending on a "sw" thing... I don't know what any of it does. But you click the button, and it switches the image's source. And it's thanks to the getElementById JS command. At least it's here.

Let's experiment with making a table! Because it's me, I'll compare estradiol esters...

To get this look, I had to define the "style" of "table" elements in the "head", specifying that I wanted 2 pixel thick maroon borders, some padding, and for the borders to collapse into one line. This is easier to do than with regular text because table cells are defined by a separate "td" tag, with "th" for bold, as well as "tr", the table rows. You can even alternate the colors of the cells using a little CSS trick, and, in the same "style" tag, make the borders rounded to your liking with the "border-radius" property, or styled with dots, dashes, inset, outset, and more.

Furthermore, within the "table" tag, you can specify the style of the cells, including their width, height, and the alignment of the text. Even weird things, like using "colspan" or "rowspan" to stretch a cell out beyond one column... A graph "caption" is a good idea, too. When I tried adding a border to it, it overlapped with the graph's cells, and wasn't affected by "border-collapse". To remedy this, I used the "border-top", "border-left", and "border-right" style tags to make it look nice and pretty. Finished it off by adding the same "hover" style tag that's used on links.

If you're making the equivalent of an excel sheet, you may find use in the "colgroup" tag. Within this tag, specified columns, under "col", determine the cell groups that get affected by "style" properties, such as "width", "visibility", "background", and "border". You accomplish this by specifying "span", the number of columns that are affected by "style" choices.

CSS studying time...

So, first, inline CSS is just the "style" attribute that we've been using the whole time, located within the HTML elements
Then, internal CSS elements use "style" elements within the "head" section, applying to all elements of that type on the page.
And external CSS uses the "link" element to direct your code from a .css file to many HTML pages.

Using internal CSS embedded within the head, and before the body, I made every default paragraph display with the Georgia font. You accomplish this the same as any other style, just using squiggly brackets ({}) instead of quotation marks.

This comes with some unique commands, such as "padding", which is space that can be applied between text and their borders. The "margin" command works similarly, just for borders. If you find a way to make borders look good, maybe you'll find the right time to use it...

Using the "link" command in the head, you can use external CSS, functionally replacing having to write your "style" yourself. First, you have to use the command "rel="stylesheet"" before using "href" to link to the URL. I'm currently using this to insert the "favicon" image on this site's browser tab.

One example of something you can do with CSS is make a horizontal list, using the "float" command when specifying the style of lists in the "head" of the code. Setting the "float" parameter to "left" and using "display" to create a graphic will result in a navigation menu. Look into it sometime!