HTML5 Basics–Practice 8

We have discussed about styles in HTML5 Basics–Practice 6. This was one of the methods by which we can add style in our html file. There are three ways of adding style.

Capture8

The style attribute we had been using till now was inline. We were specifying a style for each statement. Internal CSS is used inside the head tag. We can define the style of the complete html page using this method. In external CSS, we create a separate file to store the styles. The file should be saved with .css extension. This style can be used to give styles to multiple web pages. The benefit of external CSS is that we need to make change in one file to implement the changes in the web pages.

I will show inline and internal css in the following example.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Fourth Page</title>
<style>
p {color: yellow;}
</style>
</head>
<body>
<h1 style=”background-color:red;”>Inline CSS Red background.</h1>

<p>Internal CSS Yellow text color.</p>
</body>
</html>

“Code ends”

Output:

Capture9

The statement, <h1 style=”background-color:red;”>Inline CSS Red background.</h1>, is an example of inline css. We are defining the style in the same line.

For internal css, we have used a <style> tag inside <head>. We have given a style to the paragraph element here.

For external css, you can take any html file. I am using eg1.html file. You can take the code from HTML5 Basics–Practice 4. Then create a .css file. Let us name it First.css.

First.css

“Code starts”

body
{
background-color: yellow;
}
h1
{
color: purple;
}
p
{
font-family: fantasy;
}
pre
{
background-color: blue;
}

“Code ends”

eg1.html

“Code starts”

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>First Page</title>
<link rel=”stylesheet” href=”First.css”>
</head>
<body>
<h1>First Page Heading 1</h1>
<p title=”Tooltip for first paragraph”>Paragraph 1</p>
<hr>
<h2>First Page Heading 2</h2>
<p>Paragraph 2</p>
<hr>
<h3>First Page Heading 3</h3>
<p>Paragraph 3</p>
<hr>
<h4>First Page Heading 4</h4>
<p>Paragraph 4</p>
<hr>
<h5>First Page Heading 5</h5>
<p>Paragraph 5</p>
<hr>
<h6>First Page Heading 6</h6>
<p>Paragraph 6</p>
<hr>

<a href=”https://www.workeatpraylove.com”>Click on this to see my website!!</a>

<br>

<img src= “IMG_0032.jpg” alt=”alternate text for image” width=”104″ height=”142″>

<p title=’example when single quotes to be used: “Spriha” wrote it’>Hover mouse here for single quote usage</p>

<h1>Extra space in paragraph element</h1>

<p>This is the first line
This is the second line
This is the third line</p>

<pre>
This is first line
This is second line
This is third line
</pre>

</body>
</html>

“Code ends”

The statement that has been added in eg1.html is marked in bold and italics.

Output of the code:

Capture10

 

Advertisements

2 thoughts on “HTML5 Basics–Practice 8

  1. Leonardo says:

    Yᥙll be able to play it anytime yоu want.? Daddy answered.
    ?As a result of speaking about how great Godd is makes hiim
    completely satizfied and itѕ worship. Play it
    before you fall asleep tonght and whenever you get up in the morning aand God migjt
    be nedar you all day long.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s