Jan 10, 2019

15 min read

Basics of HTML and CSS

Web development is the creation of dynamic web applications. Its demand has grown excessively over the years. To learn web development one has to be well acquainted with HTML and CSS.

HTML

HTML stands for Hyper Text Markup Language. HTML elements are the building blocks of HTML pages. Its elements are represented by <> tags.

HTML tag

Every website has a beginning and ending. HTML tags are employed for this work. The entire coding of the website has to be done inside HTML tags.

Every web page is made up of two things. One is head and other is the body. The ‘head’ is where all the browser information goes. The technical stuff that you don’t see on your webpage. Like keywords, the title of the web page etc. the head tag includes the title of the webpage. ‘Body’ includes the stuff you see on your webpage. Like pictures, paragraphs, texts etc. anything in between the tags will acquire the property the tag beholds.

The basic skeleton of the webpage:

Header tag

Header tags are employed for headers on the web page. There are six header tags. Implemented by <h1></h1>, <h2></h2>…., <h6></h6>. From <h6></h6> to <h1></h1> the header gets bigger and bolder.

Paragraph tag

Paragraph tags are used for paragraphs. It is implemented by <p></p>

Line break

Line break is used to escape out of the line. It is implemented by <br />. So it is used in a single tag.

Horizontal row

Horizontal row is used to employ a horizontal line in a web page. It is implemented by <hr /> it is used in a single tag.

Bold and italics tags

Bold tags are implemented by <strong> </strong>. Italic tags are implemented by <em> </em>

Comments

Comment is something which has no effect on the webpage. It is implemented by <!- -comments- ->

Anchor

Anchor tags are used to surround text or anything inside the anchor tags with a link to any other webpage. It is implemented by

<a href= “http://www.google.com”>link </a>

The above implementation will employ http://www.google.com to the text ‘link’ of the web page.

Creating a link to a section within a webpage

Sometimes webpage may become very big. A link can be employed to avoid scrolling the cursor when a user has to jump in a specific section.

For this at that section naming is done

<a name=“section name”> </a>

The second part is employing the link

<a href=“# section name”>link</a>

By this, the text ‘link’ of the webpage will have a link to a particular section of the same webpage.

Adding an image to the webpage

For adding an image to the webpage the image file should be kept in the same folder where the HTML file is located. A single tag is used for adding an image to the webpage.

<img src=“filename” />

Tables:

For inserting a table in a webpage ‘table tags’ <table> </table> are used. Inside the ‘table tag’, the ‘table row tag’ <tr> </tr> is used. ‘Table row tag’ is used as many times as the number of rows required in a table. Inside the ‘table row tag’, The ‘table data tag’ <td></td> is used. The ‘table data tag’ is used as many times as the number of columns to be inserted in a particular row. The data is inserted in the ‘table data tags’. Table headers can also be inserted in a ‘table row tag’ for specifying a heading row. ‘Table header tags’ <th></th> are used for this purpose.

Colspan: Sometimes inside a row in a table the columns need to be merged to make a single column. For this colspan property is used.

Border: It is the property to specify the number of pixels of the border to be employed in a table.

Table width: This property is used to give a particular width to the table. It can be done by specifying the number of pixels or in by specifying percent to the size of the webpage.

Cellpadding: Cellpading is the property to specify the space to be given inside a cell between border and text.

Cellspacing: Cellspacing is the property to specify the space to be given between the cells.

Implementation of the table with properties:

how it looks in browser:

List:

There are two types of list, one is the ordered list and other is an unordered list.

Ordered list: the ordered list is used for specifying the things, tasks etc in a list that cannot be randomly rearranged. For implementation of the ordered list <ol></ol> are used. Inside the list to specify the items ‘list items tags’ <li></li> are used.

Unordered list: the unordered lists used for specifying the things, tasks etc in a list that can be randomly rearranged. For implementation of the unordered list <ul></ul> are used. Inside the list to specify the items ‘list items tags’ <li></li> are used.

Implementation of lists:

Unordered list of gadgets :

Ordered list of works to be done tomorrow:

CSS

CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the layout and design of the webpage.

Working with CSS

Style tags are used for working with CSS. They are placed inside the head tags. Let’s go through the skeleton.

Changing the color and font of the text

For changing the color and font of the text, first thing you need to tell the CSS that to which text you want the change. Now, since we know that the whole webpage is constructed with the tags, we can provide the information of a particular tag to the CSS. The text surrounded by those tags will have the implementation.

Once the tags are provided to CSS, you can do the styling very easily. For each styling there will be a statement. Statements are surrounded by a semi-colon.

For changing the color of the text, simply use the keyword “color”. Likewise, for changing the font, use keyword “font-family”.

Changing the color of background

You can change the background color of your webpage. For this you need to work on the body tags. For changing the background color of the webpage, keyword “background-color” is used

