JustToThePoint English Website Version
JustToThePoint en español

Maximize your online presence with our exclusive offer: Get a stunning hero banner, the hero you need and deserve, at an unbeatable price! Bew, 689282782, bupparchard@gmail.com

HTML and CSS. Create a custom WordPress Theme.

HTML

HTML is a markup language that web browsers use to interpret and compose text, images, and other material into visual or audible web pages.

<! DOCTYPE html>
<html lang="en"> <!-- It defines the document's primary language as English. -->
<head> <!-- It contains metadata about the document. -->
<meta charset="UTF-8"><!-- It defines the document's encoding character set. -->
<meta name="description" content="Learning HTML in JustToThePoint" /> <!-- It provides a short description of the page. -->
<meta name="author" content="Máximo Núñez Alarcón (Anawim)” /> <!-- It defines the document's author. -->
<meta name="keywords” content="Html, tags, Css, Markup language, Learn Html” /> <!-- It defines keywords that describe the document. -->
<meta name="robots" content="index,follow"/> <!-- It defines how search engines should index the page, e.g., they should index the page (index) and the page's links should be followed and indexed (follow), too. -->
<script src="js/myJavascript.js"></script> <!-- It defines the location of an outside JavaScript file. -->
<link rel="stylesheet" href="styles.css"/> <!-- It defines the location of the style sheet. -->
<link rel="icon" href="favicon.ico" type="image/x-icon"/> <!-- It defines the location of the favicon. -->
<title>Html Tutorial</title> <!-- This is the title for our page. -->
</head>
<body>
<h1>H1, H2,... H6 represent six levels of section headings. H1 indicates the document's main topic.</h1>
<p>The p tag stands for paragraph and is used to define a paragraph in HTML.</p>
<hr> <!-- It draws a line across the document. -->
<br> <!-- It produces a line break in text. -->
<a href="https://www.w3schools.com/html/default.asp">Html Tutorial</a>  <!-- It defines a link. -->
</html><! DOCTYPE html>
<html lang="en"> <!-- It defines the document's primary language as English. -->
<head> <!-- It contains metadata about the document. -->
<meta charset="UTF-8"><!-- It defines the document's encoding character set. -->
<meta name="description" content="Learning HTML in JustToThePoint" /> <!-- It provides a short description of the page. -->
<meta name="author" content="Máximo Núñez Alarcón (Anawim)” /> <!-- It defines the document's author. -->
<meta name="keywords” content="Html, tags, Css, Markup language, Learn Html” /> <!-- It defines keywords that describe the document. -->
<meta name="robots" content="index,follow"/> <!-- It defines how search engines should index the page, e.g., they should index the page (index) and the page's links should be followed and indexed (follow), too. -->
<script src="js/myJavascript.js"></script> <!-- It defines the location of an outside JavaScript file. -->
<link rel="stylesheet" href="styles.css"/> <!-- It defines the location of the style sheet. -->
<link rel="icon" href="favicon.ico" type="image/x-icon"/> <!-- It defines the location of the favicon. -->
<title>Html Tutorial</title> <!-- This is the title for our page. -->
</head>
<body>
<h1>H1, H2,... H6 represent six levels of section headings. H1 indicates the document's main topic.</h1>
<p>The p tag stands for paragraph and is used to define a paragraph in HTML.</p>
<hr> <!-- It draws a line across the document. -->
<br> <!-- It produces a line break in text. -->
<a href="https://www.w3schools.com/html/default.asp">Html Tutorial</a>  <!-- It defines a link. -->
</html>

Character entities

They are used to display reserved characters in HTML: &euro; &dollar; &commat; &pound; &yen; &copy; &deg; &frac14; &frac12; &frac34; &alpha; &beta; &gamma; &delta; &Sqrt; &le; &ge; &ne; &infin; &radic;

€ $ @ £ ¥ © ° ¼ ½ ¾ α β γ δ √ ≤ ≥ ≠ ∞ √

Fractions in HTML

