Now for the dumb questions

Only just started learning. Been over a couple of different tutorials but wasn’t really getting anywhere, so I grabbed a template that looked something like what I wanted to build. The CSS is nothing like any tutorial, (don’t know what tags to use or how) eg:

.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}
.w3-navbar li{float:left}.w3-navbar li a,.w3-navitem{display:block;padding:8px 16px}.w3-navbar li a:hover{color:#000;background-color:#ccc}

I’m assuming that this is all part of one class (think I got that right). what is really getting me is the tutorials all say you finish with a semicolon:

w3-display-container{
position:relative;
}

I can hardly find a semicolon in the work above.
Looking for answers as it will help me dismantle it, and probably keep you busy answering more questions.

Last thing for tonite is, I’m color blind. I like to keep all my work simple, black background, white text, Or in the body, white background and black text. At the bottom of the css file are all these references to colors:

.w3-border-dark-grey,.w3-hover-border-dark-grey:hover{border-color:#616161!important}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

Will I need all this, theres almost 100 lines of it.

Thanks for your replies guys.

No, it’s just badly laid out for readability. After each closing bracket } we move to another selector, which I would generally put on a new line.

You only really need a semi colon to separate subsequent properties, the last one does not need it, though it’s good practice to put it in anyway, because it’s easy to forget to add it when you edit the css.
Here is how the same code may look if written to be more human friendly:-

.w3-tooltip,
.w3-display-container {
   position:relative
}

.w3-tooltip .w3-text {
   display:none
}

.w3-tooltip:hover .w3-text {
   display:inline-block
}

.w3-navbar {
   list-style-type:none;
   margin:0;
   padding:0;
   overflow:hidden
}

.w3-navbar li {
   float:left
}

.w3-navbar li a,
.w3-navitem {
   display:block;
   padding:8px 16px
}

.w3-navbar li a:hover {
   color:#000;
   background-color:#ccc
}
2 Likes

Those are setting the colour of borders, not text.
Who else can say whether you need them? We don’t know your intentions.

All I will say is IMO this is not a great template on the strength of the small excerpt of css I have seen so far.
Anyone who uses !important so liberally clearly doesn’t know what they are doing.
My advice would be to return to learning and find out how to create your own css and templates the right way.

2 Likes

Written as it is there is 399 lines. Doing it tidy like your would be well over 1000.

Some how I’ve got to take it to bits, keeping what I need for mobiles.

This could be so much fun, at my age I could be dead before I’m finished.

Thanks for the replies

You are not forced to alter the code layout. All I’m saying is that it’s much easier to read work with that way, it will function just the same.
This is “minified” code, where any non-essential characters such as whitespace, new lines or semi colons on the last property are removed to reduce the filesize to a minimum to aid performance.
Minification is usually done at the very end, once you have finished working with the code, for obvious reasons.
I don’t know if there are tools to “un-minify” code like this, it’s not a problem I have faced as I don’t bother with minification.

There are a few tools out there to un-minify minified CSS, such as https://www.cleancss.com/css-beautify/. It certainly beats doing it all by hand. :slight_smile:

3 Likes

Nothing wrong with that. :winky:

Big mistake. :rolleyes:

If you cannot be bothered to learn how to code, then how on earth
are you going to have any chance of tweaking a template that has,
more than likely, been made by one of the Devil’s disciples? :eek:

coothead

3 Likes

Why a big mistake.

First off, my question’s where because I was looking to learn the code.

The tutorials are all for beginners, and didn’t answer any of the questions I was having. Nor did they go in depth enough for me to be progressing. I thought the next logical step would be to take some-one else’s work to bits to see how it worked. That said, I’m still doing the tutorials for a 3rd time (I’m a slow learner).

I’m just looking to take snippets from the template code and see how it works and how I could apply it to what I am after as an end product. I’m 63 yrs old, haven’t touched PHP,HTML, for over 10 yrs, and my daughter asked me to help her out as she was being ripped off by the professional she was using. Then probably one of my other daughters will want something.

I am building my own scripts up, I’m just using the template as a way of seeing how the more advanced stuff works, and get my head around some of the concepts

And thank you for your reply

Only a mistake if you don’t recognize its faults and you “learn” stuff you need to “unlearn” later. A catch-22 since you can’t know until you know.

Personaly I don’t see there being much of a problem with looking at as much code as possible as long as you remember that it may be less than perfect. And very often “perfect” depends on ones preferences.

For example, many templates have class values for virtually everything. This can make it easier to target elements, but adds “bloat”. Too much bloat and at some point “easier” becomes “more confusing”. The presence of !important suggests that even the author was confused with their own code or had difficulty understanding CSS specificity.

Using others’ code has pros and cons. Pro: it saves you from needing to write a lot of your own. Con: you have to learn it and then use it within its conventions.

4 Likes

Biggest reason for downloading the template was that I had questions but didn’t know what they were, or quickly forgot them to make room for another question.

I like things to look good, but I’m not into going over board with anything other than security. The last site I built (yrs go) was simple and worked just fine for several yrs. I think the only problem was with either the sql or php, updating, 1 table kept screwing up. Could have found it, could have fixed it, but it was only a fun site anyway.

My biggest regret is not keeping up with the scripting. Biggest bonus is I can now get my head around stuff I couldn’t yrs ago.Biggest challenge is this CSS

Thanks for your post

  1. Prepare the content of the page.
  2. Write the correct Semantic HTML code to contain it.
  3. Write the CSS code to style the page.

If you started with a Devil’s disciple’s template, then you
made a big mistake. :rolleyes:

Before you know it you will believe that code like this…

<ul  class="sub-menu">
	<li id="menu-item-39931" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-39931"><a href="#">link 1</a></li>
	<li id="menu-item-53217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53217"><a href="#">link 2</a></li>
	<li id="menu-item-27865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27865"><a href="#">link 3</a></li>
	<li id="menu-item-27867" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27867"><a href="#">link 4</a></li>
	<li id="menu-item-39932" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39932"><a href="#">link 5</a></li>
	<li id="menu-item-27866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27866"><a href="#">link 6</a></li>
</ul>

…is the norm, rather than a moronic mess. :wonky:

coothead

There will never be a day when I write code like that. I like to keep things simple if at all possible. More importantly, I like to keep things understandable and easy to edit. If I wrote something like that I would probably need to go back and learn everything again just to figure what I did.

The web page I’m working on now will be lucky if it has 150 lines, including white space and comments. The css will be no different.

I’m here to learn how to do things correctly and get some help when I’m stuck.

We will be glad to help you achieve your goal.

I would advocate, the same as @coothead, that you start from scratch. Post a link to your code in progress where we can follow it, or learn to post working pages that include the current troublesome snippit so we can see what you see and how it behaves. There are often several ways to accomplish a task and our opinions may vary. :winky:

2 Likes

Thanks for the link, it worked perfect.

1 Like

You can use an online tool to verify and format code using them, I’ve given list of CSS and HTML

https://www.cssstylekit.com/online-html-formatter-tool.html

you indent your HTML script in Style to clean beautify HTML code

https://www.cssstylekit.com/css-formatter-and-beautifier.html

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.