<style type=“text/css”>
body {background-color: blue;
}
</style>

RGB value of a color

How many colors you can name? I know you can name many. But while designing the webpage the color selection is somewhat more precise. To ensure that you have picked a color of your choice precisely, CSS understands the RGB value of a color. RGB value of a color is a value allocated to all the colors. Many more than you can name.

You can get the RGB value of colors from photoshop or somewhere else. It is not required to remember them.

Line spacing

You can control the spacing between the lines on your webpage. The keyword used for the line spacing is “line-height”. You need to tell the CSS how much percent you want to increase the line spacing.

What will happen if you will put it less than 100%

Of course, it will decrease the line spacing.

Bold and italic properties

Getting the fonts bolder and italicizing the fonts can be done using HTML. But using CSS is more preferred. “font-weight” is the keyword used for getting the fonts bolder. “font-style” is the keyword used to italicize the fonts.

<style type=“text/css”>
p {font-weight: bold;
font-style:italic;
}
</style>

Text decoration

Text decoration is basically having text underlined, strike-through etc.

<style type=“text/css”>
p{text-decoration:underline;
}
</style>

Text alignment

Your text is left justified by default. You may need your text to be center justified or right justified. For text alignment “text-align” keyword is used

<style type=“text/css”>
p {text-align:centre;
}
</style>

Text indentation

For text indentation keyword “text-indent” is used. You need to tell the CSS in how many pixels you want indentation.

<style type=“text/css”>
p {text-indent:25px;
}
</style>

Background images

For having an image as a background of your webpage, first you need to ensure that the image file must be in the same directory where your HTML file exist.

The keyword used for adding the background image is “background-image”.

<style type=“text/css”>
body {background-image: url(fileName);
}
</style>

Note: fileName must include file extension.

By default the background image will repeat left-right and top-down.

If you don’t want it to repeat, then use the keyword “background-repeat”

<style type=“text/css”>
body {background-image: url(fileName.exention);
background-repeat: no-repeat;
}
</style>

Now imagine, you want to repeat your background image in top-down only. You need to use “repeat-x”, instead of “no-repeat”

Likewise, if you want to repeat your background image in left-right only. You need to use “repeat-y”, instead of “no-repeat”

Positioning of background image

For the positioning of background image, you need to use the keyword “background-position”. We can instruct CSS either in pixels or in percentage.

<style type=“text/css”>
body {background-image: url(fileName);
background-position: 10px 60px;
}
</style>

The image will be positioned 10px from the left and 60px from the top.

Padding

Padding the space around text. Go through the following image to have more clear idea

Having the same padding in all directions

<style type=“text/css”>
p {padding:20px;
}
</style>

Having different padding in different directions

<style type=“text/css”>
p {padding-top:20px;
padding-bottom:50px;
padding-left:20px;
padding-right:50px;
}
</style>

Border

In order to have a border, you need to use specify three things.

First one is to specify border color, keyword “border-color” is used for this. Second one is to specify the border width. Basically this is setting up how wide the border should be. Keyword “border-width” is used for this. The third one is to specify the border style. This is to specify whether the border should be dashed, solid, dotted etc. keyword “border-style” is used for this.

<style type=“text/css”>
p { border-color: blue;
border-width: 3px;
border-style: dashed;
}

</style>

Moreover, you can specifically tell CSS to apply the border only to either of top, bottom, left or right of the element. Say, you want to apply the border only to the top of the element. Let’s see the implementation for that.

<style type=“text/css”>
p { border-top-color: blue;
border-top-width: 3px;
border-top-style: dashed;
}
</style>

There is a shortcut to apply the border. You can directly apply the border in one line of statement

<style type=“text/css”>
p { border:3px solid black;
}
</style>

Margin

Margin is the space around the text. People confuse the margin with padding. So remember, padding is the space inside the border and margin is the space outside the border.

For example there are two paragraphs, so there will be a space associated between them. That space will be called margin. Let’s see the implementation.

<style type=“text/css”>
p { background-color:orange;
margin:1px;
}
</style>

You can specifically set left margin, right margin, top margin or bottom margin. Say, you want to have top margin.

<style type=“text/css”>
p { background-color:orange;
margin-top:1px;
}
</style>

Width and Height

You can set, how much space a particular element will consume on your webpage. You can set the width using the keyword “width”. Likewise, you can select the height using the keyword “height”.

<style type=“text/css”>
p { width: 150px;
height: 150 px;
}
</style>

Styling the link

Website is embedded with many links. Styling the links has many properties in addition to normal styling.

Default styling: By default how the link looks is styled by the default styling.

<style type=“text/css”>
a:link{color:blue;
text-decoration:underline;
}

</style>

Visited styling: How the link looks once visited is styled by visited styling.

