Basis Of Css

Ankit Kanyal — Wed, 08 Sep 2021 08:52:28 +0000

Introduction-

So Css full form is Cascading Style sheets.It is basically a document to style the webpages.Css is what gives your webpage colors and cool animations.

Types-

There are 3 types of css-

Inline Css- This type of css is injected into element using style attribute.And we have to provide attributes which we want to target inside it.Its area of scope is only one particular element.
Internal Css- This type of css is used by using <style> tag.The <style> tag is positioned inside head tag. Its area of scope is one html Document we can update the single document style with the help of this.
External Css- So basically we create an external style.css file where we create our styles and link it inside html document using the <link> tag.This external css scope is much wider compared to last two we can create a single style sheet for multiple html pages and just link it inside the html to generate styles.

Box-Model-

So in css we have box model to style everything.Consider a block element as as div we can style it using the above properties.
Box model has following properties-

Content-It means Content of box where all elements and images appear.
Padding-It is an outer area around content and it is tranparent.
Border-A border that goes around padding and content.
Margin-A transparent area around border which seprates it from another element box-model.

Basic Css Selectors-

Element Selectors-

Here we can directly Specify the element name and then describe its property.Then the following styles will be applied to all the elements tag with same tag.
Class selectors-

We can define a class in an element like this.And then target the class in style tag or any stylesheet.The class is represented using .class-name in css.Its specificity(effect) is greater than normal Element Selector.
Id Selectors-

So these are basically same as class selectors but they are unique only one element inside a document can have an id. The id is represented as #id-name in css.There is also an additional benefit of these id selectors if we put id name in href attribute of anchor tag it will take us to where the id element in document is located when clicked.These are helpful it creating navigation across different sections in a page.

Conclusion-

So we can effectively use css to style our webpages.Whether we use inline,internal or external to style our pages we should consider the box model and style our elements accordingly.

P.S-For more detailed explanation and read about css properties use can visit csstricks website.And for properties and information on all tags you can use mdn as a reference.

Basis Of Html

Ankit Kanyal — Wed, 08 Sep 2021 06:03:04 +0000

Introduction

-So today we are going to learn about some of basis of html.Let's start with what is HTML.
-If we search google for full form of HTML it will say Hyper Text Markup Language.So we can say it is an Markup Language.But what is an Markup Language 🤔.
-Markup language are used to define the structure of a document.So basically there are some rules or so called tags which helps in defining the structure or how we represent the text in the document.

Anatomy of Html Document

Here we have the following-

<!DOCTYPE html>-This basically tells the type of document.
<html></html>-This is the root element of html.It wraps all the content inside it.
<head></head>-This is head of the Html it comprises of data which you want browser to look and normally it is not visible to users.
<meta />-It consists of meta data about your page we can use it to describe the type of content our page serves.
<title></title>-It represents the title or so called name of document.
<body></body>-It is the main body element.Inside it you can define data which you want to show to users be it text,images,audio or sound.

Heading-

These are the 6 different types of heading tags which we can use to create a heading.These heading tags are arranged in descending order of their font Sizes.h1 having largest font size and h6 having lowest font size.

Images-

So if we want to insert images we can use this img tag.It comes with 2 properties src which is called source where we have to gice link of where the image is located and an alt tag where we can specify the text if a image is not loaded.
It also has some additional attributes but for basis this is enough.

links-

For creating links we have anchor tag.Here we have href attribute which is used to insert the link we want to go when we click on it.

lists-

So basically there are two types of lists in html.
1.Ordered List <ol></ol

2.Unordered List <ul></ul>

Paragraphs-

So there are 2 tags which we can use to represent a paragraph.
1.<p> tag-It creates a general paragraph.
2.<pre> tag-It creates a paragraph like how you have written text inside this paragraph.So if we want fixed paragraph like how we have inserted the text inside it this tag is the way to do it.

Containers-

So there are basically these 4 main types of containers which we can use obivously there are more but we are gong to talk about these basic and important 4 only.
1.<div>-It is a common wrapper whenever we simply want a block to wrap elements inside.
2.<main>-It is used to wrap main and important things inside the page.
3.<section>-It is used to create a section inside the body and wraps all the section elemets inside it.
4.<article>-It is used to create an article.It is mainly used in blog posts,form posts to create an article.

Conclusion-

Html itself is a powerful markup Language.It describes the documents contents with a set of rules called as tags.These are some of the few basic tags everyone should know while working with html.When css and js is embedded in html then it gives the true beauty to the web page.Always remember Html is like a builder which builds a house,css is like painter which gives beautiful color to house and js is like Electrican which gives electric functionality to house and many other components.

DEV Community: Ankit Kanyal

Basis Of Css

Introduction-

Types-

Box-Model-

Basic Css Selectors-

Conclusion-

P.S-For more detailed explanation and read about css properties use can visit csstricks website.And for properties and information on all tags you can use mdn as a reference.

Basis Of Html

Introduction

Anatomy of Html Document

Heading-

Images-

links-

lists-

Paragraphs-

Containers-

Conclusion-

P.S-This is my very First blog i tried to explain basic things as easy as possible.Any suggestions will be welcomed.