<sup>1</sup>&frasl;<sub>2</sub>

1⁄2

HTML Formatting Elements

<sup>Bold</sup>, <i>italic</i>. Superscript / Subscript: 4<sup>2</sup> = 16, CO<sub>2</sub>

Bold, italic. Superscript / Subscript: 42 = 16, CO2

Embed PDF, HTML, and videos

	<object data="miPdf.pdf" type="application/pdf" width="550" height="400"></object>
	<object data="miHtml.html" type="text/html" width="550" height="400"></object>
	<object data="movie.mp4" width="400" height="300"></object>

CSS

We are going to custom the CSS for a WordPress Site. First, most WordPress themes will take your post/page title and insert an H1 heading, as well as setting the title tag:

@font-face { 
	/* It allows custom fonts to be loaded on your webpage.*/
	font-family: 'optimistic'; /* Defines the name of the font.*/
	src: url('.../../../fonts/optimistic.eot'); /* Defines the URL where the font is located or should be downloaded from. */
	src: local('☺'), url('../../../fonts/optimistic.woff') format('woff'), url('../../../fonts/optimistic.ttf') format('truetype'), url('../../../fonts/optimistic.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Ribeye Marrow';
	src: local('☺'), url('../../../fonts/Ribeye-Regular.woff2') format('woff2'), url('../../../fonts/Ribeye-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}
h1.entry-title, h1 
{
	font-family: optimistic; /* It specifies the font for the element. */
	font-weight: 100;
	color: #aabbff; /* It sets the foreground color. */
	text-shadow: 2px 2px #000000; /* It adds shadow to the text */
}
h2 {
	font-family: optimistic;
	font-weight: 90;
	color: #aabbff;
	text-shadow: 1px 1px #000000;
}
body {
    background-image: url('https://www.justtothepoint.com/wp-content/uploads/2018/03/background.jpeg'); /* It sets a background image for the page. */
    background-repeat: repeat-y; /* It repeats on the y-axis, vertically. */
    background-position: top center; /* It specifies the position of the background image. */
    background-attachment: fixed; /* The background is fixed relative to the browser window. */
}

CSS selectors

A CSS selector allows you to select the HTML element that you want to style.

p{     
	font-family: Palatino, serif;     
	color: yellow; 
}

#myParagraph{     
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;     
	color: black;     
	font-style: italic; 
}

p.myClass{     
	font-family: Arial, sans-serif;     
	color: red;     
	font-style: italic;     
	font-size: 200%; 
}

Css

We can select all <li> elements inside <ol> elements under a div with a specified id. You can learn more about CSS selector in MDN Web Docs, References, CSS.

#tutorial ol li {     
	color: blue; 
}

Lists

	<ul id="navlist">

A CSS selector uses the ID attribute of an HTML element to select it.

		<li>There are three types of lists: Unordered, Ordered, and Definition.</li> 
		<li>Unordered lists have round, solid bullets by default.</li> 
	<ul>

#navlist /* To specify an ID in your style sheet (CSS), you simply put a hashtag (#) followed by the ID. */
{
 	list-style-image: url("images/iconos/bullet.png") 
	/* It replaces the list-item marker with our own image (bullet.png). */
}
#navlist li
{
	padding: 5px 0px 0px 5px;
	margin: 1em auto;
}
  1. Ordered or numbered lists are displayed with numbers on your web pages. They are used when the sequence of the items is important.
  2. We can style our ordered lists in CSS. Credits: SW4, stackoverflow.com. We will use CSS counters to change the numbering on ordered lists.
<ol id="navlist2"> 
	<li>Ordered or numbered lists are displayed with numbers on your web pages. They are used when the sequence of the items is important.</li> 
	<li>We can style our ordered lists in CSS. Credits: SW4, stackoverflow.com. <strong>We will use CSS counters to change the numbering on ordered lists</strong>.</li>
</ol>

#navlist2 ol {
   list-style-type: none;
   counter-reset: my-counter; /* A counter needs to be initialized properly. We initialize it to the default value (0).*/
}
#navlist2 li {
   counter-increment: my-counter; /* Once initialized, a counter's value can be increased using counter-increment.*/
   margin-bottom: 5px;
   list-style-type: none;
}
#navlist2 li:before {
   margin-right: 10px;
   content: counter(my-counter); /* It displays the counter by using the counter() function.*/
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.8em;
   text-align: center;
   display: inline-block;
}

