Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Easy Issue (css)

Featured Replies

Hi guys. I'm new here, and also new to building websites.

 

I am looking to build a website that is a full black background and just say We Are Coming in big white writing, however i have put some code in to get the lettering to be big (72px) and im just getting a blank screen.

 

<style type="text/css">
body { font-family: Georgia, times, serif;
font-size: 72px; }
<body>
<p> We Are Coming</p>
</body>
</html>
that is the code, could someone tell me why its not working?
thanks
  • Author

Hi guys. I'm new here, and also new to building websites.

 

I currently have

<style type="text/css">
body { font-family: Georgia, times, serif;
font-size: 72px; }
</style>
<body>
<p> We Are Coming</p>
</body>
</html>
However i am wanting to change the background to black and the writing to white, and not sure where i should put the code.
Any help would be grateful.
thanks

 

body { font-family: Georgia, times, serif;
font-size: 72px;
font-color:#fff;
background-color:#000;
}

 

'font-color' isn't a valid attribute, certainly not in HTML5. Just use 'color':

body { 
font-family: Georgia, times, serif;
font-size: 72px;
color: #fff;
background-color: #000;
}
  • Author

Thanks guys. I am using it with html 5.

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 14 Aug 2013 20:18:57 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>We Are Coming</title>
<!--[if IE]>
<![endif]-->
</head>
<style type="text/css">
body { font-family: Georgia, Times, serif;
font-size: 96px;
background-color: black;
color: white;
vertical-align: center;
text-align:center;}
</style>
<body>
<br><br>
<p> We Are Coming...</p>
</body>
</html>
That is the full thing.
Is there a better way, or a proper way of laying that out?
For now all it needs to do is that, however i eventually want more on there. for example i will want to have some blinking red eyes underneath, and maybe use fonts that aren't original.
could someone help me out with that please?
Thanks

You should learn a little about using "divs" IMO. They are going to allow you to style and format your page the way you want. Trying to do everything in the "body" isn't going to work out well. There's plenty of info on using divs and all their attributes on the net. An obvious source would be: http://www.w3schools.com/tags/tag_div.asp

 

Also look up "class" and "id".

 

Lastly, if you are going to use 1 page and have your style be in your html page, then it should be in your header, not body. You can also link your .css in your html. This is stuff you'd find on the w3schools site.

 

As far as adding "funky" text, the text needs to be "web safe." http://www.w3schools.com/cssref/css_websafe_fonts.asp.

 

You can of course, use a custom font (@font-face) and host it on your server so that others will see it, or use Google fonts, but that's another issue IMO). There's a lot covered in this thread already.

 

Take a look at this as a quick example: http://jsfiddle.net/Apokalupsis/LejnB/ (includes code + what it looks like in browser).

 

 

 

Another good source for this type of stuff is www.udemy.com (my go to place for "how to's"). There are some freebies, but a lot are university level course type classes offered by actual trainers and professors. I'm sure you can find the same stuff online for free, but I prefer having it all in one place, plus I know several of the instructors, so I'm a little biased. =P

Edited by Apokalupsis

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.