Member Avatar for sephoria

Hi I am new to css, I did a degree in I.T at a university in london finished four years ago and worked in a completly different industry now that I want to design a site I realise just using html won't cut it lol, so I am trying to learn css on my own, do you think that is possible? there is a lot of information online but I am a bit confused on how to put it all together
I want to design a site similar to this:

http://theybf.com

I am trying to use floating three columns and I do understand that it will be best to have the css in a seperate file and add it to the html file by using a link. what i don't understand is where do I put the font size colour etc? Because all the examples I have seen on floating three columns there is no declaration of what the font should look like, does that mean I have to put it on a seperate stylesheet?
This is the example of floating three columns

http://matthewjamestaylor.com/blog/perfect-3-column.htm


Thank you for any advice you may give

  • 3 Contributors
  • 3 Replies
  • 104 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by itsjareds

Dani AI

Generated

Short summary and focused steps based on the thread: is right to keep layout and typography in CSS rather than inline, and is correct that a single external stylesheet makes pages consistent. also flagged that the site’s logo uses a custom typeface — that means the visible logo is not coming from the browser defaults and needs its own font handling.

Put global type rules once, at the top of the external stylesheet, so everything inherits predictable defaults. Example (place in the external CSS):

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; /* 1rem = 16px */
  line-height: 1.5;
  color: #333;
}

For a three-column layout, avoid using floats for a new project — use Flexbox or Grid for much simpler, more robust results. Basic Flexbox pattern:

.container { display: flex; gap: 20px; max-width: 1200px; margin: 0 auto; }
.col { flex: 1; min-width: 220px; }

If maintaining an older float-based approach, wrap floated columns in a clearing rule:

.clearfix::after { content: ""; display: table; clear: both; }

Practical tips and troubleshooting: add box-sizing: border-box; globally to avoid width surprises; use rem units for scalable / accessible type sizing; add a media query to stack columns on narrow screens; load any custom logo font with @font-face or a web font service so non-authors see it. When things look wrong, use browser DevTools to inspect computed sizes and check whether a parent collapsed because its children are floated. For modern layout references see a Flexbox guide (A Complete Guide to Flexbox) and the box-sizing docs (box-sizing).

Recommended Answers

All 3 Replies

Member Avatar for PsychicTide

This may not answer your question... I'll try to make it as simple as possible I suppose. The whole point of CSS is just a way of making sure all of your pages are the same as your other pages (pretty much templates). If you understand how to set up a page in HTML using styles/attributes, you know CSS.

Example HTML using divs...

<div id="content" style="float:left; width:975px; height:394px; text-align:center; margin:0 auto;">Stuff</div>

Example of how you would do it in separate CSS file...

div#content
{
        Float: Left;
	width:975px;
	height:394px;
	text-align:center;
	margin:0 auto;
}

by doing it with CSS all you have to do is make the div ID=content (in this case) anywhere you want the same formatting. There is rarely a need to make multiple style sheets (unless its special circumstances). I usually write out the styles in html then remove them and make a CSS file from there (to make sure it all works first).

Member Avatar for sephoria

Thanks for that, it does make some sense now, i just get confused with where i need to put things but as with most things i need to play around with it

Member Avatar for itsjareds

If it's any help, the purple logo text is the font called .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.