Programming Diaries

2021-02-23 10:12:44 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Open / Comment

2021-02-23 10:12:40 This link would give a lot of information on flexbox. Enjoy! Open / Comment

2021-02-23 10:12:01 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. Open / Comment

2021-01-27 11:58:44 @Prodbrook Open / Comment

2021-01-22 19:41:37 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.. Open / Comment

2021-01-19 15:42:12 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

And in the style
.btn{
margin: 10px;
}
Reload and observe the difference.

.btn{
padding:10px;
}

you can clearly see the difference on that. Open / Comment

2021-01-15 19:46:06 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. Open / Comment

2021-01-15 19:32:23 This would give the text a white color with a background of black. Open / Comment

2021-01-15 19:31:28 #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;
} Open / Comment

2021-01-15 19:27:57 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. Open / Comment