Where to start when changing HTML to CSS [closed] - html

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am trying to learn CSS, so far it seems that changing HTML to CSS is more of just changing font, colors, text size, tables and background to some CSS statements.
My problem is I am not sure what HTML I still need and what to remove.
Where do I put the CSS stuff?
Basic HTML trying to learn with this easy one:
<html>
<head>
<title>CSS practice</title>
</head>
<body style="background-color:white;">
<table border="1" width="990" bgcolor="#99CCFF">
<tr>
<td width="990"><p align="center"><font face="Arial Black" size="6" color="#680000">DDDD</font></td>
</tr>
</table>
<table border="0" width=990 bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="990"><font color="#FFFFFF" face="Arial" size="2"><b> Personal Portfolio</b> </font></td>
</tr>
</table>
<table border="0" width=990 cellspacing="0" cellpadding="0">
<tr>
<td width="18%" bgcolor="#99CCFF" valign="top">
<p style="margin-left: 20"><b><font face="Arial" size="2" color="#000000">
Home <br><br>
About Me <br><br>
Outreach <br><br>
Contact Me <br><br>
Experience <br><br>
Education <br><br>
Skills <br><br>
<td width="61%" valign="top">
<blockquote>
<p><br>
<font face="Arial" size="5">Welcome</font></p>
<p><font size="2" face="Arial"> Aspiring CSS programmer </font></p>
<img src="me.jpg" alt="US"/>
</blockquote><br><br>
<p align="center"><font face="Arial" size="1">© COPYRIGHT 2012 ALL RIGHTS
RESERVED </font></td>
<table border="0" width="990" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><font size="1"> </font></td>
</tr>
</table>
</body>
</html>

Start from scratch. Building semantic HTML is about focusing only on content, and you will find out that its a lot easier than make the ol'table HTML.
Table-less, semantic HTML
Your new HTML should look like this:
<html>
<head>
<title>CSS practice</title>
<link rel="stylesheet" href="css-file.css" type="text/css">
</head>
<body>
<span>DDDD</span>
<h1>Personal Portfolio</h1>
<nav>
Home
About Me
Outreach
Contact Me
Experience
Education
Skills
</nav>
<p>Welcome <span>Aspiring CSS programmer</span></p>
<img src="me.jpg" alt="US"/>
<span>© COPYRIGHT 2012 ALL RIGHTS RESERVED</span>
</body>
</html>
See? Just the contents, nothing about styles at all. Much simpler!
So after that you can start moving on CSS with your new separated css-file.css (look the css declaration inside the head tag).
CSS styles
CSS is just about finding paths to your HTML elements, and then styling it. It's really easy.
For example, you could spot and style your title like:
h1 {
font-family: "Verdana";
font-weight: bold;
}
... your menu buttons like:
nav a {
color: blue;
text-style: italic;
}
nav a means you want to style every a tag living inside a nav tag, leaving unstyled the a ones outside of a nav tag.
Well... and this is a path! Build your paths freely, as long they meet their respective targets (the HTML elements).
Classes and IDs
Every tag in HTML can have both a class and an id attribute. Apply them freely into your HTML tags to help you spot your elements. Use them like this:
<span class="class_name" id="id_name">content</span>
In your CSS, you can refer to a class by putting a dot before the name, like:
nav a.class_name {
color: blue;
text-style: italic;
}
So the styles will be applied to every a tag that has the class-name class, living inside a nav tag.
Id's will work the same way, but in CSS you refer to them by placing a hash (#) instead of the dot we used for class.
That's it, you have already begun. :)
I personally would recommend you start from here: How to make websites.
And remember... use LOTS of Google.
You'll be there in no time.

