[html]2/14/15 9:27 PM

Styling HTML with CSS

CSS stands for Cascading Style Sheets

Styling can be added to HTML elements in 3 ways:

  • Inline – using a style attribute in HTML elements
  • Internal – using a <style> element in the HTML <head> section
  • External – using one or more external CSS files

Inline Styling (Inline CSS)

Inline styling is useful for applying a unique style to a single HTML element:

Inline styling uses the style attribute.

This inline styling changes the text color of a single heading:

Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page.

Internal styling is defined in the <head> section of an HTML page, using a <style> element:

External Styling (External CSS)

External style sheet are ideal when the style is applied to many pages.

With external style sheets, you can change the look of an entire site by changing one file.

External styles are defined in the <head> section of an HTML page, in the <link> element:

Properties:

border

padding
margin

id

class

//need to know the difference between the id and class

Use id to address single elements. Use class to address groups of elements. 在同一HTML文档中不能有两个具有相同id值的元素。文档中的每个id值都必须是唯一的。

Links-syntax: href

//the content of the herf can be the website address or the specific pages in this website.

Html links, color and icons

<style>
a:link    {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover   {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active  {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>

 

 

Html links target attribute.

<!DOCTYPE html>
<html>
<body>
 
<a href="//www.w3schools.com/html/" target="_blank">Visit our HTML tutorial!</a>
 
<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>
 
</body>
</html>

 

_blank

Opens the linked document in a new window or tab

_self

Opens the linked document in the same frame as it was clicked (this is default)

_parent

Opens the linked document in the parent frame

_top

Opens the linked document in the full body of the window

framename

Opens the linked document in a named frame

Html links: image as link

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

 

 

Use the <img> element inside the html-using element

Html links: use id to make a quick connection as a bookmark

<!DOCTYPE html>
<html>
<body>
 
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
 
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
 
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
 
</body>
</html>

 

And when click the links it will turn to the html link which use the id with c4, in this example is the chapter 4

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.