Some feedback on my first css please

HTML & CSS
1

I’m using ‘w3’ at the beginning of everything because I’m finding it helps separate it from the html. CSS file isn’t really in very good order, I’m still trying to figure that out.

I would be grateful for any suggestions/comments good or bad. Body content/text is stupid but was only put in there as a way of testing things out, so ignore it.
I dont seem to be able to get it to post with the same format that I have, its not easy to look at as it is here.

<!DOCTYPE html>

	<html>
	  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"

<link rel="stylesheet" href="styles/css-practice.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
.w3-tangerine {
    font-family: "Tangerine", serif;
	}
</style>
	 
	    <title>CSS PRACTICE</title>
	  </head>

	  <body>
	  
	  
	    <div class="w3-header w3-top w3-tangerine">
  Allure Beauty
  </div>

  
  <div class="w3-container w3-content-body w3-center w3-padding-64" style="max-width:800px">

  <h2 class="w3-container w3-wide w3-center ">Allure Beauty</h2> 
 <p class="w3-opacity"><i>Everyone is beautiful</i></p>
  
  
  <p class="w3-justify">
   Allure Beauty will help you enhance your beauty. We specialise in make-up 
	and instant sun tans (spray tanning). All of our 
	consultants are trained to the highest standard, and all of our treatments come with a 100% money 
	back guarantee.
  Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of 
classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin 
professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
 consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, 
 discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus 
 Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
 on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum 
 dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. 
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in 
their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of 
classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin 
professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
 consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, 
 discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus 
 Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
 on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum 
 dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. 
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in 
their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  </p>
  </div>
  </body>
</html>
/>

html,
body {
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5
}
html {
    overflow-x: hidden
}

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.w3-top,
.w3-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}


.w3-top {
    top: 0;
}

.w3-container {
    padding: .01em 16px;
}


.w3-center {
    text-align: center;
}

.w3-black{
	color: #000;
}

.w3-xxlarge {
    font-size: 36px;
}

.w3-header{
	top: 0;
	left: 0;
	padding: 2px;
	color: #fff;
	background: #000;
	width: 100%;
	height: 55px;
	text-align: center;
	font-size: 36px;
	 position: fixed;
}

.w3-justify {
    text-align: justify;
}

.w3-content {
    max-width: 980px;
    margin: auto;
}

/*
.after-w3-content{
	clear: top;                      should I be using this instead of w3-content-body padding: 45 
}	                                at the moment its not working correctly with the text 
	
*/	
	
.w3-content-body {
    max-width: 980px;
    margin: auto;
	padding: 45px;                   /* drops it down below the header bar  */
}

.w3-wide {
    letter-spacing: 4px
}

.w3-opacity{
    opacity: 0.60;
    filter: alpha(opacity=60);       /* this line and next stolen not sure what they do yet  */
    -webkit-backface-visibility: hidden        /* think this is for safari or something  */
}
2

You are asking about css, but i will mention the html too if that’s OK.
First thing, the viewport meta tag is missing the closing >. Always user the validator to check youe code.

Think more about the semantics of your elements.

Should this be h1?

Now you repeat the same heading in h2, heading should be properly nested in order.

And this should maybe be a sub heading.

Then your paragraph:-

It that meant to be all one big paragraph? The way you laid it out it should maybe be a few separate paragraphs.

You have an extra /> in there.

I’ll get back to you about the css when I’ve had a good look.

Spoiler: I don’t like it.

1 Like
3

Thanks for the feedback Sam. Anything in the body is me just playing around seeing what the css would do if anything. I think if you load the script then you would see 3 headings all directly under each other. That is not how I would set up my site. Was interested in testing opacity, and the most important part of the html is getting the header in the correct position and fixed. Stuff in the body was for as much as anything else, so I could scroll the window.

4

Hi there slimpickings,

you may also find these links helpful to the cause. :winky:

  1. What’s Wrong with YOUR Website?
  2. Part 4, CSS

coothead

1 Like
5

That’s just weird to me, but each to their own.

The order is something you need to consider, as css gets overridden by subsequent conflicting rules. I’m not sure why you have a bit of styling in the head, but things like styling the body element are generally set first. But because it comes after the external sheet is loaded, you are doing it last.
Also where you have media queries, they are near the beginning. I generally put them at the end, as their purpose is to override rules previously set. If not mush is already set, they don’t do a lot, and if stuff gets set later, the later rules override the previous ones. Therefore media queries at the end.

About the queries (I know the elements they apply to are not there yet).

@media screen and (min-width: 600px) {
}
@media screen and (max-width: 599px) {
}

I’m not into the “double sided” query thing. There is (in most cases) no need for both. As I say, you set stuff as default, then just the min or max (depending on mobile/desktop first) query to override what is required.

Eww, nasty in-line style :mask: no need for that.

I think your css is way more complex and verbose than it needs to be for such a simple layout. You seem to have gone for the “framework style” of css where you add a million classes to every element and those classes generally set only one or two things. Though it may be a popular approach, I personally despise that method, as you end up with bloated, ugly code that in fact resembles in-line styling in disguise, just as ugly and just as unmaintainable.
It maybe does work to an extent where you are making a framework that’s intended to be “all things to everyone” or one css to fit any site. But when making a bespoke design, there really is no need for all that bloat, you can be less generic and more targetted to your specific design. Sure we all use the odd “utility class” here and there. But don’t make every class a utility class, it just leads to bloat and unmaintainable code.
Again this is just a preference in personal style of coding, others may give opposing opinions.

