Bootstrap the framework of CSS

Hello everyone, 

In this post I like to share about bootstrap. As we know how to write html and css we can easily handle bootstrap. To understand bootstrap we can think like a external style sheet already designed for us.

Yes They had designed unique and simple designs to all the elements and also they gave us the classes only to apply in specific place.

Lets understand how easy is to use bootstrap insted of hard code(code everything by typing).

Lets say like this we have designed a website having three paragraph elements. for the first element we like to apply padding and for the secound one we like to apply padding little biggerthan first paragraph and for the third one we like to remove margin and padding.

So here we have to give all the three paragraphs different classes and then go to the external stylesheet and then we have to write for every classes padding 1rem for the first paragraph padding 1.2em for secound paragraph and for the third we have to write padding 0 and margin 0.

But if we use bootstrap we can easily apply p-1 class for paragraph one p-2 class for paragraph 2 and p-0, m-0 to paragraph 3. That is this much simple to write code. You can save time in typing and spend it in designing or thinking of the layout.

For bootstrap we have to know some words to remember for example p for padding and 0 to 5 according to the size of it.

But also bootstrap gives us special and easy to remember names. Lets take this example, if we want to apply margin left  we can use 'm' for margin and 'l' for left and then number for the size. For standared size we can apply ml-2 in the elements class.

These are very simple methods they also offer us nav bar carosals cards and many much more to explore them just click here.

Responsive design using css

Nice to see you in another post.
In this post I like to discus some of the techniques we can use to design a responsive website using css.
Although technology is growing much we should adopt to it so that we can survive. I understand it is not the time for motivation.
The think I like to discuss in this post is how to design our site responsive.

got it from bluecorona.com

What is responsive?

When we design our site using our computer. Normally we check the site in computer only and in maximized window. But when it comes to user they could use it in their smart phones or in some other devices, some times they could visit our site using minimized browsers window.
CSS3 carries many new features for it. But here I like to share some techniques to use to make our site responsive.

Percentage

We can add percentage to design a responsive site. If our nav bar should be fill the view port we can add naves bar width as 100% instead of giving it in pixels. so that you will get a responsive design.

vh and vw

Although percentage is working it is not fulfilling the exact purpose. So we can use vh and vw. vh and vw refers view port height and view port width respectively. Same like 100 vw means full view port and 50 vh means half of view ports height. If view ports width is 110px 1vw is 1.1px.
The percentage acts from its parent element. but vh or vw acts its full view ports size.

em and rem

em is specially used to define font size. with the root font size it will select its own size. for example if we fixed it with px or pt we may not change it responsive but if we give it with em or rem it will automatically adjust it according to the device we use. To read more click here

Box model in CSS

In this post I like to discuss about box model in CSS.
As I was designing the page i got to know that understanding box model will be very much helpful for us to disign the sites responsibly. So here I like to discuss about it.
what is box model?
In html every elements are taken by computer as box. For example if we made a paragraph computer read it and show to us as a box. You can clearly understand about it by seeing the following image.

Thank you w3Bits.com

The width and height properties in css refers to the elements width and height.
Next padding, It is the space within the element and border.
The border is a line drawn after padding.
The other thing is margin, It is the space out side border to the other element.

To decorate any element we should know all of this things.
Hope you have understood the basics of box model. Happy coding :)..

Properties of Css

Hi,
In this post I like to share the main properties to get to know to add styles.  You can add specific value to this properties to style your website

CSS Background

CSS background property is used to define the background effects on element. There are 5 CSS background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

CSS Border

The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below

• border-style
• border-color
• border-width
• border-radius

CSS Font

CSS Font property is used to control the look of texts. By the use of CSS font property you can change the text size, color, style and more. You have already studied how to make text bold or underlined. Here, you will also know how to resize your font using percentage.
These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font. 

Here I listed only few...  You can click here to learn css much more...

Introduction to CSS

Hello,

 This is my first post this  year, 

Today I like to share about the language of CSS.

What is CSS?

CSS is a simple language designed to give some beauty to the webpage by applying some syles. It is also known as cascading style sheet. This is a simple and easy to learn and use language.

How to write css?

Although we have learned to write html.

Here I like to share how to write css. First of all we should point out the element what should be decorated. For example we like to decorate the heading of the page and like to change its colour as blue.

So we want to decorate the element h1, which is heading one. 

Now we should select what is the change we like to do. From the above target we have to change the colour of h1.

At last what is our preference to apply in the element as the change.

As in the above example our preference is blue to apply as the colour of the h1 element.

Now we see how to solve our target with CSS.

Element{change : preference}

Its that simple to write css.

Where to write?

We can add CSS in three places.

The first one is inline. It is a method to write css as an attribute. For example 

In H1 tag, in style attribute we can add css...

inline css

The second method is known as internal css. This is to add within head tag. for that we will add style tag type our codes within them.

internal css

 The third method is to add css is external css. For this we make a file with the extension css for eg:- style.css.
Then we have to add/ link the file with the working html file.

External css

In the above image in line 6 it shows how to link the css file to the html file.
In the style.css file you can just started to type the css.

Like this you can add styles to your html elements.
Happy coding

Main tags of HTML

Hi guys, In this post I like to share the main tags of HTML. As we have learned about writing HTML. When I was referring about HTML I suppose to read an article from geeks for geeks site. (to read the whole article please click here) By inspired from the article I write this.....

• HTML tag: It is the root of the html document which is used to specify that the document is html.
• Head tag: Head tag is used to contain all the head element in the html file. It contains the title, style, meta, … etc tag.
• Body tag: It is used to define the body of html document. It contains image, tables, lists, … etc.
• Title tag: It is used to define the title of html document. 
• Paragraph tag: It is used to define paragraph content in html document.
• Emphasis tag: It is used to renders as emphasized text.
• Bold tag: It is used to specify bold content in html document.
• Small (text) tag: It is used to set the small font size of the content.
• Underline tag: It is used to set the content underline.
• Deleted text tag: It is used to represent as deleted text. It cross the text content.
• Anchor tag: It is used to link one page to another page.
• List tag: It is used to list the content.
• Ordered List tag: It is used to list the content in a particular order.
• Unordered List tag: It is used to list the content without order.
• Comment tag: It is used to set the comment in html document. It is not visible on the browser.

Introduction to HTML

HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most of markup (e.g. HTML) languages are human readable. Language uses tags to define what manipulation has to be done on the text.
HTML is a markup language which is used by the browser to manipulate text, images and other content to display it in required format. HTML was created by Tim Berners-Lee in 1991. The first ever version of HTML was HTML 1.0 but the first standard version was HTML 2.0 which was published in 1999.
(got from  geeks for geeks website)

From the above text you could get a picture of 'What is html?'. Thank you for geeks for geeks website for a wonderful explanation.
In web world HTML is playing a main role.
So lets start how to write HTML..
To start html we should declare that it is a html5  document
<!doctype html>
It is the starting tag. and it will followed by <html>.
here we should understand tags.

Here I like to list out main tags...
html - it is the tag that saying that it is an html tag and also it is the parent tag for all.
head - it is the second tag and performs like the head of the whole document. it holds all the details of the following web page.
body -This is the tag that contains the whole elements of the web page.