top of page
Writer's pictureCodersarts AI

HTML Tutorial Help Part-2

HTML CSS


Styling HTML with CSS

  • CSS stands for Cascading Style Sheets.

  • CSS is used to describe how HTML elements are displayed on screen, paper, or in other media.

  • CSS can control the layout of multiple web pages all at once. It saves a lot of work.

CSS can be added to HTML elements in 3 ways:

  1. Inline - by using the style attribute in HTML elements.

  2. Internal - by using a <style> element in the <head> section.

  3. External - by using an external CSS file.

The most common way to add CSS, is to keep the styles in separate CSS files.


Inline CSS

  • An inline CSS is used to apply a unique style to a single HTML element.

  • An inline CSS uses the style attribute of an HTML element.

  • This example sets the text color of the <h1> element to red:

Example:


Internal CSS

  • An internal CSS is used to define a style for a single HTML page.

  • An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

Example:


External CSS

  • An external style sheet is used to define the style for many HTML pages.

  • With an external style sheet, you can change the look of an entire web site, by changing one file!

  • To use an external style sheet, add a link to it in the <head> section of the HTML page:

Example:

An external style sheet is written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Below is the structure of styles.css-

body {   background-color: powderblue; } h1 {   color: blue; } p {   color: red; }

CSS Fonts

  • The CSS color property defines the text color to be used.

  • The CSS font-family property defines the font to be used.

  • The CSS font-size property defines the text size to be used.

Example:


CSS Border

The CSS border property defines a border around an HTML element.


Example:


CSS Padding

The CSS padding property defines a padding (space) between the text and the border.


Example:

CSS Margin

The CSS margin property defines a margin (space) outside the border.


Example:


The id Attribute

To define a specific style for one special element, add an id attribute to the element.


Example:

Note: -The id of an element should be unique within a page, so the id selector is used to select one unique element!


The class Attribute

To define a style for special types of elements, add a class attribute to the element

Syntax: <p class="error">I am different</p>

Example:



HTML Links

Links are found in all web pages. It allows the users to navigate from one page to another.


HTML Links - Hyperlinks

  • HTML links are hyperlinks.

  • You can click on a link and jump to another document.

  • When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: - A link does not have to be text. It can be an image or any other HTML element.


Hyperlinks are defined with the HTML <a> tag:

Syntax<a href="url">link text</a>

Example:

HTML Link Colors

  • By default, a link will appear like this (in all browsers):

  • An unvisited link is underlined and blue.

  • A visited link is underlined and purple.

  • An active link is underlined and red.

  • The default colors can be changed by using CSS.

Example:


HTML Links - The target Attribute

  • The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  1. _blank - Opens the linked document in a new window or tab.

  2. _self - Opens the linked document in the same window/tab as it was clicked (this is default).

  3. _parent - Opens the linked document in the parent frame.

  4. _top - Opens the linked document in the full body of the window.

  5. framename - Opens the linked document in a named frame

Example:

HTML Links - Image as Link

Images are commonly used as link.


Example:

Note: - border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).


Link Titles

  • The title attribute specifies extra information about an element.

  • The information is most often shown as a tooltip text when the cursor moves over the element.

Example:

HTML Links - Create a Bookmark

  • HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

  • Bookmarks can be useful if your webpage is very long.

  • To make a bookmark, you must first create the bookmark, and then add a link to it.

  • When the link is clicked, the page will scroll to the location with the bookmark.

At first, a bookmark with the id attribute is created:

<h2 id="C6">Chapter 6</h2>

Then, a link is added to the bookmark ("Jump to Chapter 6"), from within the same page:

<a href="#C6">Jump to Chapter 6</a>

Or, a link is added to the bookmark ("Jump to Chapter 4"), from another page .


Example:


HTML Images

Images are used in HTML to improve the design and appreance of the web page.


Example:

HTML Images Syntax

  • In HTML, images are defined with the <img> tag.

  • The <img> tag is empty, it contains attributes only, and does not have a closing tag.

  • The src attribute specifies the URL (web address) of the image.

Syntax: <img src="url">

The alt Attribute

  • The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

  • The value of the alt attribute should describe the image.

Example:

Note: - The alt attribute is required. A web page will not validate correctly without it.


Image Size - Width and Height


The style attribute is used to specify the width and height of an image.


Example:

Width and Height, or Style?

  • The width, height, and style attributes are valid in HTML.

  • However, it is suggested to use the style attribute. It prevents styles sheets from changing the size of images.


Example:


Images in Another Folder

  • If not specified, the browser expects to find the image in the same folder as the web page.

  • However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute.

Example:

Animated Images


Animated GIFs are allowed in HTML.


Example:

Image as a Link


To use an image as a link,the <img> tag is written inside the <a> tag.


Example:


Image Floating


Use the CSS float property to let the image float to the right or to the left of a text.


Example:


Background Image


To add a background image on an HTML element, use the CSS property background-image.


Example:

HTML Screen Readers


A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.



HTML Tables


A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.

  • Tables are useful for various tasks such as presenting text information and numerical data.

  • Tables can be used to compare two or more items in tabular form layout.

  • Tables are used to create databases.

Example:


Defining an HTML Table

  • An HTML table is defined with the “table” tag.

  • Each table row is defined with the “tr” tag.

  • A table header is defined with the “th” tag.

  • By default, table headings are bold and centered.

  • A table data/cell is defined with the “td” tag.

Example:


Note:- The <td> elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.


HTML Table - Adding a Border

If a border is not specified for the table, it will be displayed without borders.

A border is set using the CSS border property.


Example:


HTML Table - Collapse Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.


Example:


HTML Table - Adding Cell Padding

  • The space between the cell content and its borders is specified as Cell Padding.

  • If you do not specify a padding, the table cells will be displayed without padding.

  • The CSS padding property is used to set the cell padding.

Example:


HTML Table - Left-align Headings

  • By default, table headings are bold and centered.

  • The CSS text-align property is used to left-align table headings.

Example:



HTML Table - Adding Border Spacing

  • Border spacing specifies the space between the cells.

  • The CSS border-spacing property is used to set the border spacing for a table.

Example:


Note:- If the table has collapsed borders, border-spacing has no effect.


HTML Table - Cells that Span Many Columns


To make a cell span more than one column, use the colspan attribute.


Example:


HTML Table - Cells that Span Many Rows


The rowspan attribute is used to make a cell span more than one row.


Example:


HTML Table - Adding a Caption


The <caption> tag is used to add a caption to a table.


Example:

Note:- The <caption> tag is inserted immediately after the <table> tag.


A Special Style for One Table


To define a special style for a special table, an id attribute is added to the table.


Example:


HTML Lists


A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.


Example:


Unordered HTML List

  • An unordered list starts with the <ul> tag.

  • Each list item starts with the <li> tag.

  • The list items will be marked with bullets (small black circles) by default.

Example:

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked


Example:


Ordered HTML List

  • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

  • The list items will be marked with numbers by default.

Example:

Ordered HTML List - The Type Attribute


The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Example:


HTML Description Lists

  • HTML also supports description lists.

  • A description list is a list of terms, with a description of each term.

  • The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

Example:

Nested HTML Lists


List can be nested (lists inside lists).


Example:

Note:- List items can contain new list, and other HTML elements, like images and links, etc.

Control List Counting

  • By default, an ordered list will start counting from 1.

  • If you want to start counting from a specified number, you can use the start attribute.

Example:


Horizontal List with CSS

  • HTML lists can be styled in many different ways with CSS.

  • One popular way is to style a list horizontally, to create a navigation menu.


If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion  you can send mail at contact@codersarts.com.


Please write your suggestion in comment section below if you find anything incorrect in this blog post.


12 views0 comments

留言


bottom of page