Learn HTML and CSS in few steps . Practice an hour daily for good results in 10 days.
Here I am mentioning basic elements , attributes and tags of HTML with styling them
HTML is the standard markup language used to create web pages. It provides a structure and layout for text, images, and other content. The document explains the basic components of an HTML page, including the <head> and <body> tags, common text formatting tags, links, lists, and tables. It recommends learning HTML tags through online resources or by examining the source code of existing web pages, and emphasizes starting simply with tags like <head>, <title>, <h2>, and <p>.
This document provides an overview of HTML topics that will be covered in lectures 4, 5, and 6 of a web programming course. It discusses HTML, HTML forms, common HTML tags and their purposes, text formatting tags, images, links, tables, lists, and forms. It also covers iframes, framesets, block and inline elements, the <div> and <span> tags, layouts, and buttons. The document serves as an outline of key HTML concepts and elements that will be explored in more depth during the lectures.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. An HTML file uses tags to structure and layout text, images, and other content for display in a web browser. Common HTML tags include headings, paragraphs, lists, links, images, forms, and tables. The basic structure of an HTML file includes the <html>, <head>, and <body> tags.
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML. CSS controls the layout of multiple documents from a single style sheet and allows for more precise control over layouts and different styles for different media like screens and print. CSS syntax uses selectors to apply styles denoted by properties and values to HTML elements. Styles can be applied inline, internally in the <style> tag, or externally in a separate .css file linked via the <link> tag.
- HTML stands for Hypertext Markup Language and HTML documents are plain-text files that can be created using any text editor and contain tags to denote elements like headings, paragraphs, and lists.
- Tags are surrounded by angle brackets and usually come in pairs to mark the start and end of an element. Some elements also include attributes to provide additional information.
- A minimal HTML document requires tags for html, head, title, and body elements and contains headings, paragraphs and other text-based elements.
This document provides an introduction to HTML (Hypertext Markup Language) by explaining some key concepts:
- HTML is used to create web pages and is a markup language that uses tags to describe the structure and layout of content. It is not a programming language.
- Common HTML elements and tags are explained, including container tags that have opening and closing tags, and empty elements that only have opening tags.
- The document demonstrates how to write basic HTML code and open HTML files in a web browser. It provides examples of common text formatting, list, image, and table tags.
The document provides instructions for creating basic HTML links. It explains that the <a> tag is used to define a hyperlink, with the href attribute specifying the link destination. Examples are given of creating links to other websites and bookmarks within the same page. Targets for opening links in new windows are also demonstrated.
HTML is a markup language used to describe and structure web pages. It uses tags to define headings, paragraphs, links, images, and other content. An HTML file contains a head and body section. The head contains meta information about the page like the title. The body contains the visible page content. Common tags include headings, paragraphs, links, images, and divs to group content. Attributes provide extra information about elements.
This document provides an overview of HTML and CSS topics including:
- A brief history of HTML and CSS standards from 1990 to present.
- Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists.
- Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals.
- Details on CSS topics like the box model, centering content, semantic HTML, and flexbox.
The document serves as a course outline or reference for learning HTML and CSS fundamentals.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
HTML (Hypertext Markup Language) is used to create web pages. It uses tags to define headings, paragraphs, lists, links and other elements. Some key HTML tags are <html> <head> <title> <body> <h1>-<h6> <p> <ul> <ol> <li> <a> <img>. HTML pages can be written using a basic text editor and have the .html file extension. The browser interprets the HTML tags to display the structured page content.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
Introduction to Cascading Style Sheets (CSS)Chris Poteet
This document provides an introduction to Cascading Style Sheets (CSS) including definitions, why CSS is used, the cascade, inheritance, using style sheets, CSS syntax, selectors, the box model, CSS and the semantic web, browser acceptance, fonts, units, colors, layouts, text formatting, backgrounds, lists, shorthand properties, accessibility, and resources for further information.
HTML is a markup language used to define the structure and layout of web pages. It uses tags to describe paragraphs, headings, lists, links, and other items that make up a web page. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for content, headings <h1> through <h6>, paragraphs <p>, links <a>, images <img>, tables <table>, lists <ul> and <ol>, and forms <form>. HTML documents are displayed in web browsers which read the HTML tags and display the corresponding elements on the web page.
This presentation is an introduction to the new features of
HTML5. The main elements of this document are:
* Brief history of HTML5
*The improvements
* Browser support
* Semantic elements
* Content Editable on pages
* Video Tag
* Canvas tag
* Local storage
* Geolocation API
* Offline applications
* Microdata
* Use cases
HTML is a markup language used to create web pages. It uses tags like <html>, <title>, and <body> that are placed within angled brackets to denote elements on a page. Tags can be container tags, which have an opening and closing tag to surround content, or empty tags which are standalone with no closing tag. When creating an HTML file, it should be saved with a .html or .htm extension and then can be viewed by opening it in a web browser.
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
HTML is a markup language used to structure and present content on the web. It stands for Hypertext Markup Language and was created by Tim Berners-Lee in 1991. Some key elements of HTML documents include tags, attributes, and basic building blocks like the <html>, <head>, <title>, and <body> tags. Common tags in HTML are used for formatting text and include headings, paragraphs, breaks, fonts, and lists.
The document discusses HTML common tags and elements used to structure web pages. It explains that HTML files use markup tags to tell browsers how to display content. Common tags include <html>, <head>, <title>, <body> for overall page structure. Other tags format text like <b>, <i>, add links with <a>, and structure lists, tables, and headings. The document provides examples and explanations of how each tag is used to build web pages.
Markup language classification, designing static and dynamicAnkita Bhalla
The document discusses various markup languages used to create static and dynamic web pages. It describes how static pages are fixed and do not change, while dynamic pages can be modified at runtime through scripts. It provides details on HTML, CSS, JavaScript and server-side scripts for creating dynamic content. Key topics covered include using tags like <div> for layouts, <img> for images, and JavaScript for basic interactivity. The document compares the processing of static versus dynamic pages and outlines benefits of dynamic pages like personalization and database access.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML uses tags to mark up elements within web pages to indicate their semantic structure. Common tags are used to define headings, paragraphs, links, images, and more. Web browsers read HTML files and display the pages according to the tags.
HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, links, images, and tables. Some key tags include:
<h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <table> for tables. Elements are everything between a starting and ending tag. HTML documents contain tags and plain text and are displayed in web browsers.
HTML is the standard markup language used to create web pages. HTML documents are composed of elements like headings, paragraphs, links etc that provide structure and meaning. A web browser reads the HTML tags and displays the page by interpreting the tags. Common HTML elements include headings, paragraphs, images, hyperlinks, tables, forms and lists that are used to structure and layout the content on a web page.
HTML is a markup language used to define the structure and layout of web pages. It uses tags like <html> and <body> to mark elements in a document like headings, paragraphs, and links. Tags have start and end tags like <p> and </p> to delineate content. CSS can be used to style HTML elements by specifying rules that are applied using the style attribute, <style> element, or external CSS files. Basic HTML tags include those for headings, paragraphs, bold, italics, underlining, links, images, and buttons. HTML documents are edited in text editors and browsers use the tags to render and display the structured content.
This document provides an introduction to HTML, including:
- HTML stands for Hypertext Markup Language and provides structure and presentation for content on webpages.
- The basic structure of an HTML document includes the <html>, <head>, <title>, and <body> tags. Common elements like headings, paragraphs, and divs are explained.
- Attributes like id and class are used to provide additional information and styling for elements. Lists, images, videos and links are also covered. Tables, forms and their various tags are introduced as well.
The document provides an introduction to HTML (Hypertext Markup Language) by defining key terms like internet, web page, website, and web browser. It explains that HTML is a language used to describe web pages and is made up of elements defined by tags. It provides examples of basic HTML tags for text formatting, paragraphs, headings, and other common elements.
The document provides information on HTML (Hypertext Markup Language). It discusses that HTML is used to create web pages and applications, and is the most widely used language on the web. It also describes the basic structure of an HTML document and some common HTML tags like <html>, <head>, <body>, <p>, and <h1>.
Tim Berners-Lee, a physicist working at CERN, invented HTML in the late 1980s as a way for researchers to share and collaborate on information. The earliest versions of HTML included basic markup tags but lacked features like tables. Subsequent versions in the 1990s, such as HTML 3.2, HTML 4, and HTML 4.01, added support for additional elements, tags, and features to enhance the functionality and capabilities of HTML. HTML is not a programming language but a markup language that uses tags to define the structure and layout of web pages.
This document provides an introduction to HTML basics, including:
- HTML is used to author web pages and is made up of tags enclosed in angle brackets.
- The objectives are to use a text editor to author HTML, add basic tags, hyperlinks, images and tables.
- Notepad is recommended for Windows and TextEdit for Mac to author HTML files.
HTML (Hypertext Markup Language) is used to create documents for display on the World Wide Web. It uses tags to define headings, paragraphs, lists, and other elements. An HTML document contains a head and body. The head contains metadata like the title. The body contains the visible page content. HTML uses tags like <h1> for headings, <p> for paragraphs, and <br> for line breaks to structure text. It also has tags for images, tables, forms, and other rich content. HTML allows easy creation of hyperlinks to other documents on the web.
HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> for headings and <p> for paragraphs to structure content. Key HTML elements include:
<html> - defines an HTML document
<head> - contains meta information about the page
<body> - contains visible page content
<a> - defines hyperlinks
<img> - embeds images
<ul>, <ol>, <li> - define unordered, ordered and list item elements
<table> - defines a table with <tr> for rows and <td> for cells
HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text with information about headings, paragraphs, lists, and other elements. The key HTML tags are: <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> to contain the visible page content. HTML allows adding images, links, tables, and forms to pages and is essential for building web pages but has limitations as a presentation language.
The document provides information on HTML (Hypertext Markup Language) including:
- HTML is used to define the structure and layout of a web page using tags like <html> and <body>
- Tags can be used to format text styles like <b> for bold, <i> for italic, and <font> for color and size
- Additional tags organize content like <h1> - <h6> for headings, <p> for paragraphs, and <br> for line breaks
This document provides an overview of HTML and common HTML elements. It introduces HTML, the basic syntax including elements, attributes, comments, and minimal document structure. It also describes some common block-level elements like headings, paragraphs, line breaks, and inline elements like strong, em, i, and links. The next lesson will cover additional HTML elements and attributes.
HTML is a markup language used to define the structure and layout of web pages. It was created by Tim Berners-Lee in the 1980s at CERN. HTML uses tags to annotate text with semantic meaning like headings, paragraphs, lists, links etc. An HTML document contains HTML tags and elements that are interpreted by browsers to display the page.
Gender Equity in Architecture: Cultural Anthropology in Design IdeologiesAditi Sh.
This PowerPoint presentation offers a comparative analysis between a female and a male architect, focusing on their ideologies, approaches, concepts, and interpretations for a mixed-use building project. This study prompts a reconsideration of architectural inspiration and priorities, advocating for gender equity and cultural anthropology in architectural design.
Top 10 User Interface Design Principles in 2024.pdfUIDesignz LA
In 2024, user interface (UI) design continues to evolve, embracing new technologies and user expectations. As digital experiences become more integral to daily life, the demand for intuitive, accessible, and aesthetically pleasing interfaces is higher than ever. For any UI UX design agency, staying ahead of these trends is crucial. Here are the top 10 UI design principles that are shaping the digital landscape this year.
Love Problem Solution Expert +91 0000//0000 Call Now for Quick Solution Vashi...antxmodels60
Love Problem Solution Expert +91 0000//0000 Call Now for Quick Solution Vashikaran Specialist In Delhi
Website For Rent :- ranjeetsinginfo009@gmail.com
Call:- 000000000000
Whatsapp Now: 00000000000
Exploring Writer's Studio Interior Design: A Prototype Case StudyAditi Sh.
This PowerPoint presentation delves into a comprehensive case study and prototype study of a Writer's Studio, focusing on understanding the psychology of the writer through the spaces they use. The study emphasizes the innovative concepts of flexibility and small space optimization tailored specifically for the creative process. By analyzing the spatial dynamics, ergonomic considerations, and aesthetic choices within the studio, the presentation aims to uncover how environment influences creativity and productivity. Through detailed examination and visual documentation, it explores various design strategies employed to enhance functionality without compromising on comfort and inspiration. This presentation is ideal for architects, interior designers, and anyone interested in the intersection of psychology, design, and creative workspaces. It offers insights into designing spaces that foster concentration, creativity, and overall well-being for individuals engaged in intensive writing and creative endeavors.
Pandit Ji is Most Famous Black Magic Specialist Delhi {=/+91 0000//0000 /} L...ranjeetsinginfo009
Pandit Ji is Most Famous Black Magic Specialist Delhi {=/+91 0000//0000 /} Love Vashikaran Specialist Delhi
Website For Rent :- ranjeetsinginfo009@gmail.com
Call:- 000000000000
Whatsapp Now: 00000000000
Right Choice Landscaping offers exceptional villa landscape maintenance servi...rightchoicelandscapi
"Right Choice Landscaping offers exceptional villa landscape maintenance services in Dubai. Our dedicated team ensures that your villa’s outdoor spaces are beautifully maintained, enhancing both the aesthetic appeal and the value of your property. We offer landscaping and Garden design services to commercial property owners and homeowners all over the UAE.
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
How to learn HTML in 10 Days
1. WHY HTML
To publish information for global
distribution, one needs a universally
understood language, a kind of
publishing mother tongue that all
computers may potentially understand.
The publishing language used by the
World Wide Web is HTML (from
HyperText Markup Language).
2. WHAT IS THE WWW?
A distributed document delivery system
Uses a client-server model
Main presentation language is HTML
URL – Uniform Resource Locator.
Browser – A software program which is used
to show web pages.
Pages end with “.htm” or “.html”
3. HTML WORK ON CLIENT-SERVER MODEL
Two processes (possibly networked):
The client
Sends requests to the server
Blocks until reply is received
The server
Processes requests from clients
Never blocks
Can reply to several clients simultaneously
4. WHAT IS HTML?
HTML stands for Hyper Text Markup Language
HTML is a markup language
HTML is used to create web documents
including text, images, formatting, and
hyperlinks to other documents.
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain
text
HTML documents are also called web pages
5. USES OF HTML
Publish online documents with headings, texts,
tables, lists, photos, etc.
Retrieve online information via hypertexts links.
Design forms for conducting transactions with
remote services, for use in searching for
information, making reservations, ordering
products, etc.
Include spread-sheets, video clips, sound clips,
and other applications directly in their
documents.
6. HTML VERSIONS
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
HTML5 2012
XHTML5 2013
7. MARKUP LANGUAGES
Markup:
Embedded codes in documents
Codes are called `tags‟
Codes
Describe the structure documents
Include instructions for processing
Markup language:
Computer language for describing syntax of tags
May be used with other tools to specify rendering
8. HTML (HYPER TEXT MARKUP LANGUAGE)
HTML is used to create web documents including text,
images, formatting, and hyperlinks to other documents.
HTML documents consists of text and „markup‟ tags which
are used to define the structure, appearance, and function
of the information.
There are two types of markup tags:
Container tags – Define a section of text using a start tag and an
end tag. For example, text placed inside of these tags would
appear in bold:
<B>Hello</B>
Empty tags – represent a single occurrence of an instruction. For
example, the <BR> or break tag is used to indicate that you want
to include a single space following the text.
9. EXAMPLE OF AN HTML DOCUMENT
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
10. WHAT EXAMPLE TELLS
The DOCTYPE declaration defines the
document type
The text between <html> and </html> describes
the web page
The text between <body> and </body> is the
visible page content
The text between <h1> and </h1> is displayed
as a heading
The text between <p> and </p> is displayed as
a paragraph
11. STRUCTURE OF AN HTML DOCUMENT
An HTML document is divided into two main
sections:
Heading - The HEADing contains information
describing the document, such as its title. The
heading section is indicated by the <HEAD> and
</HEAD> tags.
Body - The BODY section is where the Web document
text, graphics, and other elements are placed. The
body section is indicated by the <BODY> and
</BODY> tags.
12. TEXT AUTHORING TOOLS
HTML Editor – A word processor that has been
specialized to make the writing of HTML
documents more effortless.
The most commonly used text editors are:
Notepad (Windows)
WordPad (Windows)
Simpletext (Macintosh)
Adobe Dreamweaver (All)
13. HTML TAGS
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by
angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag
is the end tag
The end tag is written like the start tag, with a
forward slash before the tag name
Start and end tags are also called opening tags and
closing tags
14. HTML ELEMENT SYNTAX
An HTML element starts with a start tag /
opening tag
An HTML element ends with an end tag /
closing tag
The element content is everything between the
start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
15. HTML ATTRIBUTES
HTML elements can have attributes
Attributes provide additional information about an
element
Attributes are always specified in the start tag
Attributes come in name/value pairs like:
name="value"
Example
HTML links are defined with the <a> tag.
The link address is specified in the href attribute:
<a href="http://www.example.com">This is a link</a>
16. THE HTML <HEAD> ELEMENT
The <head> element is a container for all the head
elements. Elements inside <head> can include
scripts, instruct the browser where to find style
sheets, provide meta information, and more.
The <title> tag defines the title of the document.
The <title> element is required in all HTML/XHTML
documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to
favorites
displays a title for the page in search-engine results
17. HTML ATTRIBUTES
class Specifies one or more class
names for an element (refers to
a class in a style sheet)
id Specifies a unique id for an
element
style Specifies an inline CSS style for
an element
title Specifies extra information about
an element (displayed as a
tool tip)
18. HTML HEADINGS
Headings are defined with the <h1> to <h6>
tags.
<h1> defines the most important heading.
<h6> defines the least important heading.
Exmaple
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
19. HEADINGS ARE IMPORTANT
Use HTML headings for headings only. Don't
use headings to make text BIG or bold.
Search engines use your headings to index the
structure and content of your web pages.
Since users may skim your pages by its
headings, it is important to use headings to
show the document structure.
H1 headings should be used as main headings,
followed by H2 headings, then the less
important H3 headings, and so on.
20. HTML LINES
The <hr>tag creates a horizontal line in an
HTML page.
The hr element can be used to separate
content:
Example
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
21. HTML COMMENTS
Comments can be inserted into the HTML
code to make it more readable and
understandable. Comments are ignored by
the browser and are not displayed.
Comments are written like this:
<!-- This is a comment -->
22. HTML PARAGRAPHS & LINE BREAKS
Paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Use the <br> tag if you want a line break (a
new line) without starting a new
paragraph:
<p>This is<br>a para<br>graph with line
breaks</p>
23. HTML TEXT FORMATTING
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice
or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
24. HTML COLORS
Colors are displayed combining RED, GREEN, and
BLUE light.
The combination of Red, Green, and Blue values
from 0 to 255, gives more than 16 million different
colors (256 x 256 x 256).
HTML colors are defined using a hexadecimal
notation (HEX) for the combination of Red, Green,
and Blue color values (RGB).
The lowest value that can be given to one of the
light sources is 0 (in HEX: 00). The highest value is
255 (in HEX: FF).
HEX values are specified as 3 pairs of two-digit
numbers, starting with a # sign.
26. HTML HYPERLINKS (LINKS)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image
that you can click on to jump to another document.
When you move the cursor over a link in a Web page,
the arrow will turn into a little hand.
The most important attribute of the <a> element is the
href attribute, which indicates the link‟s destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
<a href="url">Link text</a>
27. HTML LINKS
The target Attribute
The target attribute specifies where to open
the linked document.
The example below will open the linked
document in a new browser window or a new
tab:
<a href="http://www.abc.com/"
target="_blank">abc!</a>
28. HTML LINKS
The id Attribute
The id attribute can be used to create a
bookmark inside an HTML document.
Tip: Bookmarks are not displayed in any
special way. They are invisible to the reader.
<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips
Section</a>
<a href="http://www.abc.com/html_links.htm#
29. HTML IMAGES - THE <IMG> TAG AND THE SRC
ATTRIBUTE
In HTML, images are defined with the <img>
tag.
The <img> tag is empty, which means that it
contains attributes only, and has no closing
tag.
To display an image on a page, you need to
use the src attribute. Src stands for "source".
The value of the src attribute is the URL of
the image you want to display.
<img src="url" alt="some_text">
30. HTML IMAGES - SET HEIGHT AND WIDTH OF AN
IMAGE
The height and width attributes are used to
specify the height and width of an image.
The attribute values are specified in pixels by
default:
The alt attribute provides alternative
information for an image
<img src="pulpit.jpg" alt="Pulpit rock"
width="304" height="228
31. WHAT IS CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML
elements
Styles were added to HTML 4.0 to solve a
problem
External Style Sheets can save a lot of
work
External Style Sheets are stored in CSS files
32. STYLING HTML WITH CSS
CSS was introduced together with HTML 4, to
provide a better way to style HTML elements.
CSS can be added to HTML in the following
ways:
Inline - using the style attribute in HTML
elements
Internal - using the <style> element in the
<head> section
External - using an external CSS file
The preferred way to add CSS to HTML, is to
put CSS syntax in separate CSS files.
34. CSS SYNTAX
A CSS rule has two main parts: a selector,
and one or more declarations:
The selector is normally the HTML element
you want to style.
Each declaration consists of a property and a
value.
The property is the style attribute you want to
change. Each property has a value.
p {color:red;text-align:center;}
35. INLINE STYLES
An inline style can be used if a unique style is to
be applied to one single occurrence of an
element.
To use inline styles, use the style attribute in the
relevant tag. The style attribute can contain any
CSS property. The example below shows how
to change the text color and the left margin of a
paragraph:
<p style="color:blue;margin-left:20px;">This is a
paragraph.</p>
36. INTERNAL STYLE SHEET
An internal style sheet can be used if one single
document has a unique style. Internal styles are
defined in the <head> section of an HTML page,
by using the <style> tag, like this:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
37. EXTERNAL STYLE SHEET
An external style sheet is ideal when the style is
applied to many pages. With an external style
sheet, you can change the look of an entire Web
site by changing one file. Each page must link to
the style sheet using the
<link> tag. The <link> tag goes inside the <head>
section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
39. CSS ID AND CLASS
The id Selector
The id selector is used to specify a style for a single,
unique element.
The id selector uses the id attribute of the HTML element,
and is defined with a "#".
The style rule below will be applied to the element with
id="para1":
Example
#para1
{
text-align:center;
color:red;
}
40. THE CLASS SELECTOR
The class selector is used to specify a style for
a group of elements. Unlike the id selector, the
class selector is most often used on several
elements.
This allows you to set a particular style for many
HTML elements with the same class.
The class selector uses the HTML class
attribute, and is defined with a ".“
Example
.center {text-align:center;}
41. CSS BACKGROUND
CSS background properties are used to define
the background effects of an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
body {background-color:#b0c4de;}
42. CSS TEXT PROPERTIES
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between
characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text unicode-bidi
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is
handled
word-spacing Increases or decreases the space between words in
a text
43. CSS TEXT EXAMPLES
h1 {color:#00ff00;}
h1 {text-align:center;}
a {text-decoration:none;}
p.uppercase {text-transform:uppercase;}
p {text-indent:50px;}
P {tex-shadow:0px 0px 5px inset; }
P {tex-shadow:0px 0px 5px ; }
44. CSS FONT PROPERTIES
font Sets all the font properties in one
declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text
should be displayed in a small-caps
font
font-weight Specifies the weight of a font
45. CSS FONT EXAMPLE
p{font-family:"Times New Roman", Times,
serif;}
p.italic {font-style:italic;}
h1 {font-size:40px;}
h1 {font-size:2.5em;}
h1 {font-weight:bold;}
h1 {font-variant:small-caps;}
46. CSS LINKS
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
All links comes in sequence
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link
*/
a:active {color:#0000FF;} /* selected link */
47. CSS BOX MODEL
All HTML elements can be considered as boxes.
In CSS, the term "box model" is used when
talking about design and layout.
The CSS box model is essentially a box that
wraps around HTML elements, and it consists
of: margins, borders, padding, and the actual
content.
The box model allows us to place a border
around elements and space elements in relation
to other elements.
49. CSS BOX MODEL CONT..
Explanation of the different parts:
Margin - Clears an area around the border. The
margin does not have a background color, it is
completely transparent
Border - A border that goes around the padding and
content. The border is affected by the background
color of the box
Padding - Clears an area around the content. The
padding is affected by the background color of the
box
Content - The content of the box, where text and
images appear
50. WIDTH AND HEIGHT OF AN ELEMENT
The total width of the element in the example
below is 300px:
.Element {width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
}
Let's do the math:
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
51. CSS BORDER
border Sets all the border properties in one
declaration
border-bottom Sets all the bottom border properties in one
declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one
declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one
52. CSS BORDER CONT….
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four
borders
border-top Sets all the top border
properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
53. CSS BORDER CONT…
border-style values:
{none,dotted,dashed,solid,double,groove,ri
gid}
border-style values:
Color , width so
Example
border:5px solid red;
Border-bottom:5px dashed blue;
54. CSS OUTLINES
outline Sets all the outline properties in
one declaration
outline-color Sets the color of an outline
outline-style Sets the style of an outline
none
outline-width Sets the width of an outline thin
55. CSS MARGIN
margin A shorthand property for setting
the margin properties in one
declaration
margin-bottom Sets the bottom margin of an
element
margin-left Sets the left margin of an
element
margin-right Sets the right margin of an
element
margin-top Sets the top margin of an
57. CSS PADDING
Padding A shorthand property for setting
all the padding properties in
one declaration
padding-bottom Sets the bottom padding of an
element
padding-left Sets the left padding of an
element
padding-right Sets the right padding of an
element
padding-top Sets the top padding of an
59. CSS DISPLAY AND VISIBILITY
Hiding an Element - display:none or
visibility:hidden
Hiding an element can be done by setting the
display property to "none" or the visibility
property to "hidden". However, notice that
these two methods produce different results:
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
60. CSS POSITIONING
The CSS positioning properties allow you to
position an element. It can also place an
element behind another, and specify what
should happen when an element's content is too
big.
Elements can be positioned using the top,
bottom, left, and right properties. However,
these properties will not work unless the
position property is set first. They also work
differently depending on the positioning method
61. CSS POSITIONING PROPERTIES
bottom Sets the bottom margin edge for a
positioned box
clip Clips an absolutely positioned element
cursor Specifies the type of cursor to be
displayed
left Sets the left margin edge for a positioned
box
overflow
Specifies what happens if content overflows
an element's box
62. CSS POSITIONING PROPERTIES
position Specifies the type of positioning for
an element
(absolute,fixed,relative,static,inherit)
right Sets the right margin edge for a
positioned box
top Sets the top margin edge for a positioned
box
z-index Sets the stack order of an element
63. CSS FLOAT
Elements are floated horizontally, this means that an
element can only be floated left or right, not up or
down.
A floated element will move as far to the left or right
as it can. Usually this means all the way to the left or
right of the containing element.
The elements after the floating element will flow
around it.
The elements before the floating element will not be
affected.
If an image is floated to the right, a following text
flows around it, to the left:
64. HTML TABLES
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr>
tag), and each row is divided into data cells
(with the <td> tag). td stands for "table data,"
and holds the content of a data cell. A <td>
tag can contain text, links, images, lists,
forms, other tables, etc.
66. THE HTML <DIV> ELEMENT
The HTML <div> element is a block level element that can
be used as a container for grouping other HTML
elements.
The <div> element has no special meaning. Except that,
because it is a block level element, the browser will
display a line break before and after it.
When used together with CSS, the <div> element can be
used to set style attributes to large blocks of content.
Another common use of the <div> element, is for
document layout. It replaces the "old way" of defining
layout using tables. Using <table> elements for layout is
not the correct use of <table>. The purpose of the <table>
element is to display tabular data.
<div>content</div>
67. THE HTML <SPAN> ELEMENT
The HTML <span> element is an inline element
that can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span>
element can be used to set style attributes to
parts of the text.
<div> Defines a section in a document (block-
level)
<span> Defines a section in a document (inline)
68. HTML FORMS
HTML forms are used to pass data to a server.
An HTML form can contain input elements like
text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain
select lists, textarea, fieldset, legend, and label
elements.
The Input Element
<form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text"
name="lastname">
</form>
69. FORMS CONT…
Password Field
Password: <input type="password" name="pwd">
Radio Buttons
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
Checkboxes
<input type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I
have a car
Submit Button
<input type="submit" value="Submit">
70. HTML LISTS
HTML Unordered Lists
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items are marked with bullets
(typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
71. LIST CONT…
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
72. LISTS CONT…
A description list is a list of terms/names, with a
description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines
terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>