css should handle size/position/color/font -- in short, anything that's not structure. w3schools is a good resource.
Use jsfiddle to try out test implementations.
Here's a rough cut, I did with just a few minutes playing around my fiddle
html:
<html>
<head>
<title>CSS practice</title>
</head>
<body>
<div class='header'>DDDD</div>
<div class='subHeader'>Personal Portfolio</div>
<div class='links'>
<ul>
<li> Home </li>
<li> About Me </li>
<li> Outreach </li>
<li> Contact Me </li>
<li> Experience </li>
<li><a href="education.html"> Education </a</li>
<li> Skills </li>
</ul>
</div>
<p class='welcome'>Welcome</p>
<p class='welcome2'>Aspiring CSS programmer</p>
<img src="me.jpg" alt="US" />
<div class='copyright'>© COPYRIGHT 2012 ALL RIGHTS RESERVED</div>
</body>
</html>
css:
:root{
background-color:white;
font-family: Arial;
}
.header {
border: 1px;
width: 990px;
background-color: #99CCFF;
text-align: center;
font-size: 16pt;
color: #680000;
}
.subHeader {
background-color: black;
color: white;
font-weight: bold;
}
.links {
width: 200px;
background-color: #99CCFF;
font-size: 12pt;
padding-left: 20px;
float: left;
}
.welcome {
font-size: 15pt;
}
.welcome2 {
font-size:12pt;
}
.copyright {
float: left;
width: 990px;
text-align: center;
}

The general concept is that CSS replaces ALL of the styling information in HTML, so that HTML should only be there as a "markup" language which only provides data structure to your content.
All of the attributes that refers to color/size/position etc. should be remade as CSS statements, and a class added to those HTML elements instead.
For example, the table tag would change to <table class="mytable">.

If I understand your question correctly, you are trying to replace the styles in your HTML with CSS.
This is where you add your css (note that I am giving examples, they might nor be syntactically correct)
<head>
<title>CSS practice</title>
<style>
//Your CSS styles - e.g.:
.body {
attribute1: value1,
attribute2: value2
}
</style>
</head>
And, remove all the style, border, width, etc. attributes inside HTML tags - basically anything that adds any sort of styling, like height, color, font, width, border, etc. would be moved into the CSS code.

Basically, you almost don't need any attribute on HTML tags anymore, except for id and class, and sometimes style for inline styling (that is not good but can be handy if you are in trouble and have no time).
Then border, width, background-color, font size and color, etc... are all managed through CSS, plus hundreds of other things.
For basic stuff on unique elements, you can use ID attribute, for elements repeated in the page, use class.
In CSS, refer to IDs with
#myID{ color: red;}
, to class with
.myClass{ color: red; }
and to elements with the element name, like
div { color: red; }
Good luck, have fun :)

w3schools as mentioned above is a really good resource. Try to put your css code in a separate "css" file. Also if you just want to see how things interact, developer tools on the browser comes in really handy, if u r on windows/linux using firefox or chrome u can try Ctrl+F12.
Hope this helps.

Related

Simple Email CSS displaying different than in Browser

I am trying to create a simple email with embedded CSS but the result emailed to me comes out very different than what I am seeing in browser.
Here is my code:
<html>
<head>
<style>
body {
background-color: #96D60D;
}
div {
background-color: white;
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
padding: 20px;
}
</style>
</head>
<body>
<div>
<center><img src="logo.png">
</center>
<u>
<p>
<H1>API updates list:</H1>
</p>
</u>
<p>
<b>
<h2>Successful Entries</h2><br></b>
<ul>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
</ul>
<ul>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
<li>asdasdasd</li>
</ul>
</p>
</div>
</body>
</html>
It looks fantastic in the browser as you can see here:
https://www.w3schools.com/code/tryit.asp?filename=G1EU5RK1DPMG
However, when put into an email, it looks pretty bad:
https://ibb.co/6FVJpZJ
Anyone know how to fix this?
I guess you are using Outlook. Some css properties are not fully supported by it and some others are not supported at all. Mailchimp has a cool page with lots of information that I find useful for you. Just check which properties you can use. From my experience, box shadows, margins and border radius have really made me go crazy because the changes don't work.
Here you can even find differences between the desktop and the app version of Outlook: https://templates.mailchimp.com/resources/email-client-css-support/

