HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to
use it, you may be in violation of copyright laws. In addition, you cannot control
external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the
URL does not include the domain name. If the URL begins without a slash, it will be
relative to the current page. Example: src="img_girl.jpg". If the URL begins with a
slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change
domain.
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify
the width and height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to a slow
connection, or an error in the src attribute, or if the user uses a screen reader.
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and
more.
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for
images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font,
size, and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element
HTML headings are titles or subtitles that you want to display on a
webpage.
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Tag Reference
Tag Description
<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an HTML
element.
Text Color
The CSS color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
HTML Styles - CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the
layout of a webpage.
With CSS, you can control the color, font, the size of
text, the spacing between elements, how elements
are positioned and laid out, what background images
or background colors are to be used, different
displays for different devices and screen sizes, and
much more!
Tip: The word cascading means that a style applied to a parent element will also
apply to all children elements within the parent. So, if you set the color of the body
text to "blue", all headings, paragraphs, and other text elements within the body
will also get the same color (unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is easier
to demonstrate, and easier for you to try it yourself.
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.
The following example sets the text color of the <h1> element to blue, and the text
color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
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.
The following example sets the text color of ALL the <h1> elements (on that page)
to blue, and the text color of ALL the <p> elements to red. In addition, the page will
be displayed with a "powderblue" background color:
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML
page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor. The file must not contain
any HTML code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Tip: With an external style sheet, you can change the look of an entire web site, by
changing one file!
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more
about them later.
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
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Example
Use of CSS border property:
p{
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.
Example
Use of CSS border and padding properties:
p{
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
p{
border: 2px solid powderblue;
margin: 50px;
}
Link to External CSS
External style sheets can be referenced with a full URL or with a path relative to the
current web page.
Example
This example uses a full URL to link to a style sheet:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Example
This example links to a style sheet located in the html folder on the current web
site:
<link rel="stylesheet" href="/html/styles.css">
Example
This example links to a style sheet located in the same folder as the current page:
<link rel="stylesheet" href="styles.css">
Chapter Summary
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
CSS Height, Width and Max-width
The CSS height and width properties are used to set the height and width of an
element.
The CSS max-width property is used to set the maximum width of an element.
CSS Setting height and width
The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets
the height/width of the area inside the padding, border, and margin of the element.
CSS height and width Values
The height and width properties may have the following values:
auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value
CSS height and width Examples
This element has a height of 200 pixels and a width of 50%
Example
Set the height and width of a <div> element:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Example
Set the height and width of another <div> element:
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Note: Remember that the height and width properties do not include padding,
borders, or margins! They set the height/width of the area inside the padding,
border, and margin of the element!
Setting max-width
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%)
of the containing block, or set to none (this is default. Means that there is no
maximum width).
The problem with the <div> above occurs when the browser window is smaller than
the width of the element (500px). The browser then adds a horizontal scrollbar to
the page.
Using max-width instead, in this situation, will improve the browser's handling of
small windows.
Tip: Drag the browser window to smaller than 500px wide, to see the difference
between the two divs!
Note: If you for some reason use both the width property and the max-
width property on the same element, and the value of the width property is larger
than the max-width property; the max-width property will be used (and
the width property will be ignored).
Example
This <div> element has a height of 100 pixels and a max-width of 500 pixels:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
All CSS Dimension Properties
Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element
