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 tag

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

Paragraph tag

Line break

Horizontal row

Bold and italics tags

Comments

Anchor

<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

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

<img src=“filename” />

Tables:

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:

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:

Ordered list of works to be done tomorrow:

CSS

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

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

<style type=text/css”>

body {background-color: blue;

}

</style>

RGB value of a color

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

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

<style type=text/css”>

p {font-weight: bold;

font-style:italic;

}

</style>

Text decoration

<style type=text/css”>

p{text-decoration:underline;

}

</style>

Text alignment

<style type=text/css”>

p {text-align:centre;

}

</style>

Text indentation

<style type=text/css”>

p {text-indent:25px;

}

</style>

Background images

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

<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

There is no padding since there is no space between the text and border
There is padding since there is space

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

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

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

<style type=text/css”>

p { width: 150px;

height: 150 px;

}

</style>

Styling the link

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 also use the image instead of bullets

<style type=text/css”>

ul { list-style-image: url(fileName);

}

</style>

Styling more than one elements

<style type=text/css”>

p,a{ list-style-image: url(fileName);

}

</style>

Span

Div

Absolute positioning and Relative positioning

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

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

Styling using classes

classes in use

Child selectors

Pseudo elements

External style sheets

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

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

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

</style>

Form

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>

form

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

Check box

Implementation of radio buttons and check boxes
Radio button and check box in a browser

Drop down list

Implementation of a drop down list
Drop down list in a browser

Text areas

<form>

<p>Feedback</p>

<textarea name=”feedback”>Give feedback </textarea>

</select>

</form>

Text areas

Well, you can also set the number of rows and columns in your text area.

<form>

<p>Feedback</p>

<textarea name=feedback” rows=8" cols=10">Give feedback </textarea>

</select>

</form>

text areas

Password

<body>

<form>

password: <input type=password” name=password” />
</form>

</body>

password

File uploading

<form>

submit the file: <input type=file” name=file” />

</form>

Submit a file

Oh ! I haven’t told you about submitting the file. Actually you can design a submit button through HTML but what happens after that…

Web programming takes care of all those things, but for now we will stick to the HTML. So Let’s go through the designing of submit button.

<form>

submit everything:

<input type=submit” value=submit”/>

</form>

Submit button

This is all I have for you. Hope you enjoyed!

--

--

Reader, Writer, Learner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store