#Images
To display images on a website as a background. CSS comes in handy. But just to display an image you use an img tag on HTML. If the HTML file and the image are in the same directory. all u have to do is just state the image's name with its extension in the src attribute inside the img tag.
<img src="car.jpg"> this code will definitely display the image if the images's name is "car.jpg" and if it is the same directory as the html file.
To display images on a website as a background. CSS comes in handy. But just to display an image you use an img tag on HTML. If the HTML file and the image are in the same directory. all u have to do is just state the image's name with its extension in the src attribute inside the img tag.
<img src="car.jpg"> this code will definitely display the image if the images's name is "car.jpg" and if it is the same directory as the html file.
#HTML Class and Id
These are the most important things in HTML since they help select elements in different things. either to style the html using css or make the page dynamic using javascript the elements have to be selected and this is where the class and id attributes comes in handy.
Both class and id are used to give the elements in html a specific name which can be used in other languages later. The difference between them is classes can be used many times. while id names are different with every html element. you cant use the same id name that you used in the previous lines of code.
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Here we used the class name two times and that is okay. But with id the names have to be different just like
<h2 id="city">Paris</h2>
<p id="capitalCity">Paris is the capital of France</p>
These are the most important things in HTML since they help select elements in different things. either to style the html using css or make the page dynamic using javascript the elements have to be selected and this is where the class and id attributes comes in handy.
Both class and id are used to give the elements in html a specific name which can be used in other languages later. The difference between them is classes can be used many times. while id names are different with every html element. you cant use the same id name that you used in the previous lines of code.
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Here we used the class name two times and that is okay. But with id the names have to be different just like
<h2 id="city">Paris</h2>
<p id="capitalCity">Paris is the capital of France</p>
#CSS
What is CSS?
CSS stands for cascading style sheets. It describes how HTML elements are to be displayed on screen. It takes the class, id and HTML tags to style them.
What is CSS?
CSS stands for cascading style sheets. It describes how HTML elements are to be displayed on screen. It takes the class, id and HTML tags to style them.
To use CSS in HTML there are three methods
1. Creating a file with a .css extension and linking it with the HTML using the link tag.(The most professional way).
2. using a style tag and putting all the styles in there
3. using inline method, adding the CSS directly to the element.
1. Creating a file with a .css extension and linking it with the HTML using the link tag.(The most professional way).
2. using a style tag and putting all the styles in there
3. using inline method, adding the CSS directly to the element.
What is your suggestion in the channel?
Anonymous Poll
61%
Continue writing articles like before on CSS and Javascript
21%
Make it a personal blogging channel on different projects
11%
Change your way of writing articles and create a better way of teaching
8%
Other
I am really sorry I have been passive lately. I will start posting at least every two days after now. I will be writing more articles about Basic CSS properties, positioning, media queries, some awesome CSS tips and tricks. So you can go design your very own website. Or even clone the famous websites online landing pages like netflix, itunes, microsoft..etc.
We basically apply CSS with classes, id and HTML tags. If you are using the most preferred way(creating an extra file with a .css extension) to apply CSS on classes and id is pretty easy we use "." to express classes and "#" to show id.
For example if I have a header with a class of "header-one" , a paragraph with an id of "paragraph-one" and an HTML tag of ul
We write it as
.header-one{
}
#paragraph-one{
}
ul{
}
and we put all the styles we want between the curly braces. As you can see for normal HTML tags we don't need any symbol to express it. Just writing the normal HTML tag would be enough.
For example if I have a header with a class of "header-one" , a paragraph with an id of "paragraph-one" and an HTML tag of ul
We write it as
.header-one{
}
#paragraph-one{
}
ul{
}
and we put all the styles we want between the curly braces. As you can see for normal HTML tags we don't need any symbol to express it. Just writing the normal HTML tag would be enough.
#colors
we can change the color of a text and a background through the color and background-color property respectively.
to write a property the property name must be followed by a colon the style we want and semi colon at last.
Example:
.header-one {
color: white;
background-color: black;
}
we can change the color of a text and a background through the color and background-color property respectively.
to write a property the property name must be followed by a colon the style we want and semi colon at last.
Example:
.header-one {
color: white;
background-color: black;
}
We can apply colors through 3 different ways. Hexadecimal values, Actual color names and RGBA values. Hexadecimal values are the most common ones, expressing colors in a six digit value preceded by a "#"
Example:
.header-one {
color: #ffffff;
background-color: #000000;
}
The hexadecimal value for pure white is 6 fs and 6 0s for a black color.(don't worry you don't have to memorize the hexadecimal values of every color. That would be actually impossible.) There is a great deal of websites online to generate the values you can imagine. like htmlcolorcodes.com.
Example:
.header-one {
color: #ffffff;
background-color: #000000;
}
The hexadecimal value for pure white is 6 fs and 6 0s for a black color.(don't worry you don't have to memorize the hexadecimal values of every color. That would be actually impossible.) There is a great deal of websites online to generate the values you can imagine. like htmlcolorcodes.com.
Padding and Margin
These two terms are pretty confusing in CSS. But the difference is easy to observe. Margin is basically the space around an element. While padding refers to the space between the element and the content inside it. To observe the difference create a simple button in HTML. and give it a class of btn
<Button class = "btn">Button</button>
And in the style
.btn{
margin: 10px;
}
Reload and observe the difference.
.btn{
padding:10px;
}
you can clearly see the difference on that.
These two terms are pretty confusing in CSS. But the difference is easy to observe. Margin is basically the space around an element. While padding refers to the space between the element and the content inside it. To observe the difference create a simple button in HTML. and give it a class of btn
<Button class = "btn">Button</button>
And in the style
.btn{
margin: 10px;
}
Reload and observe the difference.
.btn{
padding:10px;
}
you can clearly see the difference on that.
To put an image as a background in CSS seems a little overwhelming since the images position won't be as perfect as we want it. Whether to put an image on a specific part of the screen or to cover the whole screen as a background, following a little rule would make it a lot easier.
For a full background we would put the property on the body tag, so it can can be applied through the whole page, but that is not a good idea to do that if we are building a website that we actually scroll. In order for that to happen we need to wrap the whole thing in a div or a section tag. And give that a class or an id and give the property using css. The property on the css on an element that has a class of showcase would look like..
.showcase{
background: url('./showcase.jpg'); //the image must be on the same directory...if it was on another folder we would have to change the url. If that is hard, contact me through @jamesScript i would personally guide you through that.
.showcase{
Background: url('showcase.jpg');
background-size: cover; //makes the image not be cropped
Background-repeat: no-repeat; //this would make the image not get repeated and look horrendous.
Background-position: center; //this will position it at the center
height: 100vh; //this would give it the height of the whole screens, if you consider the screen as a 100 slices saying 100vh means saying 100 slices, saying 50vh means half the screens half slice..
These properties would position the image as the screen background..
For a full background we would put the property on the body tag, so it can can be applied through the whole page, but that is not a good idea to do that if we are building a website that we actually scroll. In order for that to happen we need to wrap the whole thing in a div or a section tag. And give that a class or an id and give the property using css. The property on the css on an element that has a class of showcase would look like..
.showcase{
background: url('./showcase.jpg'); //the image must be on the same directory...if it was on another folder we would have to change the url. If that is hard, contact me through @jamesScript i would personally guide you through that.
.showcase{
Background: url('showcase.jpg');
background-size: cover; //makes the image not be cropped
Background-repeat: no-repeat; //this would make the image not get repeated and look horrendous.
Background-position: center; //this will position it at the center
height: 100vh; //this would give it the height of the whole screens, if you consider the screen as a 100 slices saying 100vh means saying 100 slices, saying 50vh means half the screens half slice..
These properties would position the image as the screen background..
While adjusting positions and aligning items. With just a basic css, it is very complicated and hard. To do that, we use two basic css layout adjusters like Flexbox and CSS grid. Flexbox is basically for one layout dimensions either a row or columns. Grid was designed for two-dimensional layout. Rows and columns at the same time. For now we we'll see what a flexbox is, and it's common properties.