<style type=“text/css”>
a:visited{color:green;
text-decoration:none;
}

</style>

Hover styling: How the link looks when hovered is styled by hover styling.

<style type=“text/css”>
a:hover{color:red;
text-decoration:underline;
font-weight:bold;
}
</style>

Active styling: how the link looks when it remains clicked is styled by active styling.

<style type=“text/css”>
a:active{color:orange;
text-decoration:none;
}
</style>

Styling the unordered list

You can set whether there should be bullet point, circle, square etc. in the unordered list.

You can also use the image instead of bullets

<style type=“text/css”>
ul { list-style-image: url(fileName);
}
</style>

Styling more than one elements

You can style more than one element at the same time.

<style type=“text/css”>
p,a{ list-style-image: url(fileName);
}
</style>

Span

Now imagine you want to style a particular part of the element, not the whole element. Span is used for that.

Div

Div stands for division. Div element helps us to define sections on the webpage. Moreover, it provids a scope to place that section wherever we want.

Absolute positioning and Relative positioning

We can place the element wherever we want using div element. Remember using the statement “position:absolute;”

What does that absolute mean?

Actually this refers placing the element with respect to absolute top left of the webpage. We can place the element with respect o the position where it would be placed if we won’t use the div lement. This is called relative positioning.

div { border:1px solid red;
position: relative;
top:400px;
left:400px;
}

Fixed positioning

Suppose you have a very long webpage. But there are few elements which you want to fix on your webpage. Means if you are scrolling down the webpage, those elements will stay on the screen. They will be fixed on the screen irrespective of your position on the webpage.

You can imagine them like a scrach on the monitor of your computer whenever you will open the webpage.

For this fixed positioning is used.

div { border:1px solid red;
position: fixed;
top:400px;
left:400px;
}

ID’s of div elements

Imagine you have many sections of a webpage through div element. For a specifc section there should be a particular identity. That is achieved by having ID’s of each div element.

Styling using classes

Suppose you are styling a paragraph. But you want different styles for different paragraphs. To enable you to style a particular pargraph use of class comes into play.

Child selectors

Tag inside the tag, are child tag of outer tag. Suppose you want to style the links but you want to style only those, which are child paragraph tag. Child selectors are employed for this task.

Pseudo elements

First this is that pseudo elements are not any kind of fake elements. Suppose you have many paragraphs and you want to style the first word of each paragraph. Or you want to style the first letter of each header on your website. Pseudo element enables you to do so.

External style sheets

Suppose you have many webpages and you want to style all of them in same way. Now, you have to go through each of them and style them one by one. What if I tell you there is a way to have one style and now, you just need to tell CSS for each webpage that keep that style.

This will make life lot easier.

First step is to create that common style. Take a new document on your editor. Write all the style you want and save that file with “.css” extension.

For associating that file with your webpages, you need just one line of a code.

Overriding

By using the external style sheets, you will have a common style for every webpage. What if you want to have few different style n one of those pages. Here comes the concept of overriding.

Overriding keeps different styles of all the elements of your external style sheets. But overrides over the style on the elements which you will add in addition.

Never put the style tags above external style link, it would become useless.

Max-height and Max-width

You can set the maximum height and maximum width of all the images on your webpage. CSS enable you to do so.

<style type=“text/css”>
img{max-height:150px;
max-width:200px;
}

</style>

Form

Utilizing the forms enable us to take the data from the user. For example getting the feedback or getting the username etc.

Actually including the form on your webpage include web programming. We are not discussing the web programming right now, so here we will be just designing the forms.

For designing the forms we need to use the tags “<form> </form>” Further to take the input form user tags “<input />” is used. You need to specify the type of input. A name can also be given to the input for later use.

Let’s design a form to get the username

<body>
<form>
Username: <input type=”text” name=”username”/>
</form>
</body>

The length of the text box is, I dont know, how many pixels? But you can control the length of the text box using the keyword “size”.

You can also control the maxium length of characters user can enter. For this user has to use the keyword “maxlength”.

Using the keyword “value” you can put anything to reside already in the text box.

<body>
<form>
Username: <input type=“text” name=“username” size=“50" maxlength=“10" value=“enter the username”/>
</form>
</body>

Radio buttons

Radio buttons are something which will provide user some buttons. Out of which user can only select one of those. Different buttons will have different value.

Check box

Check boxes are something which allows user to select multiple options. Different check boxes will have different value.

Drop down list

Suppose you have many choices. It is not suitable to use radio buttons or check boxes when you have to many choices. “select” keyword is used for this. In one of the attribute, “value” you put some information. That information can be further utilized.

Text areas

Sometimes you may need to design a webpage where user can enter text of more than one line. For example you want your users to put the feedback of your webpage in their words. This is where text areas comes into play.