What is HTML and CSS?How to use it in Web development?
In this article i will share what is HTML and CSS and how to implement in web development.
What is HTML?
HTML stands for Hyper Text Markup Language.it is a scripting language used for making websites.it describes the structure of a webpage.Html consists of Elements,Attributes and Tags.
Html consists of series of Elements.Elements consists of start tag <>and end tag</>.The attributes are specified inside the start tag and it provides the additional information about the element.Attributes are come in a name value pair.For eg.href is name ,”http://shayhowe.com/”is value.
some of the self closing elements are
<br>,<embed>,<hr>,<img>,<input>,<link>,<meta>,<param>,<source>,<wbr>
structure of a Html Document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>Html document should be saved as .html extension.Tags which are must in html are
<html></html>,<head></head>,<body></body>
What is CSS?
CSS is a Cascading Style Sheet.it describes how HTML elements are to be displayed on screen,through this we can change the presentation and not the structure.Declaration should be in property :value pair.Like HTML there are lots of properties in Css too.
How to link CSS with HTML?
CSS can be added into HTML in 3 ways as Inline,Internal and External.
Inline: The Inline style is specific to the tag itself. The inline style uses the HTML “style” attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The Inline style is good for one an individual CSS change that you do not use repeatedly through the site.
<body>
<p style="color:red;margin-left:30px;">This is paragraph</p>
</body>Internal:An internal stylesheet holds the CSS code for the webpage in the head section of the particular file. This makes it easy to apply styles like classes or id’s in order to reuse the code.
<head>
<style type="text/css">
h1 {color:blue;}
h2 {color:red;}
p {color:green;}
</style>
</head>External:The External Stylesheet is a .css file that you link your website to. This makes it so that what ever you change in the .css sheet, will effect every page in your website. This prevents you from having to make many code changes in each page. This is for “global” site changes.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>In the below example you can find out how useful really the css is!
Form created using HTML
Form linked with CSS
Is this Enough for Web Development?
Exactly No.To make the website responsive and interactive we should go for some other frameworks like media queries,bootstrap,javascript etc.
conclusion
This was a very small overview,I think this would be helpful for those who starts with basics of Web development.keep an eye out for future posts from me.
