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:
Inline - by using the style attribute in HTML elements.
Internal - by using a <style> element in the <head> section.
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:
_blank - Opens the linked document in a new window or tab.
_self - Opens the linked document in the same window/tab as it was clicked (this is default).
_parent - Opens the linked document in the parent frame.
_top - Opens the linked document in the full body of the window.
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
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
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.
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.