Purple computer screen with CSS code shown in code editor

This post originally appeared on The Fulcrum.

Time to Share CSS from our Bear Blog

In this LESS-focused article we are going to feature the simple CSS used on our Bear site. You can copy and paste the examples as needed to pretty up your site.

It's the second in a series after the initial Markdown post and an upcoming one on HTML.

FYI, we use the "Terminal" theme from Bear and have heavily customized it.

To edit your Bear site's CSS you go to the Themes page and select the Custom CSS link.

You can adjust what your theme provides and add new customizations.

CSS

Cascading Style Sheets aka CSS is a core language of the open web. You use it to add styles like fonts, colors, and spacing to your website.

BTW, if you are brand new to styling your site, fonts are collections of stylized letters, characters, and symbols, etc.

CSS styles your HTML which has been generated by the Markdown you wrote your Bear blog content in.

There is a lot you can do with CSS. Consequently, there are a lot of CSS options. But here, we are going to stick to the bare basics for use in your Bear website. 🐻

When selecting values for your CSS you can:

We are sticking with the KISS philosophy with this advice.

You style items (technically HTML elements) with their equivalent CSS selectors, using a declaration where properties are paired with values.

For example your body selector could use a declaration that assigns the font-family property the value Arial or sans-serif. Or the color property the value red. Etc, etc, etc as you will see below.

Along with - hyphens, {} brackets, : colons, and ; semicolons they make up the syntax of CSS.

You combine them into code like this:

body { font-family: Arial, sans-serif; color: red; }

On the page your body text would be rendered in the Arial font and the color red.

We won't explain every selector, property, and value here, but you can always learn as much as you want about CSS online.

Our Copy/Paste-able CSS Code

So, this is the CSS code for what you are seeing on your screen right now. Choose what you like and customize it for your site. ⌨️

Body

This selector covers everything in the body of your page's HTML document. So, just about all the text in it.

body { font-family: Arial, sans-serif; font-size: 1em; margin: auto; padding: 2em; max-width: 720px; text-align: left; background-color: #000033; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.5; color: #ccccff; }

strong, b { color: #ccccff; }

The Fulcrum's Bear Blog Main section

Main

This is everything that is not in the header or the footer. In our case it's what's inside the rectangular box including the heading, paragraphs, and links as seen above. Within Main are all the elements we will cover below like headings, links, images, tables, etc.

main { margin-top: 40px; margin-bottom: 20px; padding: 30px; border: 2px solid var(--text-color); }

main { line-height: 1.6; }

Headings

Markdown headings equate to HTML headings. And you should use them in descending order. h1 is your page or post title, h2 are equivalent sections within your page, and h3 their subheadings. h4 are h3's subheadings etc, etc.

As seen here, you can separate their selectors with commas to assign shared properties and values in the declaration.

h1, h2, h3, h4, h5, h6 { font-family: 'Georgia', sans-serif; color: #99ffcc; }

For unique styling keep them separate.

h1 { font-size: 2.25em; }

h2 { font-size: 1.83em; }

h3 { font-size: 1.18em; }

h4 { font-size: 1em; }

The Fulcrum's Bear Blog Title

You may want to style your title h1 separately because it's in your header. Whereas h2 to h6 heading selectors are in your pages and posts' bodies.

With Bear Blogs this is actually your site title not your page title or post title. Those are separate h1 headings in your body. Which is wrong in my opinion because you should only have one h1 heading, but WTF.

.title:hover { text-decoration: none; }

.title h1 { padding: 5px 10px; background: #99ffcc; color: #bc8d6b; display: inline-block; font-weight: 400; }

.title, a { text-decoration: none; }

Links

I hope you know what these are, but here is how you can style them.

a { color: #ffccff; cursor: pointer; text-decoration: underline; text-underline-offset: .4em; }

a:hover { text-decoration: underline; }

a:visited { color: #ffcc66; }

The Fulcrum's Bear Blog Navigation

nav a { margin-right: 8px; text-underline-offset: .4em; }

Like the h1 title you can style your navigation links separately as they are in your header and maybe your footer as well. That way you can visually set them apart from the links in your main section.

Horizontal row / divider

This is the line you can add to break up your sections.

hr { border: 0; border-top: 2px solid; color: #99ffcc; }

Images

This is self evident and there are many cool options for customizing your image borders.

img { max-width: 100%; loading: lazy; }

The Fulcrum's Bear Blog Blockquote

Blockquote

If you want to quote someone else or emphasis something short that is a motto or saying of yours, use blockquotes.

blockquote { border-left: 4px solid #99ffcc; color: #bc8d6b; background-color: #fc6; padding: 20px; font-style: italic; font-size: 1.25em; margin-left: 0px; margin-right: 0px; }

Tables

This is old-school and you may not use them often. But, we are exploring tables here as we use them in a unique way on our Bear site. Mostly because you can write them in Markdown. Which is easier than using HTML and CSS to create them.

table { width: 100%; }

table, a { border-spacing: 1em; text-decoration-inset: 1ex -.5vw; }

th { border: 2px solid #99ffcc; padding: .5em; border-top-right-radius: 150px 100px; text-align: center; }

td { border: 2px solid #99ffcc; padding-left: 3em; padding-right: 3em; padding-top: 2em; padding-bottom: 2em; margin: 2em; border-radius: 25% .25%; border-color: #ccccff; }

Blog post list

This is specific to Bear so that's why it's in this post. 🐻‍❄️

Of course this also applies to regular lists aka be they ordered (numerical) lists aka ol or unordered lists aka ul.

/* blog post list */ ul.blog-posts { list-style-type: none; padding: unset; }

ul.blog-posts li { display: flex; margin-bottom: 20px; }

ul.blog-posts li time { font-style: normal; }

ul.blog-posts li span { flex: 0 0 130px; }

ul.blog-posts li a:visited { color: #ffcc66; }

Various

Here and there we have customized a few things that don't fit into the examples above.

.highlight { border-left: 5px solid #99ffcc; }

.tags { font-size: 1.25em; line-height: 2em; word-spacing: 1.5em; padding: 2em; }

.upvote-button { color: #ffcc66!important; }

The upvote button is also unique to Bear sites. 🐨

Footer

Like the header, you can style things differently in your footer than you would your page's body and main. This helps set it apart.

footer { padding: 25px 0; text-align: center; opacity: 0.6; }

Summing it up

This article is for beginners so we kept it simple like Bear itself. 🐼 We hope you find it useful (and bookmarkable). Please experiment with custom styling via the link on the themes page of your Bear backend user interface. And thanks for having a personal site and contributing to the Open Media Network!  


Share on Open Social Media

Copy and paste:

Explore: CSS - Creating Simple Site designs for your Bear Blogs. https://www.thefulcrum.dev/css-bear-blog/ #Bear #BearBlog #CSS

Explore More

To learn more you can take this quick free CSS tutorial.

Then you might take a paid course.

And after you bone up, CSS Tricks is a great resource for exploring the elaborate stuff.

They have:

Good luck becoming a web designer and having a beautiful site. But, don't fucking use AI to get there.

 

 

CTAs

And please build something for a community! We're promoting the LESS stack via our Manade project.