0

congratulation! You have found the best and easiest way to learn CSS 🙂

This training is suitable for beginners and professionals. Training start from the beginning and gradually becomes more advanced. CSS stands for Cascading Style Sheets and is used for style and layout web pages. CSS describes how the HTML elements are to be displayed. For example, changing the color, font, size, position, background, etc. are the things we do with CSS. The following code is a simple example is to provide basic familiarity you put in here.

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

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: Arial;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>First CSS Example in pinkpen.net</h1>
<p>hello world!</p>

</body>
</html>

In the above code, we used CSS to make the background of the site pink and to whiten and center the color of the heading text. We also set the paragraph text size to 20 and chose the font type Arial.

CSS Syntax

General Syntax CSS code is as follows: selector { property : value }

the selector is the part where we want to edit the style and Property is one of the HTML attributes we want to edit. It can be color, size, font, or anything. The last part is the value, which specifies the value of the attribute.

h1 {
color: red;
 text-align: center;
}

Selectors

the selector is the part where we want to edit the style which has different modes that we will teach you in the following.

element Selector

selects HTML elements based on the element name. For example, h1 is an element whose color has changed to blue. p {colorblue;}

The CSS Class Selectors

You may define style rules based on the class attribute of the elements. All the elements of the class will be formatted according to the defined rule.

.red {
   color: red; 
}

In this code all HTML elements with class = “red” will be red. Or you can even use the following code. In this code, all the h1 defined in the red class are center-aligned.

h1.red{
  text-align: center;
}

Universal Selector

 selects all HTML elements on the page. The following rule applies to all elements on the site page. For example, all texts turn black.

* {
  color: black;
}

Grouping Selector

We put all the elements for which we have the same attributes in one group and define them once. For example, in the code below, all h1, p , and h3 turn blue

h1, h3, p {
  color: blue;
}

How to use CSS on our site

The first method is to add CC Inline

In this method, the CSS codes are placed inside HTML, and the styles we define only affect the same element and are not public.

<element style = "style rules">
<h1 style = "color:red;"> 
This is red heading 
</h1>

the h1 element turns red, but the other h1s do not change. In other words, an inline style may be used to add a specific style to a single element.

The second way is to add CC external

In this way, we write the CSS code in a separate file and then link to that file in HTML code. An external style sheet is a separate text file with a CSS extension in which you write all the CSS commands and rules and use the link element to connect those rules to your HTML page.

style.css

body {
  background-color: blue;
}

h2 {
  color: black;
}

index.html

<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>pinkpen heading</h2>
</body>

The background of the HTML screen turns blue and the h2 turns black.

The last way to add CSS is Internal

This is like an external way and the only difference is that instead of writing the rules in a separate file, we put them in the head and inside the style tag.

<head>
<style>
body {
  background-color: red;
}
h2 {
  color: black;
}
</style>
</head>
<body>
<h2>pinkpen heading</h2>
<p>first paragraph.</p>
</body>

Learn how to use comments in CSS

Comments are just so that the next time you want to check or edit your code, you can easily understand your code. Comments are not displayed in the output at all. In CSS, we put the comments between / *. And you can put comments anywhere in the code you want. The following example will show you better how to use comments in CSS.

/* This is first comment */
h1 {
  color: blue; /* This is secend comment */
}

Colors

There are several ways to specify a color, the most common of which is to use their names and hex code. You can use the PinkPen color maker to generate the code of your favorite colors. Click on this link to use the color maker.

To select the text color, just use the color attribute. In the following example, we make the titles red and the text blue.

<h1 style="color:red;">pinkpen.net!!</h1>
<p style="color:Blue;">welcome to webmaster home</p>

We can also use colors in the background of pages, paragraphs, and sections. To edit the background color in CSS, we use the background color attribute. In the following example, we make the entire page black and red the paragraph background.

<body style="background-color:black;">
<p style="background-color:red;">welcome to webmaster home</p>

The last use we make of colors is to choose the border color of the parts. To do this, you must select the desired thickness and color, for example, in the following code, we select red color and 3 pixel thickness.

<h1 style="border:3px solid pink;">pinkpen!</h1>

CSS Backgrounds

Using CSS commands you can set the background for your pages or sections. This background can be color, photo, movie, etc. In this article, we will teach you some simple ways to change the background.

The first method we teach you is background-color. Using this attribute, you can edit the background color of an element and turn it into your favorite color. I explained this to you in the previous paragraph.

h4 {
  background-color: green;
}
div {
  background-color: blue;
}
h2 {
  background-color: red;

But often it is not enough to change the background color and you like to put a photo in the background of the site. In these cases, we use the background-image attribute. Learn how to do this with the following example.

body {
  background-image: url("image.png");
}
h1 {
  background-image: url("image.png");
}

You can use the following attributes for background photo settings. The background-attachment attribute is for the background image to degrade or be fixed by scrolling. The background-repeat attribute determines whether the background image is repeated. For example, if you select a very small image, you must enable this attribute to cover the entire page background. You must use the background-position attribute to select the background image position. Perhaps a bit confusing, the example below completely simplifies these concepts for you.

body {
  background-color: #ffffff;
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: left top;

Basic CSS training is over. For better learning and more exercises, be sure to use our site’s online compiler. One of the best compilers on the market that is completely free. Click here to enter the compiler.

moji

moji

I am a computer engineering student, I have been working in SEO and WordPress for almost 8 years and I also have programming skills.

Leave a Reply

asdas

Copyright © 2019 pinkpen.net