What is CSS ? What is its abbreviation? What is its use? How to implement a site with CSS in a responsive way? In this article, we will answer all these questions in simple language. To get acquainted with CSS, we suggest you read the HTML tutorial article in Irabrud.

 

what you need to know to develop a website – skill requirements for web

top 20 beat ’em up games of all time, best brawler games

what is 404 error and why does it occur

how to install windows 10 using DVD in only 3 Super easy steps

how to make android and apple batteries last longer ?

 

What is CSS ? What is its abbreviation?

CSS stands for cascading style sheet. Meaning parallel styling pages. This means that you can use CSS to describe your style and appearance in a separate file. The fact that these descriptions are done on a separate page is such that all our appearance points are stored in a separate file and it is enough to check it for minor changes. Of course, we have the ability to style pages within the HTML file itself, which we will examine in this article.

What is the use of CSS ? how does it work?

CSS describes the appearance of your site. For example in the text below

<Subject> Introducing Irabrod website <Subject>

<Top> Founded in 2020

Manager and founder Alireza Sedighi Fard <top>

<Paragraph> This website is an international online magazine that provides users with various topics such as art, education, cooking, etc. <Paragraph>

If you want to make your paragraph red and put your subject in the middle of the line, we describe these features in a separate file. Like the following lines

subject{

tex-align:center;

}

paragraph{

color:red;

}

 

consider that the code above was to let you know what is CSS for the better, and it doesn’t work properly. In this case, if you write the address of your CSS location in the HTML file, the mentioned points will be applied to your HTML.

 

what is CSS abbreviation ? what is CSS used for ? and how to use it

How to use CSS in HTML ?

You have three ways

The first way:

You write and save your CSS lines in a separate file. Then put the saved CSS address in HTML as follows.

<link rel="stylesheet" type="text/css" href="adress of css file">

The second way:

In the HTML file, write all the CSS lines between the two style tags .

<style>

css lines

</style>

The third way:

Write its specific properties inside the lines of each HTML section.

<h1 style="text-align:center;">

introduction to irabrod

</h1>

<p style="color:red">

This website is an international online magazine that provides users with various topics such as art, education, cooking, etc.

</p>

Simple CSS tutorial – Simple and fast CSS tutorial

How to specify attributes for HTML elements, how to specify which elements we want to describe.

One way is to assume that all h1s are red. To do this, just use the name of the HTML tags in CSS, as follows:

h1{

color:red;

}

But what if we want some of them to be red and some to be blue? We can classify them, for example, the red class determines which h1s are red, and the blue class determines which ones are blue. We put a dot in the CSS file before the class name.

in HTML file

<h1 class="blue or red">

In CSS file

.red{

color:red;

}

.blue{

color:blue;

}

The next solution is to select different id elements. In CSS we use # before the id name.

In HTML file

<p id="color">

In CSS file

#color{

color:red;

}

 

what is CSS abbreviation ? what is CSS used for ? and how to use it

Texts

Basically, we describe texts with their fonts, color, size, left-aligned, right-aligned, and center-aligned. To describe the texts, pay attention to the following text.

.txt{

font-family:name of the fonts you want to use;

text-align:left or right or center;

color: rgb()or #color code or color name;

 font-size: size of the font;

}

Note that RGB makes the color you want from the combination of green, blue, and red. For example (blue, green, red), the value you specify should be at most 255. Another solution is to choose the color code that is placed after #. Or you can just name the color .

Borders and corners

Elements can have borders. Borders can be thick or thin, have style, have color. And even the corners of the element are oblique or sharp.

#border{

border: 4px dotted blue;

//from left to right is the thickness , style and color of border

border-radius:5px;

//corners will be 5 pixel radius oblique

}

You can set the right border only with border-right and only the bottom, top, and left borders with border-left border-top border-bottom, respectively.

Places and distances

An element can have an inner distance (the distance from the content to the border), which is determined by padding, and an external distance, that is, the margin that determines the distance from the element to the other elements.

#dist{

margin:30px;

padding:10px;

}

Like border, these features can only be set to the left, right, or top, and…

The location of an element can be specified by position. For example, relative determines that the distance is determined by other elements. Or sticky stays in place by moving on your element page. Or static, which specifies that the elements are placed one after the other.

#position{

position:relative, absolute, sticky;

}

 

Responsive CSS training

Why should we develop websites responsibly?

Today, sites do not just belong to computers. The majority of Internet users today have phones with different screen sizes. In addition, tablets also use the Internet. If a website is not responsive, on mobile phones and the user has to zoom out the page a lot to be able to see the whole site, in which case the texts become so small that they are not readable.

 

what is CSS abbreviation ? what is CSS used for ? and how to use it

How to write CSS responsively ?

Use percentages

Use percentages for elements such as width or length. For example, a photo should take 40% of the page width. Or 30 percent away from the left corner. In this case, this percentage will act based on the size of the pages and will give dynamism to your site .

.img{

margin : 50% 50%;

width:20%;

height:100%;

}

Use of transverse functions

Another solution is to set specific sizes for each page width

For example, if the default and default template of our website for text A and image B are as follows.

.A{

font-size:10pd;

color:white;

}

.B{

width:1000px;

{

We can use the following functions to determine what specific sizes we have for each page width size. For example, below we have made changes to the default format for 300px and 800px page sizes.

Note that at 800px we have not changed the font size, so the default size is 10pd. Also, we have not changed the color of the fonts at all, so the default color is set.

@media (max-width: 300px){

.B{

width:250px;

}

.A{

font-size:8pd;

}
}

@media (max-width: 800px){

.B{

width:500px;

}

}


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

RABROD

Copyright © · All Rights Reserved designed & developed by · irabrod.ir