Categories
CSS Web development

CSS Pseudo-elements

The CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element/ elements.

CSS Pseudo Elements

Syntax:

selector:pseudo-element {
  property:value;
}

CSS PSEUDO-ELEMENTS:

:first-letter

:first-line

:before

:after

:selection

The CSS :first-line pseudo-element:

To add the special effect to your first line of the text use the :first-line pseudo-element.

The following example formats the first line of the text in all <p> elements:

<!DOCTYPE html>
<html>
<head>
<style>
  
p {
    font-family: arial;
  }
p:first-line {
  color: #2a9d8f;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>To add the special effect to your first line of the text use the :first-line pseudo-element. </p>

</body>
</html>

Output:

CSS Pseudo-elements

You can apply to the :first-line pseudo-element the following properties:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

The CSS :first-letter pseudo-element:

To add the special effect to your first character of the text use the :first-letter pseudo-element.

The following example formats the first letter of the text in all <p> elements: 

<!DOCTYPE html>
<html>
<head>
<style>

p {font-family: arial;
    
  }
p:first-letter {
  color: #2a9d8f;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>To add the special effect to your first character of the text use the :first-letter pseudo-element.</p>

</body>
</html>

Output:

CSS pseudo-elements

You can apply to the :first-letter pseudo-element the following properties: 

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

The CSS :before pseudo-element:

The CSS :before pseudo-element can be used to place the content before the content of an element:

<!DOCTYPE html>
<html>
<head>
<style>
h1:before {
  content:":before content";  
  color: #2a9d8f;
  margin-right:10px;
}
</style>
</head>
<body>

<h1>CONTENT</h1>
<p>The CSS :before pseudo-element places content before the content of an element.</p>
  
</body>
</html>

Output:

CSS :before pseudo element

The CSS :after pseudo-element:

The :after pseudo-element can be used to place the content after the content of an element.

<!DOCTYPE html>
<html>
<head>
<style>
h1:after {
  content:":after content";  
  color: #2a9d8f;
  margin-left:10px;
}
</style>
</head>
<body>

<h1>CONTENT</h1>
<p>The CSS :after pseudo-element places content after the content of an element.</p>
  
</body>
</html>

Output:

CSS :after pseudo element

The CSS :selection pseudo-element:

The :selection pseudo-element matches the portion of an element that is selected by a user.

You can apply to :selection pseudo-element the following CSS properties:

  • color
  • background
  • cursor
  • outline

The following example makes the selected text red on a yellow background:

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Firefox */
  color: #2a9d8f;
  background: #e9c46a;
}

:selection {
  color: #2a9d8f;
  background: #e9c46a;
}
</style>
</head>
<body>

<h4>Select the text in this example:</h4>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Output:

Select the text in this example:

This is a paragraph.

This is another paragraph.

Enjoy coding!

Categories
CSS Web development

How to create a Dropdown Menu?

In my previous post, you learned how to create a navigation bar with CSS. Today I would like to show you how you can create a dropdown menu using CSS.

CSS Dropdown Menu

The CSS dropdown menu is a toggleable menu that allows the user to choose one of the values from a preferred list.

Example1. Hoverable Dropdown Menu:

Step 1: Add HTML

<div class="drop-down">
  <button class="drop-button">Dropdown Menu</button>
  <div class="drop-down-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>

Step 2: Add CSS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.drop-button {
  background-color: #2a9d8f;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.drop-down {
  position: relative;
  display: inline-block;
}

.drop-down-content {
  display: none;
  position: absolute;
  background-color: #f4a261;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.drop-down-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.drop-down-content a:hover {background-color: #e76f51;}

.drop-down:hover .drop-down-content {display: block;}

.drop-down:hover .drop-button {background-color: #e9c46a;}
</style>
</head>
<body>

<h2>Hoverable Dropdown Menu:</h2>
<p>Hover over the button to open the dropdown menu.</p>

<div class="drop-down">
  <button class="drop-button">Dropdown Menu</button>
  <div class="drop-down-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Output:

Hoverable Dropdown Menu:

Hover over the button to open the dropdown menu.





You can create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar.  

Example2. Dropdown Menu inside a Navigation Bar:

Step 1: Add HTML

<div class="nav-bar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropDown">
    <button class="dropButton">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropDown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

Step 2: Add CSS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

.nav-bar {
  overflow: hidden;
  background-color: #2a9d8f;
}

.nav-bar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropDown {
  float: left;
  overflow: hidden;
}

.dropDown .dropButton {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.nav-bar a:hover, .dropDown:hover  .dropButton {
  background-color: #e76f51;
}

.dropDown-content {
  display: none;
  position: absolute;
  background-color: #e9c46a;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropDown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropDown-content a:hover {
  background-color: #f4a261;
}

.dropDown:hover .dropDown-content {
  display: block;
}
</style>
</head>
<body>

<div class="nav-bar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropDown">
    <button class="dropButton">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropDown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

Output:

Hover over the “Dropdown” link to see the dropdown menu.





Enjoy coding!

Read also:

CSS Fixed Sidebar Menu

CSS Fallback Fonts

How to create a responsive Navigation Bar?

Categories
CSS Web development

CSS Display Property

The CSS display property is the most important CSS property to control the layout.

The display property defines if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). 

Examples of the block-level elements: 

<div>

<h1>…<h6>

<p>

<form>

<header>

<footer>

<section>

An inline-level element does not start on a new line and only takes up as much width as necessary.

Examples of the inline-level elements:

<span>

<a>

<img>

Display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

The HTML <script> element uses display: none; as default.

As I mentioned before, each element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa can be useful for making the page look a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="https://lenadesign.org/html/" target="_blank">HTML</a></li>
  <li><a href="https://lenadesign.org/css/" target="_blank">CSS</a></li>
  <li><a href="https://lenadesign.org/javascript/" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Output:

The following example displays <span> elements as block elements:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span>

</body>
</html>

Output:

The following example displays <a> elements as block elements: 

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<a href="https://lenadesign.org/html/" target="_blank">HTML</a>
<a href="https://lenadesign.org/css/" target="_blank">CSS</a>
<a href="https://lenadesign.org/javascript/" target="_blank">JavaScript</a>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS Float Tutorial

CSS Opacity / Transparency

CSS Shadows

Categories
CSS Web development

CSS Styling Links

How to add the link to the HTML document, you can find in my previous posts (click here to see the post). To improve the look of your web page you can style your links in CSS.

CSS :hover and :active Selectors
*to see the code of the CSS link animation above on the website click here.

Links can be styled with any CSS property like colour, font-family, background and etc…

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: #2a9d8f;
}
</style>
</head>
<body>

<p><b><a href="" target="_blank">This is a link.</a></b></p>

</body>
</html>

Output:

In addition, links can be styled differently depending on what state they are in. The four links states are:

a: link – unvisited link.
a: visited – visited link.
a: hover – a link when the user hovers over it.
a: active – a link the moment it is clicked.

When setting the style for several link states, there are some order rules:

a: hover MUST come after a: link and a: visited
a: active MUST come after a: hover

Example:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: #2a9d8f;
}

/* visited link */
a:visited {
  color: #264653;
}

/* hover over link */
a:hover {
  color: #f4a261;
}

/* selected link */
a:active {
  color: #e76f51;
}
</style>
</head>
<body>

<p><b><a href="" target="_blank">This is a link.</a></b></p>


</body>
</html>

Output:

The CSS background-color property can be used to specify a background colour for the links. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: #2a9d8f;
  color: #e9c46a;
}

a: visited {
  background-color: #264653;
}

a:hover {
  background-color: #f4a261;
}

a:active {
  background-color: #e76f51;
}
</style>
</head>
<body>

<p><b><a href="" target="_blank">This is a link.</a></b></p>


</body>
</html>

Output:

Examples of more advanced buttons: 

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #2a9d8f;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #264653;
}
</style>
</head>
<body>

<a href="" target="_blank">This is a link.</a>

</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid #2a9d8f;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #2a9d8f;
  color: white;
}
</style>
</head>
<body>

<a href="" target="_blank">This is a link.</a>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS :hover and :active selectors

CSS Text Change on Hover

Categories
HTML Web development

HTML Table

Today I would like to take a closer look at the <table> HTML element. Tables are used to represent tabular data (tables shouldn’t be used for page layouts, you can read more here). 

A table allows you to look up values that indicate some kind of connection between different types of data, like days of the week, or a person and their age. 

HTML Table

An HTML table is defined with the <table> tag. Each table row is defined with <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The HTML <td> element can contain text, images, lists or other tables. 

Example:

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>

Output:

HTML Table

If you do not specify a border the table will be displayed without borders. HTML table borders are specified using CSS. To set the border of an HTML table, use CSS border property

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

HTML Collapsed Border, this property is used to separate off a cell. It is used to collapse adjacent cells and make a common border. If you want the borders to collapse into one border, add the CSS border-collapse property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

HTML Table Cellpadding is used to add padding to the contents of each table cell and the border or edge of the cell. To set the padding, use the CSS padding property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 20px;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>
<p>Try to change the padding to 10px. </p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

Now you can define style to your table.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
table#t01 {
width: 100%;
background-color: #E9967A;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>
<p>Styling Tables</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>
<br>
<table id="t01">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

and add more styles 🙂

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
table#t01 tr:nth-child(even) {
background-color: #E9967A;
}
table#t01 tr:nth-child(odd) {
background-color: #FFEFD5;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>
<p>Styling Tables</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>
<br>
<table id="t01">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

Enjoy coding!

Read also:

HTML Basic Elements part.1

HTML Text Formatting And Styles

Categories
HTML Web development

HTML Basic Elements part. 2

Continuing my previous post, today I prepared another 5 HTML elements which are frequently used in HTML documents. Se let’s take a look, how to use them in practice:

1. HTML <div> tag

2. HTML <span> tag

3. HTML <button> tag

4. HTML <br> tag

5. HTML comment tag

HTML Basic Elements

1. HTML <div> tag

The HTML <div> tag is an empty container, which defines section or division in an HTML document. The <div> element is often used to group together HTML elements and apply CSS styles to many elements at once. 

Example:

<!DOCTYPE html>
<html>
<body>

<p>You can write some text here.</p>

<div style="background-color:lightgreen">
  <h3>Heading in a div element</h3>
  <p>Text in a div element.</p>
</div>

<p>You can write some text here.</p>

</body>
</html>

Output:

HTML Basic

2. HTML <span> tag

The HTML <span> tag is used to group and applying styles to inline elements in an HTML document. 


Example:

<!DOCTYPE html>
<html>
<body>

<p>My sister has <span style="color:brown;font-weight:bold">brown</span> hair and my brother has <span style="color:red;font-weight:bold"> red</span> hair.</p>

</body>
</html>

Output:

HTML Basic Elements

3. HTML <button> tag

The HTML <button> tag defines a clickable button and can be used in forms or anywhere in an HTML document that needs simple button functionality. Inside a <button> tag you can put content (text or images). Different browsers use different default types for the <button> element, but you can change the button’s appearance with CSS. 

Example 1:

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hello :D')">Click Me!</button>

</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #2a9d8f;
  border: none;
  color: black;
  padding: 20px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
</style>
</head>
<body>

<button>DEFAULT BUTTON</button>
<button class="button">STYLED BUTTON</button>
</body>
</html>

Output:


4. HTML <br> tag

The HTML <br> tag inserts a single line break. The <br> element is an empty tag which means it has no end tag. 


You can use the <br> tag to enter line breaks, not to separate paragraphs. 


Example:

<!DOCTYPE html>
<html>
<body>

<p>
You can use br <br> tag to enter line breaks, <br> not to separate paragraphs.
</p>

</body>
</html>

Output:

HTML elements

5. HTML <!–…–> comment tag

The HTML comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. Adding comments into HTML code can help you or someone looking at the code to indicate sections of a document (especially in complex documents). 

The HTML comments are placed in between <!–…–> tags, so any content placed within <!–…–> tags will be treated as a comment. 

Example:

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>You can put some text here.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Output:

HTML Elements

That’s all for now 🙂 
Enjoy coding!

Read also:

HTML Media

HTML Basics

HTML Attributes

Categories
CSS Web development

How to add CSS to HTML?

Adding CSS into HTML can be confusing because there are 3 different ways to do it.


a) external CSS 
b) internal CSS
c) inline CSS

CSS Step by step

a) External CSS

This technique allows you to define a style sheet as a separate document and import it into your website. With an external style sheet, you can change a look of an entire web page by changing just one file.


Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the <head> section.


Example and output:

CSS basics

Here is how the “mystyle.css” file looks like:

CSS basics

An external style sheet can be written in any text editor and must be saved with a .css extension. The external style sheet file should not contain any HTML tags.

b) Internal CSS

An internal style sheet holds CSS rules for the web page in the <head> section of the HTML document. An internal style sheet can be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the <head> section.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: pink;
}

h1 {
  color: green;
  margin-left: 35px;
}
</style>
</head>
<body>

<h1>Heading- Internal style sheet.</h1>
<p>Paragraph- Internal style sheet.</p>

</body>
</html>

Output:

How to add CSS to HTML?

c) Inline styles

Inline-styles are related to a specific HTML tag, using a style attribute with a CSS rule to style specific page elements. They are useful for quick, permanent changes.

Example and output:

How to add CSS to HTML?

Enjoy coding!

Read also:

CSS Basics

CSS Advanced

Categories
JavaScript Web development

JavaScript Introduction

JavaScript is the programming language of HTML and the Web. Java Script is one of the 3 languages all web developers should learn: 


a) HTML – to define the content of web pages.
b) CSS – to specify the layout of web pages.
c) JavaScript – to program the behaviour of web pages.

JavaScript Intro

Web pages are not the only places where JavaScript is used. Many desktop and server programs use JavaScript (for example Node.js).  


JavaScript can change the HTML content. One of many JavaScript methods is getElementById(). This example uses the method to “find” an HTML element (with id=”demo”) and changes the element   content (innerHTML) to “Hello JavaScript”: 

<!DOCTYPE html>
<html>
<body>

<h4>What Can JavaScript Do?</h4>

<p id="exampleOne">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("exampleOne").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

Output:

What Can JavaScript Do?

JavaScript can change HTML content.

JavaScript can change HTML attribute values. In this example, JavaScript changes the value of the src (source) attribute of an <img> tag: 

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('image').src='pic_bulbon.gif'">Turn on the light</button>

<img id="image" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('image').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

Output:

JavaScript can change HTML styles (CSS). Changing the style of an HTML element is a variant of changing an HTML attribute:  

<!DOCTYPE html>
<html>
<body>

<h4>What Can JavaScript Do?</h4>

<p id="examle">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('example').style.fontSize='35px'">Click Me!</button>

</body>
</html> 

Output:

What Can JavaScript Do?

JavaScript can change the style of an HTML element.

Enjoy coding!

Read also:

JavaScript Introduction

JavaScript Math Object

JavaScript HTML DOM

Categories
JavaScript Web development

How to add JavaScript to HTML?

JavaScript is the programming language for the web and can update and change both HTML and CSS.

How to add JavaScript to HTML?

You can place any number of scripts in your HTML document.

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML, in the <body> section, or after the </body> close tag, depending on when you want Java Script to load. 


In this example, a JavaScript function is placed in <head> section of HTML page. The function is invoked (called) when a button is clicked: 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("example").innerHTML = "Text changed.";
}
</script>
</head>
<body>

<h4>JavaScript in the Head Section</h4>

<p id="example">Click on the button to change the text.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html> 

Output:

JavaScript in the Head Section

Click on the button to change the text.


Hope you find it helpful.

Enjoy coding!

Read also:

JavaScript Introduction

HTML DOM

Categories
CSS HTML

Starting with HTML and CSS

What is HTML and what is CSS?

HTML (HyperText Markup Language) and CSS (Cascading Style Sheet) are two of the core technologies for building websites. HTML is the foundation of all websites. HTML defines the structure of the web page, while CSS defines its style.

html and css

Example:

HTML

<p>This is a paragraph.</p>

This is a paragraph.

HTML + CSS

<p style="color: red;">This is a paragraph.</p>

This is a paragraph.

Note: Adding the CSS to HTML, we can easily change the colour and the font (or any other property) of the paragraph.


Enjoy coding! 

Read also:

CSS Introduction

How to start coding?

What is a Web Developer?