I am coding a website, but bold and italics aren't working [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to make a website (Sponge) and when I try to do bold and stuff but it just wont work!
look at it and see how annoying it is!
My code:
Hastebin
Header tags <h#> often apply font-weight: bold by default. I'm not sure why all of your text is in headers, but it probably shouldn't be.
Put the bulk of your text in paragraph <p> tags and adjust your CSS to format the paragraphs how you'd like, using:
p { /*Style goes here*/ }
Or, you can apply a class to your paragraphs to adjust their styles individually or in groups. If you're not sure how, Google a CSS tutorial.
This is just a quick edit of your code. It's not going to be perfect, but hopefully it leads you in the right direction.
<!DOCTYPE html>
<html>
<head>
<title>Sponge - Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.hotbar {
background-color: #808080;
height: 20%;
width: 100%;
font-family: 'Quicksand', sans-serif;
}
.about {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<div class="hotbar" height="7%" width="100%">
<img align="left" src="http://www.spongemc.cf/home/images/logo.png" alt="logo" height="7%" width="7%">
<h1 align="center"><a style="text-decoration: none;" href="http://www.spongemc.cf/home/">Home</a></h1>
</div>
<div class="about">
<br /> <!-- Assuming all those empty header tags for for spaces - you could also use padding-top in the div or margin-top for the first h2 tag -->
<h2>What are we?<h2>
<p>We are a Minecraft server dedicated to people having fun!</p>
<p>You can have fun and play prison at <i>Sponge.minehut.gg</i>,</p>
<p>or you can play farming and Skyblock at <i>spongemc.net</i></p>
<p>Or you could just sit there doing nothing (I don't recomend this),</p>
<p>so what are you doing, <b>JOIN NOW!</b></p>
</div>
</body>
</html>

How to set text to go over an image strictly in HTML?

I am writing an emailed newsletter, and need to set an image as the footer, with a few clickable links over it. I have figured it out using both HTML and CSS, but no matter where I searched I could not find a way to do this strictly using HTML. Can anyone help me out?
<!--Footer-->
<tr id="footer">
<td id="footer" style="font-family: 'Titillium Web', sans-serif;;-webkit-text-size-adjust:none;background-image: url" img url"" templates\uuaemail-foot.jpg";padding-left:="" 20px;padding-right:="" 20px;padding-top:="" 10px;padding-bottom:="" 20px;"="">
<table height="101" width="602">
<tbody>
<tr>
<td id="footer" style="font-size: 10px;color:white;" height="95" valign="top" width="600" align="center"><p><br></p><p class="style3"><strong><span style="font-size: 12px;">admissions.rutgers.edu<br></span></strong></p><p class="style3"><span class="style7"><span style="font-size: 8px;"><strong> University Undergraduate Admissions</strong>, Operations Center<br>©2017 , an equal opportunity, affirmative action institution.</span></span></p></td>
</tr>
</tbody>
</table>
</td>
Is what I currently have (with CSS styling)
update: My issue is that the email is widely sent to Ms Outlook 2016, which I have both heard and seen through testing that it does not process CSS styles very well. When I opened this code in Outlook, it showed the CSS styling commands at the top of the message, and did not apply it at all.
CSS is just an organized way for the the stylesheet. Although not recommended, you can use inline styles with just the HTML to achieve almost everything, if you post your code, may be some of us can suggest a definite answer.
HTML is a markup language, it does neither add functonality or style by itself.
There are tags there the browser places default values.
Eg.
<footer> </footer>
The most browser add automaticly:
footer {
display: block;
}
Or the h tag
<h1></h1>
The most browser set the default values like:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Every other style change has to be done by your self with css. You can also work with inline stlyes like:
<h1 style="color:red;"> A red big text </h1>
A good way to find more about default values and inline styles is: https://www.w3schools.com/
You want to use background image in your email and you want it rendered in outlook. Use this site http://backgrounds.cm/ to generate code for background image that will work in all outlook desktop versions. Then you can add links etc. over the image.
Also, please don't use same id more than once in your code. You can assign an ID to one element only. To cover multiple elements, use class attribute.

How to write CSS code without using :not selector?

I have an article page that I am making small CSS changes, such as margin and font size, to. My code has to be able to be supported by Internet Explorer 8 and above. The problem is, I am using some CSS selectors that IE8 does not support. How do I write my CSS code without using the :not selector?
HTML for sample article page
<div class="entry">
<h3 class="social-title>Share This Article </h3>
<div class="social-content>
<table>
<td><img class="" src="twitter.png"><span class="">Twitter</span></td>
<td><img class="" src="facebook.png"><span class="">Twitter</span></td>
</table>
</div>
<!-- The article would start here -->
<p class="category_row"><h1 class="category-title>Lifestyle</h1></p>
<p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;"><img alt="" style="float: left;" src="example.jpg">Article goes starts here...</p>
<p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;">Second paragraph</p>
Third paragraph
</div>
CSS I am using
.entry p:not(.category_row) {
font-size: 14px;
line-height:22px;
}
img (margin: 10px)
So far example, if I wanted to add margin to the image that is in the article section, how would I write the CSS code so that it only affects the image in the article section and not the images in the <div class="social-content">? Without using :not?
Also how would I write CSS code to change the font-size of the article to a font size of 14px and line height of 22px? Without affecting everything else above (not in the article section) ?
Sorry if this is confusing, but I will clarify more if need be!
You will need to be more verbose if you want to support older browsers. The joy of the newer syntaxes is we are able to be more pithy, but if you have IE 8 in your supported list of browsers, you'll need to start with styling more general selectors and then overriding those styles in more precise selectors.
.entry p {
font-size: 14px;
line-height:22px;
}
.entry p.category_row {
font-size: XXpx;
line-height:XXpx;
}
I don't know where your article section begins from your markup. Figure out what is the most logical container for image would be, and then constrain your selector with it. Note article is an HTML5 element, so you would be remiss not to use it:
<article>
<img ... />
</article>
And article images would be styled with this simple selector: article img { ... }
If you want to use article with IE 8, be sure to include this: https://code.google.com/p/html5shiv/
Why don't you wrap the actual content in it's own div?
<p class="category-row">....</p>
<div class="post-content"><!--- maybe use article tag here -->
<p>First paragraph....</p>
<p>Second Paragraph</p>
</div>
Then you can just reference the p's like
.entry .post-content p {
....
}
Also, "category row" doesn't look like it should be a paragraph?
If it is a "row" a div or a span would be more appropriate.
If it contains nothing but the h1 you might as well scrap it and leave the h1 be there without a wrapper.
If you use the article tag (or any of the other new html5 semantic tags) include html5shiv, as Chris said in his answer.

Centering a variable-size block element on a page

I've inherited a very old web page that contains a single paragraph of text centered on the screen, both horizontally and vertically.
Here's the code:
<html>
<body>
<center><table height='100%'>
<tr style="vertical-align:middle"><td>
<pre style="font-size: xx-large">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table></center>
</body>
</html>
It doesn't render properly in jsFiddle, but it does as a standalone page, which you can see here.
I want to bring the markup into the 21st century, while still having the page render basically the same way (in particular, with the text block centered both horizontally and vertically). How can I do this with CSS? A non-table-based solution would be preferable (since the data isn't tabular), but I'll take what I can get.
The new markup I've written for the page looks like this, and has everything except the centering:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>/usr/bin/fortune</title>
<style>
p {
font-size: xx-large;
font-family: monospace;
white-space: pre;
}
/* insert CSS for centering here */
</style>
</head>
<body>
<p>Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).</p>
</body>
</html>
This sounds like a good case for display: table; you want some table styling for non-tabular data:
HTML
<div>
<p>
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information.
Answer available from AT&T on payment of license fee (binary only).
</p>
</div>
CSS
html, body {
height: 100%;
}
div {
display: table;
height: 100%;
margin: 0 auto;
}
p {
display: table-cell;
vertical-align: middle;
}
Only centers the content, and does not support IE6 or 7. For just 1 paragraph of text of unknown size, this will keep it centered: http://jsfiddle.net/hXuee/
You can set the paragraph tag to have position fixed and then use a percentage for the top attribute to center it on the page.
i did this:
position: fixed;
top: 35%;
You can check it out here: http://jsfiddle.net/MYuqe/
One way is to adjust it. Here's a way I did that got it pretty much dead center:
<html>
<body>
<table height='100%' width='100%'>
<tr style="vertical-align:middle; text-align: center;"><td style="position: relative; top: -6%">
<pre style="font-size: xx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>
Edit, to center the block and not the text, I used this:
<html>
<body>
<table height='100%' style="margin-left: auto; margin-right: auto;">
<tr style="vertical-align:middle;"><td style="position: relative; top: -6%;">
<pre style="font-size: xxx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>