Html Lists

Html Lists

Blockquotes

Blockquotes are html elements that are meant to designate when a particular paragraph or text is being taken from another source. They are specified using the standard HTML blockquote element:

	<blockquote>

.entry-content blockquote.style1 {
	font-size: 22px;
	font-family: "Ribeye Marrow";
  	padding: 0.5em;
  	background-color: #D1EFD7; /* It sets the background color of this element. */
  	border-top: 1px solid #e1cc89;
	border-bottom: 1px solid #e1cc89;
    	border-radius: 10px; /* It gives the blockquote rounded corners. */
	border: none;
	margin: 1em;
	background-image: url(images/iconos/openquote1.gif); /* It adds a quote mark -openquote1.gif- */
	background-position: top left; /* at the upper left.*/
	background-repeat: no-repeat;
	text-indent: 23px;
}

blockquote::first-letter { /* It selects and styles the first letter of every blockquote element. */
	font-size: 150%;
	font-family: "Dancing Script", "Monotype Corsiva", "Apple Chancery";
	font-weight: bold;
}

blockquote cite {
	color: #2e7d32;
	font-size: 30px;
	display: block;
	margin-top: 5px;
	text-align: right; /* The cite element is aligned on the right */
}

Use (Html):

	<blockquote class="style1">It is our choices, Harry, that show what we truly are, far more than our abilities,<cite>Harry Potter</cite></blockquote>

It is our choices, Harry, that show what we truly are, far more than our abilities, Harry Potter

Paragraphs and images

A paragraph is a block of text or a group of sentences that convey an idea. The <p> tag defines an HTML paragraph.

moz and webkit are vendor-prefixed properties (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer) used to implement new or proprietary CSS features. Browser vendors are now trying to get rid of vendor prefixes for experimental features.

p.bordes_redondeados
{
		-moz-border-radius: 10px; /* We use the border-radius property to add rounded corners to an image -moz-border-radius (firefox) and -webkit-border-radius (chrome and safari) are used for backwards browser compatibility.*/
		-webkit-border-radius: 10px;
                border-radius: 10px;
		color: white; /* It defines the text color for the paragraph. */
		background-color: #00999F; /* It defines the background color for the paragraph. */
		outline:none;
		padding: 1em;
}

p.bordes-y-sombra
{
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		padding:  1em;
		color:  white;
		background-color: #00999F;
		-moz-box-shadow: 2 2 5px rgba(0,0,0,1); /* We use the box-shadow property to add a shadow effect around the paragraph. */
		-webkit-box-shadow: 2 2 5px rgba(0,0,0,1);
 		box-shadow: 2px 2px 5px rgba(0,0,0,1); 
}

Use:

<p class="bordes_redondeados">A paragraph is a block of text or a group of sentences that convey an idea. The "p" tag defines an HTML paragraph.</p>

<p class="bordes-y-sombra">moz and webkit are vendor-prefixed properties (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer) used to implement new or proprietary CSS features. Browser vendors are now trying to get rid of vendor prefixes for experimental features.</p>

The HTML Image Element

<img>

is used to insert an image in a document and its src attribute specifies the path to the image file. We can style every image in CSS with the img selector

img
{
	-moz-border-radius: 10px; /* We use the border-radius property to add rounded corners to an image. -moz-border-radius (firefox) and -webkit-border-radius (chrome and safari) are used for backwards browser compatibility.*/
	-webkit-border-radius: 10px;
	border-radius: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto
	-moz-box-shadow: 2 2 5px rgba(0, 0, 0, 1); /* We use the box-shadow property to add a shadow effect around the image. */
	-webkit-box-shadow: 2 2 5px rgba(0, 0, 0, 1);
 	box-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}