But now to the actual details of the code.

Avoid using pixels to size text, it’s bad for accessibility, always try to use relative units, %, em or rem, whatever your preference.

Unitless line-height, that’s good. :+1:

On a block element, no need for left: 0 and width: 100% as a block will naturally be full width (via width: auto which is better than width: 100%) and touch either side. Though you will wan to kill the default margin on the body to fill the screen.
You also have a fixed height which should also be avoided in RWD, it does not allow for text wrapping or font size expansion. Yes, some people’s (lots of people) eyesight is not that good and they may want to increase the default font size. That’s also the reason to use relative units.
Generally an element’s content will dictate its height.
In instanced where you really must set a height, use relative units and use min-height not height as that will allow for expansion.

I don’t get why you set center to the whole container when the majority of the content will be justified. You just end up undoing that. Then you apply it again to the header which already has it.

The other things are mainly just repeats of point already made. Font sizes, 100% width and the like.

1 Like
6

Correction Being fixed, you do need to set it to full width. :smile:

7

Really appreciate you taking all this time to point things out. This is just a practice site, and some thing to learn from.

Some of the stuff in the css file was only there for later reference, I had picked it up in some tutorial. Other things are there because I had a lot of trouble getting that header to work, and getting the text to center. Now I have your feedback I’ll go back and take a good look and see what I can clean up.

Thanks again dude.

1 Like
8

“w3-woteva” sounds like a w3schools CSS template. That’s how they write it.

1 Like
9

I think I might be using the “cover my butt” approach with some of this. I started off following a tutorial. Problem was that the tutorial script didn’t work. Thats when I started to play and come up with my own solution - bloated solution, but I was happy I got it to work.

10

I stole the idea from a w3 template. I posted some of it here and you replied to it. I have kept the w3 because I find it easier looking at what I’m doing.

Puzzled to see the problem with using something I find helpful at this point.

11

If you find it helpful, and you’re the only one working on your code, I see no problem. I couldn’t use that system, because having every class begin “w3” would make it very hard for me to pick out what I want when scanning through the CSS (and HTML), but each to his own.

1 Like
12

I had to be some-one that would come up with a point I couldn’t avoid. Thank you TechnoBear, you make a very good point I did not consider. Good thing my css file is crap anyway, re-writing it won’t hurt so much.

I’m here to learn

2 Likes
13

Here is an alternative version. It may not be a pixel perfect duplication, but close and can be tweaked.

I only ended up using one class in the whole page. It would have been possible without even that. But this was not an exercise in class dodging, it’s just the way it turned out for me. I did not need more than one class.
But it does illustrate how your multitude of classes was totally unnecessary.
Of course as a project expands and becomes more complex more classes will be required, but not nearly as many as you used.
This is done partly by targeting semantic html elements. Body and main are unique in a page, so no need for classes (or IDs). Things like <p> it’s reasonable to assume a basic body text style and only apply a class when you require something a bit different. And again things like headings should be a standard style, so no need for a class.

2 Likes
14

I really need to study that. Looking at it I was so far on the wrong track. It takes a bit for my brain to get around some of this stuff sometimes.

I’ve been working on a tutorial all day (14 hrs) and I’m now thinking they’re all bloat.

Thanks very much Sam

15

Wouldn’t be your website by any chance ?

I really did love the comment on Dream Weaver.

My sister (whom I haven’t seen in 20+yrs) has a comment at the bottom of that site.

16

No it belongs to Jason M. Knight ( aka Deathshadow ), a former
member here.

Unfortunately, his vitriolic writings and opinions are not to the liking
of many of the forums and consequently he gets banned.

At present, there are two forums that I know of, where you can view
his acerbic posts…

  1. http://www.codingforums.com/
  2. https://forums.digitalpoint.com/

coothead

1 Like
17

Well I like his writing even if I’m not sure I agree with everything.

And wish if he started a tutorial he would finish it.

All I know at this point is that I’m starting from scratch again tomorrow morning, its 4am so make that today.

18

Tutorials are never finished, they are an ongoing process. :winky:

coothead

19

Well his work in progress is taking an incredibly long time. My sisters comment was posted over a year ago.

He is screaming “your work is rubbish”, and “I know how to do it properly”. Then he puts up half a tutorial.

I have no idea of this guys age, but he was probably doing html before half the users of the internet were born. You don’t just wake up one morning with all the knowledge he has.

I started by doing tutorials over at w3 school, that’s probably the start of bloat. But if you don’t know, you don’t know, and I didn’t have a clue that I was on a completely wrong track.

He needs to finish his tutorial !

1 Like
20

Hi there slimpickings,

For someone who professes to be a novice coder, his
half tutorial should keep you going for quite a while. :biggrin:

I believe that he suffers from a debilitating illness, but
if his work interests you why don’t you contact him? :winky:

coothead

1 Like