HTML and CSS

Keywords: Programming Javascript JQuery Google

HTML fill in blanks with placeholder text

<h1>Hello World</h1>
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<h1>Hello World</h1>
<h2>Hello html</h2>
<p>Hello Paragraph</p>

HTML change color of text

< H2 style = "color: Red" > HTML programming tutorial</h2>
<p>In your mind, maybe programming is a very difficult thing,
In fact, it's also a very fun thing, as long as you master the programming
 The method of door, can enter a brand-new creation world slowly. </p>

Using CSS selectors to define labels

<style>
    h2 {color:blue;}
</style>
<h2 >html Getting started with programming</h2>

<p>In everyone's mind, programming may be a very difficult thing, but it is also a very fun thing. As long as you master the method of programming entry, you can slowly enter a new creative world.</p>

Use a CSS Class to define a Style for a label

<style>.red-text{
    color:red;
}
</style>

<h2 class="red-text">html Getting started with programming</h2>

<p>In everyone's mind, programming may be a very difficult thing, but it is also a very fun thing. As long as you master the method of programming entry, you can slowly enter a new creative world.</p>

HTML uses CSS classes to define styles for multiple elements

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">html Getting started with programming</h2>

<p class="red-text">In everyone's mind, programming may be a very difficult thing, but it is also a very fun thing. As long as you master the method of programming entry, you can slowly enter a new creative world.</p>

HTML sets the font size of the label

<style>
  .red-text {
    color: red;
  }
  p {font-size:16px;}
</style>

<h2 class="red-text">My cat</h2>

<p class="red-text">In everyone's mind, the cat is a lazy and lovely incarnation. It can get up to eat when it's full of sleep. It can amuse little mice. It can sell cute and make them bad. So the changeable little monsters will gather on a pet. How can they not be loved.</p>
<p>When raising animals, it's between love and hate. When you admire other people's cute adoration, you never think that dogs and cats will shit everywhere, even collect rats, chew shoes and climb the door with their claws. If you ignore it, it will scratch you. If you lose your temper with it, it will be more energetic than you. Therefore, dogs and cats should be careful and not be prepared to take care of animals. Once they recognize you, you are their master. If you abandon them, they will be devastated.</p>

HTML sets the font style of the label

<style>
.red-text {color: red;}
p {font-size: 16px;font-family:Monospace;}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">In everyone's mind, programming may be a very difficult thing, but it is also a very fun thing. As long as you master the method of programming entry, you can slowly enter a new creative world.</p>
<p>There are many programming languages that can be learned. There are a lot of practical programming experiments in our training camp, including Html,css,Javascript,jquery,bootstrap Wait for the front-end programming practice course, please be patient to continue to learn and pass a round of challenges by stages, I believe that your programming technology will be greatly improved soon, and be ready to find a good programming job.</p>

Introducing Google fonts

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Maybe programming is a very difficult thing, but it's also a very interesting thing</p>
<p class="red-text">There are many programming languages to learn</p>

HTML processing multiple font degradation

<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">In everyone's mind, programming may be a very difficult thing, but it is also a very fun thing. As long as you master the method of programming entry, you can slowly enter a new creative world.</p>
<p class="red-text">There are many programming languages that can be learned. There are a lot of practical programming experiments in our training camp, including Html,css,Javascript,jquery,bootstrap Wait for the front-end programming practice course, please be patient to continue to learn and pass a round of challenges by stages, I believe that your programming technology will be greatly improved soon, and be ready to find a good programming job.</p>

HTML add picture to page

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">html Getting started with programming</h2>
<img src="/statics/codecamp/images/relaxing-cat.jpg">
<p class="red-text">Kitty, Kitty, I love you</p>

HTML resizing pictures in web pages

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.smaller-image{width:100px;}
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text" class="red-text">CatPhotoApp</h2>

<img class="smaller-image" src="/statics/codecamp/images/relaxing-cat.jpg">

<p class="red-text">In everyone's mind, programming may be a very difficult thing, but it is also a very fun thing. As long as you master the method of programming entry, you can slowly enter a new creative world.</p>
<p class="red-text">There are many programming languages that can be learned. There are a lot of practical programming experiments in our training camp, including Html,css,Javascript,jquery,bootstrap Wait for the front-end programming practice course, please be patient to continue to learn and pass a round of challenges by stages, I believe that your programming technology will be greatly improved soon, and be ready to find a good programming job.</p>

Posted by doozerdc on Wed, 20 Nov 2019 09:19:49 -0800