<img src="https://justtothepoint.com/wp-content/uploads/2022/03/Internet2.jpeg" alt="Learning HTML" />

You are the CSS to my HTML

Displaying code

pre stands for “preformatted text”, it allows for the white spaces within the tags to actually be honored. It is used to display code which is to be presented exactly as written in the source code file.

code {
   font: 13px Monaco;
   background-color: transparent;
   color: skyblue;
}
pre {
   background: #333;
   color: white;
   padding: 2px;
   margin: 0 0 18px 0; 
}
pre[data-lang]::before { /* The data-* attribute gives us the ability to embed custom data attribute on HTML elements.*/
  border-bottom: 2px solid grey;
  content: attr(data-lang); /* attr() returns the value of the attribute data-lang (CSS) of the selected element (pre). */
  display: block;
}

Use:

	<pre data-lang="HTML">
		<code>code {
			font: 13px Monaco;...
		</code>
	</pre>

Let’s see another snippet or idea in CSS:

div.CodeBox { /* A div (document divisions) is a block-level container, it divides elements into groups.*/
    border: 2px solid #000080;
    padding: 2px;
    background-color: #BFD1E4;
}
pre.LineNumbers {
    float: left; /* The float property is used for positioning content. We are letting the "pre.Source" element float on the left side of its containing block.*/
    float: left;
    padding: 1px;
    border-right: 1px solid #000;
    margin: 0 0 1em;
    line-height: 2; /* It sets the height of a line box. */
}
pre.Source {
    display: block;
    padding: 4.5px;
    margin: 0px 0px 10px;
    font-size: 23px;
    line-height: 1.42857;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
    background-color: #BFD1E4;
    border: 1px solid #BFD1E4;
    border-radius: 0px;
}

Use:

<div class="CodeBox">
	<pre class="LineNumbers">
		1
		2
		3
		4
		5
	</pre>
	<pre class="Source">
		reset
		repeat 4 {
  			forward 100
  			turnleft 90
		}
	</pre>
</div>

Image

Replacing hr

The HR (horizontal rule) element is used to create a horizontal line or a thematic break in HTML, but with our CSS style sheet, you can change how they look.

.sexy_line{
    display: block;
    border: none;
    color: white;
    height: 1px;
    background: green;
    background: gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff)); /* It creates a transition between two colors along a straight line. */
}

Use:

<div class="sexy_line"></div>

p, ul, blockquote {
	 user-select: none; /* This feature is non-standard. It tries to stop visitors from copying copyright-protected content. */
}

Tooltip

.tooltip { /* The tooltip is placed inside a class. */ 
	border-bottom: 1px dotted #000000; color: #000000; outline: none;
	cursor: help; text-decoration: none;
	position: relative;
}
.tooltip span { 
	visibility: hidden; /* The tooltip is hidden by default. It will be only visible on hover.*/
	position: absolute;
}
.tooltip:hover span { /* The :hover selector is used to show the tooltip when the user moves the mouse over it.*/
	visibility: visible;
	border-radius: 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; /* The tooltip will have rounded corners...*/
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); /* ... and a shadow. */
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute;
	z-index: 1;
	top: -5px;
        left: 100.2%;
        width: 200px;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background: #9FDAEE; border: 1px solid #2BB0D7;
}

Use:

<a class="tooltip" href="https://www.justtothepoint.com/">
	<img src="myFlag.png" alt="English Website Version" align="left"/>
	<span><img src="myInfo.png" alt="Information" height="36" width=" 36"/>English</span>
</a>

Div and boxes

Let’s create a div with three boxes put side-by-side. A div is a block-level element This is the end result: Image

#contenedor-libros
{
	width: 100%;  		
	display: inline-block; /* We can use it to display elements horizontally. */
}

