HTML and CSS: Difference between revisions
Jump to navigation
Jump to search
| (5 intermediate revisions by the same user not shown) | |||
| Line 19: | Line 19: | ||
* For organizing: <code>main</code>, <code>header</code>, <code>section</code>, <code>footer</code>, many more | * For organizing: <code>main</code>, <code>header</code>, <code>section</code>, <code>footer</code>, many more | ||
* Navigation: <code>nav</code> | * Navigation: <code>nav</code> | ||
* Input types: <code>date</code>, <code>time</code> | * Input types: <code>color</code>, <code>date</code>, <code>datetime</code>, <code>email</code>, <code>month</code>, <code>range</code>, <code>search</code>, <code>time</code>, <code>week</code> | ||
May need Modernizr ([http://modernizr.com http://modernizr.com]) to make some of these work. | |||
=== Boolean attributes === | === Boolean attributes === | ||
| Line 30: | Line 31: | ||
<input type="option" checked /> <!-- presence indicates true --> | <input type="option" checked /> <!-- presence indicates true --> | ||
</pre> | </pre> | ||
=== Attributes on input types === | |||
<code>required</code>, <code>maxlength</code>, <code>min/max</code>, <code>placeholder</code>, <code>autocomplete</code>, <code>autofocus</code>, <code>form</code> | |||
== CSS == | == CSS == | ||
| Line 45: | Line 49: | ||
http://www.w3schools.com/css/css_reference.asp | http://www.w3schools.com/css/css_reference.asp | ||
== CSS3 == | |||
Apply style to every other row of a table: | |||
<source lang="html4strict"> | |||
tr:nth-child(even){ | |||
background-color: #f8f8f8; | |||
} | |||
</source> | |||
Fit text into one line of a row: | |||
<source lang="html4strict"> | |||
td { max-width: 150px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } | |||
</source> | |||
Latest revision as of 16:27, 25 May 2015
How to make a link open up in a new browser window/tab:
<a href="www.google.com" target="_blank">Click here!</a>
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>Hello World!</body>
</html>
New tags
- For organizing:
main,header,section,footer, many more - Navigation:
nav - Input types:
color,date,datetime,email,month,range,search,time,week
May need Modernizr (http://modernizr.com) to make some of these work.
Boolean attributes
Old style:
<input type="option" checked="checked"/>
new style:
<input type="option" checked /> <!-- presence indicates true -->
Attributes on input types
required, maxlength, min/max, placeholder, autocomplete, autofocus, form
CSS
How to include an external CSS stylesheet:
<link href="site.css" rel="stylesheet" type="text/css" />
How to build a menu from css:
http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml
CSS reference
http://www.w3schools.com/css/css_reference.asp
CSS3
Apply style to every other row of a table:
tr:nth-child(even){
background-color: #f8f8f8;
}
Fit text into one line of a row:
td { max-width: 150px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }