Categories
CSS Web development

CSS Pseudo-elements

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

For example, it can be used to:

-style the first letter, or line, of an element

-insert content before, or after, the content of an element

Syntax:

The syntax of pseudo-elements:

selector::pseudo-element {
  property:value;
}

ALL CSS PSEUDO-ELEMENTS:

::first-letter

::first-line

::before

::after

::selection

The ::first-line Pseudo-element:

The ::first-line pseudo-element is used to add a special style to the first line of a text.

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

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: blue;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

Output:

Note: The ::first-line pseudo-element can only by applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

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

The ::first-letter Pseudo-element:

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

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

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: lightblue;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>

Output:

Note: ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element: 

  • 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

Multiple Pseudo-elements:

Several pseudo-elements can also be combined. In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>

Output:

CSS – The ::before Pseudo-element:

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each <h1> element:

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(siamesecat.jpg); 
 
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>
</html>

Output:

CSS – The ::after Pseudo-element:

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

The following example inserts an image after the content of each <h1> element:

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(siamesecat.jpg);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>
</html>

Output:

CSS – The ::selection Pseudo-element:

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

The following CSS properties can be applied to: ::selection: color, background, cursor, and outline.

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

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>

</body>
</html>

Output:

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.

A dropdown menu is a toggleable menu that allows the user to choose one value from a preferred list. 

Step 1: Add HTML

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Step 2: Add CSS

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

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>

Output:

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

Step 1: Add HTML

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">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>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

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

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

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

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  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: #ddd;
}

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

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">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>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>

Output:

Enjoy coding!

Categories
CSS Web development

CSS Display Property

To understand more web page layout you can back to the older posts (click here and here). Today we will concentrate on CSS layout – on display property. The display property is the most important CSS property to controlling layout.

The display property specifies 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 is 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 <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>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" 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>

<p>Display links as block elements:</p>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>

Output:

Enjoy coding!

Categories
CSS Web development

CSS Styling Links

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

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" 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. The four links states are:

a: link – unvisited link
a: visited – visited link
a: hover – a link when the user mouses 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: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

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

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Output:

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a: visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

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

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Output:

Examples of more advanced buttons: 

Example 1

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

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

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" 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 green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

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

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

</body>
</html>

Output:

Enjoy coding!

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. 

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>

<h2>This is the HTML Table</h2>

<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:

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>

<h2>This is the HTML Table</h2>
<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 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-collapseproperty.

Example:

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

<h2>This is the HTML Table</h2>
<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 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>

<h2>This is the HTML Table</h2>
<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:

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>

<h2>This is the HTML Table</h2>
<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:

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>

<h2>This is the HTML Table</h2>
<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:

To see more HTML/CSS colors press here.
Hope it helps, enjoy coding! 

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

1. HTML <div> tag

The <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:

2. HTML <span> tag

The HTML 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:

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>

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

</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: powderblue;
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>HTML Button</h2>

<button>Default HTML Button</button>
<button class="button">Styled Button with CSS</button>

</body>

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 <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:

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 with-in <!–…–> 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:

That’s all for now 🙂 
Enjoy coding!

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

Do you like this gif? Check more gifs in the store.

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 <heads> ection.


Example and output:

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

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:

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:

Enjoy coding!

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 behavior of web pages.

Web pages are not 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>

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

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

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

</body>
</html>

Output:

After pressing “Click Me!”: 

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>

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

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

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

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

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

</body>
</html>

Output:

After pressing “Turn on the light”:

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>

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

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

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

</body>
</html> 

Output:

 After pressing “Click Me”:

Enjoy coding!

Categories
JavaScript Web development

How to add JavaScript to HTML?

In some of my previous posts started appearing JavaScript, so why today I would like to explain more how to nest the code into HTML. You will learn more about JavaSript in later chapters, but today in a short introduction to post you need to know what JavaScript is and what JavaScript do. JavaScript is the programming language for the web and can update and change both HTML and CSS.

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("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

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

</body>
</html> 

Output:

Hope you find it helpful.Enjoy coding!

Categories
CSS HTML

Starting with HTML and CSS

My journey to becoming a web developer started from revising and learning HTML and CSS. 

Do you like this gif? Check more gifs in the store.

It went smoothly, as I mentioned in one of my previous post I was attending in HTML & CSS course a few years ago and also I was using these languages at work from a graphic designer point of interest. 
HTML and CSS are considered the easiest entry points into the coding, and there are mainly useful for developing basic websites, however in my opinion HTML and CSS is definitely the place to start for beginners learning to code. 

What is HTML and what is CSS?

Let’s start with a short definition of HTML and CSS.  


HTML (HyperText Markup Language) is it authoring language used to write Web Pages. 


CSS (Cascading Style Sheet) is used to define styles for Web Pages, including the design, layout, and variations of display for different devices. 


Once you have practiced for a while of HTML, you will notice quickly that you will need to learn CSS to style it (for example using fonts, colors on the page). Without using CSS your web page will look not really good with the default HTML styling, so CSS is the obligatory next step after HTML. 


I prepared a simple image, which can show you how the CSS works on HTML websites. 

I hope it will help you to understand more of HTML and CSS and you will like it. 


Enjoy coding!