Scribd
Upload
39 views

Hex HTML Web Edit

only web edit

Uploaded by

EleonoraMarkoskaJakimov
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
39 views

Hex HTML Web Edit

only web edit

Uploaded by

EleonoraMarkoskaJakimov
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

optimum

resolution
provider

Step 1: Open Notepad (PC)


Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type
Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)


Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In
Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML
code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML


Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Notepad

Using The class Attribute


The class attribute specifies one or more class names for an HTML element.

The class name can be used by CSS and JavaScript to perform certain tasks for
elements with the specified class name.

In CSS, to select elements with a specific class, write a period (.) character,
followed by the name of the class:

Example
Use CSS to style all elements with the class name "city":

<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Result:

London
London is the capital of England.

Paris
Paris is the capital of France.

Tokyo
Tokyo is the capital of Japan.

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

Using The class Attribute in JavaScript


JavaScript can access elements with a specified class name by using the
getElementsByClassName() method:

Example
When a user clicks on a button, hide all elements with the class name "city":

<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Tip: Study JavaScript in the chapter HTML JavaScript, or in our JavaScript
Tutorial.

Multiple Classes
HTML elements can have more than one class name, each class name must be separated
by a space.

Example
Style elements with the class name "city", also style elements with the class name
"main":

<h2 class="city main">London</h2>


<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
In the example above, the first <h2> element belongs to both the "city" class and
the "main" class.
Same Class, Different Tag
Different tags, like <h2> and <p>, can have the same class name and thereby share
the same style:

Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Test Yourself with Exercises!

COLOR PICKER
colorpicker
HOW TO
Tabs
Dropdowns
Accordions
Convert Weights
Animated Buttons
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List
SHARE

CERTIFICATES
HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML.

You might also like