#contenedor-libro
{
	background-color:white;
	border: 1px solid grey;
	width: 30%; /* It specifies the box's width. It will be 30% as wide as their parent container, so we can have three boxes in one line horizontally. */
	height: 27em; /* It specifies the box's height. 27em means 27 times the size of the current font.*/
	margin:	1%;
	text-align:center;
	padding:0.5em;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	border-radius:10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,1);
}

Empty paragraphs between <p></p> tags can be very annoying as they add empty white spaces to your page. Sometimes, WordPress adds paragraphs tags to the content. You can include the following line to your functions.php

	remove_filter('term_description','wpautop'); 

#contenedor-libro p { 
    display: none; /* Elements with display: none do not take up space. */
    margin: 0px !important;
    border: 0px !important;
    padding: 0px !important;
}

#imagen-libro /* It specifies the image element. */
{
	width:100%;
	margin: 0 auto; /* It will sit centrally within its parent container (margin: 0 auto;). */
	border-radius:10px; /* It gives the image rounded corners. */
}

.boton, .boton-info, .boton-quiz { /* It specifies the bottoms. */
	background-image: linear-gradient(to bottom, #3498db, #2980b9); /* It creates an image consisting of a progressive transition between #3498db and #2980b9*/
  	border-radius: 10px;
  	font-family: Dancing Script, Helvetica, Geneva, sans-serif; /* It defines the font family, color, and size of the text inside the button. */
  	color: #ffffff;
  	font-size: 1em;
  	padding: 0.5em 0.5em;
	text-decoration: none;
	display:block !important;
	font-weight: bold;
	width:100%;
	margin:0.5em auto;
	line-height:1.5em;
}

.boton:hover { /* We use the :hover selector to style the button when the mouse is over it. */ 
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
	color:black;
}

#botones-libro  /* It specifies the div with the Quiz and +info bottoms. */
{
	display: inline-block; /* It is used to display the Quiz and +info buttons horizontally. */
	width:100%;
	margin: 0;
	padding:0;
}

#botones-libro ul
{
	width: 100%;
	text-align: center;
}

#botones-libro li
{
	display: inline-block;
	list-style: none;
	width: 45%;
}

Use:

<div id="contenedor-libros">
	<div id="contenedor-libro">
		<a href="mybook.html">
			<img id="imagen-libro" src="myBookImage.png" alt="fight"/>
		</a>
		<a class="boton" href="mybook.html">Do not fight!</a>
		<div id="botones-libro">
			<ul>
				<li>
					<a class="boton-quiz" href="myQuiz.html">Quiz</a>
				</li>
				<li>
					<a class="boton-info" href="myArticle.html">+info</a>
				</li>
			</ul>
		</div>
	</div>
	<div id="contenedor-libro">
		<a href="mybook2.html">
			<img id="imagen-libro" src="myBookImage2.png" alt="fight"/>
		</a>
		<a class="boton" href="mybook2.html">The five apprentices!</a>
		<div id="botones-libro">
			<ul>
				<li>
					<a class="boton-quiz" href="myQuiz2.html">Quiz</a>
				</li>
				<li>
					<a class="boton-info" href="myArticle2.html">+info</a>
				</li>
			</ul>
		</div>
	</div>
	<div id="contenedor-libro">
		<a href="mybook3.html">
			<img id="imagen-libro" src="myBookImage.png" alt="fight"/>
		</a>
		<a class="boton" href="mybook3.html">Martha and the twins!</a>
		<div id="botones-libro">
			<ul>
				<li>
					<a class="boton-quiz" href="myQuiz3.html">Quiz</a>
				</li>
				<li>
					<a class="boton-info" href="myArticle3.html">+info</a>
				</li>
			</ul>
		</div>
	</div>
</div>

divBoxes

Bitcoin donation

JustToThePoint Copyright © 2011 - 2024 Anawim. ALL RIGHTS RESERVED. Bilingual e-books, articles, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun. Social Issues, Join us.

This website uses cookies to improve your navigation experience.
By continuing, you are consenting to our use of cookies, in accordance with our Cookies Policy and Website Terms and Conditions of use.