CSS is short for Cascading Style Sheets.CSS was first used in HTML4 to better render HTML elements.CSS can control the presentation of multiple HTML elements at the same time. It also can control the layout of the page.
How to use CSS
CSS can be added to HTML in the following ways:
- Inline – use “style” attribute in HTML element.
- Internal – use <style> elements in the <head> section.
- External – use external css file.
It is usually best for you to refer to external CSS files. However, sometimes you can use inline CSS for demonstration purposes.
Inline CSS
Each HTML element has a style attribute. You can define the CSS style directly in the style attribute, but it is only valid for that element.
We add an inline css to the <p> element to change its default font color and margins:
<p style="color:blue;margin:20px 0;">This is a paragraph.</p>The background-color attribute defines the background color of an element:
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a title</h2>
<p style="background-color:green;">This is a paragraph. </p>
</body>the font-family, color and font-size attributes define the font style:
<h1 style="font-family:verdana;">A title</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph. </p>The text-align attribute specifies the horizontal and vertical alignment of the text:
<h1 style="text-align:center;">Align Centered Title</h1>
<p>This is a paragraph. </p>Internal CSS
You can use the <style> element to define page styles within the <head> section:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>External CSS
External CSS will be the ideal choice when styles need to be applied to many pages. Using external CSS, you can change the appearance of the entire site by changing one file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>An external css file can be written by any text editor. The contents of the file cannot contain any HTML element, and the file must be saved as a “.css” file.
Here is the content of the style.css file:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}The id attribute
To define a specific style for one special element, add an id attribute to the element:
<p id="p01">I am different</p>then define a style for the element with the specific id:
#p01 {
color: blue;
}The class attribute
To define a style for a special type of elements, add a class attribute to the element:
<p class="error">I am different</p>then define a style for the elements with the specific class:
p.error {
color: red;
}HTML links
The hyperlink is also called URL (Uniform Resource Locator), which is one of the most frequently used HTML elements in a website.Various pages of the website are connected by hyperlinks, and the hyperlinks complete the redirections between pages
HTML Hyperlinks
The hyperlink is defined by the <a> tag.
The hyperlink can be a piece of text or an image that you can click to redirect to a new document or part of the current document.
When you move the mouse over a link, the arrow changes to a small hand.
By default, a link will appear like this (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
You can change the default colors, by using styles:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>HTML Hyperlink Syntax
The hyperlink is defined by the <a> tag.
<a href="url">link text</a>Here is an example of the simplest hyperlink:
<a href="http://www.moddingzone.co/tutorial/html">Visit our HTML tutorial</a>It will direct to the home page of the HTML Tutorial when you click the above link.
“link text” is not necessarily text.Images or other HTML elements can become hyperlinks.
The href attribute
You can define the destination of the redirection by setting the href attribute of the <a> tag. There are 5 types of href attribute values.
1. Absolute URL – redirect to another site.
<a href="https://www.google.com/">go to google</a>2. Relative URL – redirect to a file in local site.
<a href="about.html">go to about page</a>3. Anchor URL – redirect to the anchor in the page.
<a href="#top">go to the top of page</a>4. Email URL – Launch Local Default Email Client.
<a href="mailto:admin@moddingzone.co">contact us</a>5. A piece of JavaScript script – Run a simple JavaScript code.
<a href="javascript:void(0);">javascript in href attribute</a>The target attribute
The target attribute of the <a> tag specifies where to open the linked document.
There are five types of target attribute values:
- Target=”_blank” – Always open a new window to display the content of the linked document.
- Target=”_self” – Always open the linked document in the current window.
- Target=”_parent” – Open the linked document in the parent frame.
- Target=”_top” – Open the linked document in the top frame.
- Target=”window_name/frame_name” – Open the linked document in a window named “window_name” or in a frame named “frame_name”.
Here we take “window_name” as an example:
<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html" target="view_window">Preface</a></li>
<li><a href="chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="chap3.html" target="view_window">Chapter 3</a></li>
</ul>When the visitor first clicks on a link, the browser opens a new window with the name “view_window”.If the visitor clicks on another link while the window “view_window” is still open, the browser will open the linked document again in the window “view_window”, replacing the content of the last opened document.
The title attribute
The title attribute in HTML defines additional information for the element.If the <a> tag defines the title attribute, then when you move the mouse over the <a> tag, a tip text message will appear over the link.for example:
<a href="http://www.moddingzone.co/" title="Welcome to Moddingzone">Visit TutorialDocs Home</a>
