Scribd
Upload
35 views14 pages

Web 01 - 03

The document discusses the basics of HTML including how it works, HTML elements like headings, paragraphs and links, attributes, tags, and other structures like tables and forms. It provides examples and explanations of common HTML components and their usage.

Uploaded by

Cobe Bryn Lopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views14 pages

Web 01 - 03

The document discusses the basics of HTML including how it works, HTML elements like headings, paragraphs and links, attributes, tags, and other structures like tables and forms. It provides examples and explanations of common HTML components and their usage.

Uploaded by

Cobe Bryn Lopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

IT2301

INTRODUCTION TO HTML An HTML document can be opened and modified using various source
code editors and web development applications such as Microsoft
How HTML Works Visual Studio Code and Adobe Dreamweaver. Since HTML is saved
in plain text, it can be opened and modified in any basic text editor,
Introduction to HTML and its Specification such as Windows Notepad and Apple TextEdit. Still, they do not have
features that make coding easier for developers.
HyperText Markup Language (HTML) is the standard markup
language for creating Web pages, no matter how simple or complex. Another critical requirement for an HTML document is saving it with a
It allows a web author to arrange and define how content should be .html file extension. To preview an HTML webpage, open the
displayed. document on a web browser such as Google Chrome, Microsoft Edge,
or Apple Safari.
The “HyperText” in HTML refers to how links on the Web let users
move from one document to another. It happens when clicking a HTML Basics
highlighted link related to the topic being read in an article takes the
reader from that page to another. HTML Element

HTML has been evolving as a technology standard since Tim Berners- It is the component of an HTML document containing formats,
Lee's introduction in 1993. HTML5 is the fifth and latest version of the instructions, and semantic meaning. It consists of a start tag, content,
language. HTML5 supports multimedia such as audio and video, new and an end tag, such as the following:
tags, elements, and application programming interfaces (API).
<p> Hello World! </p>
The World Wide Web Consortium (W3C) manages the specifications
of what is in HTML and what is not. Companies that create web Paragraph <p></p> – the basic unit of text in an HTML document.
browsers take their specifications and implement behaviors expected
when browsers come across any of the allowed formatting, such as An HTML element such as a paragraph may also contain another
making text bold, changing its color, and even both element such as the following, <strong> World! </strong> being
simultaneously. The HTML specifications constantly evolve, and the the other element. <br> element is used to add a line break to the
changes from version to version are only added to expand browser HTML code and creates another blank line. It has no end tag.
functionality and modernize technology.
<p>
HTML Document Hello
<strong>
It is a text file created in any text editor containing textual content, World!
elements, attributes, and tags such as <html>, <head>, <title>, </strong>
and <body>. These naming conventions tell the computer and the <br>
web browser that it is in HTML and should be read as such. By Welcome!
applying these conventions to a text file, a user can write and design </p>
a basic webpage and upload it to the Internet.

01 Handout 1 *Property of STI


[email protected] Page 1 of 4
IT2301

HTML Attribute Headings

It is used to modify or define an HTML element. It is placed within an These are titles or subtitles that can be displayed on a webpage. It has
element's opening tag, which can contain multiple attributes separated six (6) levels, with the heading number indicating a heading of less
by a space. It is also known as the name=value pair, as it provides importance, <h1> being the top level, and <h6> as the lowest.
additional styling to the element.
Sample
Example:
<p class=”important”> Hello World! </p>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
class is the attribute name, while important is the value enclosed …
with quotation marks. <h6> Heading 6</h6>

HTML Tags Links

These keywords define how web browsers will format and display the a href attribute that specifies the URL of the webpage the link goes
content on an HTML file. They are the starting and ending parts of an to. It must have a destination and a label. Syntax: <a
HTML element. Whatever is written inside the angle brackets (<,>) are href=”URL”></a>
called tags. The most common kind consists of strings or a sequence
of characters enclosed in opening and ending tags, like the following: An absolute URL directs to another website such as:
<a href=https://www.google.com.ph> Google </a>

A relative URL directs to a file within the same website, such as:
<a href=”image.html”> Sample Products </a>

Form

It is an alternative way to interact with the server and collect user


inputs. It is constructed in HTML in the same manner as table <table>
or list <li>. It uses <form> tag.

A sample that displays a form for name submission:


Source: Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be <form action=”#”>
dangerous. Addison-Wesley <input type=”text” placeholder=”FirstName”/>
Figure 1. Anatomy of a typical HTML tag <br>
<input type=”text” placeholder=”LastName”/>
Figure 1 details the anatomy of a typical tag, including the name of <br>
the element (strong), angle brackets, and a forward slash (/ - marks <input type=”text” placeholder=”Email”/>
the end tag). </form>

01 Handout 1 *Property of STI


[email protected] Page 2 of 4
IT2301

HTML Table HTML Structure

It consists of table cells that allow web developers to organize and HTML follows a proper structure to have an organized syntax in an
arrange data into rows and columns. It uses <table> tag. HTML document.
Table Elements
 Table Header <th> – the top row of a table that acts as a title Sample HTML Structure:
for the type of information in each column. <!DOCTYPE>
 Table Row <tr> – used to indicate the number of rows <html>
displayed in a table. <head lang=“en”>
 Table Data <td> – holds the data displayed in a table. The <title> My first Web Page</title>
data must match the position of the header it corresponds to. <meta charset=”utf-8”/>
 Colspan is used to join two or more columns in a table, while <link rel=”stylesheet” href=”../css/hw.css”/>
Rowspan is used to do the same for rows. Border attribute is <script src=”hellowordjs.js”></script>
used to separate the table cells. </head>
 <thead>, <tfoot>, and <tbody> are used to group the <body>
header, footer, and body content in a table. <h1 class=”sample”>Hello World!</h1>
<body>
<th>, <tr>, and <td> Using colspan and rowspan </html>
<table> <table>
<tr> <tr> In this sample structure, it uses the following syntax and elements:
<th>Firstname</th> <th>Name</th>
<th>Lastname</th> <th>Subject</th> 1. <!DOCTYPE> – short for Document Type Definition that tells the
</tr> <th>Marks</th> browser or any software reading the HTML document what type
<tr> </tr> of document is about to be processed. The HTML document will
<td>Aryan</td> <tr> not work without this element.
<td>Gupta</td> <td> rowspan=“2”> 2. <html> – also referred to as “root element.” It is the container for
all other HTML elements except for <!DOCTYPE>.
</tr> Jack</td>
<tr> <td>Math</td> 3. <title> - shows extra information about an element.
<td>John</td> <td>94</td> 4. <head> – the container for metadata (data about data) which is
<td>Reece</td> </tr> placed between the <html> and the <body> tags.
</tr> <tr> 5. <meta> – used to specify the page description, author of the
<tr> <td>Science</td> document, character coding, and other metadata.
<td>Samntha</td> <td>88</td> 6. <body> – defines the content in an HTML document displayed in
<td>Grooves</td> </tr> the browser.
</tr> <tr> 7. <link> – defines the connection between the current document
</table> <td colspan = “3”> Row and an external source.
3 Cell 1</td> 8. <script> – used to embed a client-side script (JavaScript) that
</tr> either contains scripting statements or points to an external script
</table> file through the src attribute.

01 Handout 1 *Property of STI


[email protected] Page 3 of 4
IT2301
References:
Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be dangerous.
Addison-Wesley.
Gupta A. (2021). A complete guide to HTML tables. [Web Article]. Retrieved on
January 23, 2022, from https://www.simplilearn.com/tutorials/html-tutorial/html-
tables
Lutkevich B. (2022). HTML (hypertext markup language). [Web Article]. Retrieved on
January 20, 2022, from https://www.theserverside.com/definition/HTML-
Hypertext-Markup-Language

01 Handout 1 *Property of STI


[email protected] Page 4 of 4
IT2301

HTML Essentials List

HTML Elements and Attributes It is a way to group a set of related items in HTML. It has two
specifications for ordered and unordered list, but both uses the <li>
Image tag.

It is a way to embed an image or an animated image, such as GIF, on An unordered HTML list starts with <ul> tag and will be marked by
an HTML webpage. The <img> tag has no closing tag and is used bullets, while an ordered HTML list starts with <ol> tag and is marked
with the following syntax: with numbers by default.

<img src="URL" alt="alternate text"> Unordered List Ordered List


<ul> <ol>
The tag contains two attributes: src for specifying the path of the <li>Eggs</li> <li>January</li>
image and alt for determining an alternate text for the image. The <li>Alcohol</li> <li>February</li>
URL includes the file name and the file extension if it is in the same <li>Snacks</li> <li>March</li>
folder. </ul> </ol>

The <img> tag can also contain the width and height attributes for HTML also supports description lists that let users list terms with their
setting the size specification of the image in pixels, such as: descriptions. It uses the <dl> tag to define the description list, the
<dt> tag to define the term, and the <dd> tag to describe each term.
<img src="image.png" alt="display" width="210px"
height="140px"> <dl>
<dt>January</dt>
The style attribute is also used in specifying the dimensions, <dd>- the first month</dd>
preventing styles sheets from changing the image size. The colon <dt>February</dt>
symbol (:) is used for declaring values. <dd>- the second month</dd>
</dl>
<img src="image.png" alt="display"
style="width:210px;height:140px; "> Span

The folder name must be stated in the src attribute if the image is in The <span> tag is used to color or mark up a part of a text or
another sub-folder. document.

<img src="foldername/image.png" alt="display "> <p>My mother


has <span style="color:blue">blue</span> eyes.</p>
The absolute or complete URL must be written in the src attribute if
the image is on another server or website. It acts like the <div> tag, which defines a division or a section in an
HTML document.
<img src="fullurl.com/filename.jpg" alt="display">

02 Handout 1 *Property of STI


[email protected] Page 1 of 4
IT2301

Navigation Text Field

It uses the <nav> tag to define a set of navigation links. The tag is only It displays a single-line text input field for text input and uses the
used for major blocks of navigation links and not all links in an HTML <input type="text "> tag. Text fields have different inputs that web
document. It represents a page section with links to other web pages programmers can apply, including a line of text, password, email,
or parts within the same webpage. contact number, and URL.

<nav> <form>
<a href=”#”> <label for="age">Age:</label><br>
Home <input type="text" id="age" name="age"><br>
</a> <label for="bday">Birthday:</label><br>
<br> <input type="text" id="bday" name="bday">
<a href=”#”> </form>
About Me
</a> Radio Button
</nav>
It allows users to select one of the available options and uses the
<input type="radio"> to display a radio button.
In this sample code, # specifies the unique ID of an element in HTML
which is usually followed by an ID name. The ID attribute's value must <p>Best tourist destination:</p>
be unique in the HTML document, unlike the class attribute that <form>
multiple elements within an HTML document can use. <input type="radio" id="baguio" name="best_place"
value="Baguio">
Forms <label for="baguio">Baguio</label><br>
<input type="radio" id="cebu" name="best_place"
Input and Control Functions value="Cebu">
<label for="cebu">Cebu</label><br>
These are used to gather text information from users and are defined <input type="radio" id="davao" name="best_place"
by the <input> tag, which displays a type attribute such as the text, value="Davao">
radio, checkbox, and button. Note that the default width of any input <label for="davao">Davao</label>
field is up to 20 characters. </form>
The <label> tag is used to label any form elements while the <for>
Checkbox
attribute of the <label> tag must be equal to the ID attribute of the
<input> element to attach them, such as: It allows users to select as many options as possible out of the
available options. <input type="checkbox"> is used to display
<label for="ID">Name:</label><br> checkboxes.
<input type="type" id="ID" name="name" value="val">

02 Handout 1 *Property of STI


[email protected] Page 2 of 4
IT2301

Sample: Submit Button


<p>Top 2 tourist destination:</p>
<form> It allows users to submit any data entered in the input field. <input
<input type="checkbox" id="baguio" name="top2" type="submit "> is used to display a button for submitting the form
value="Baguio"> data to a form handler, typically a file on the server with a script that
<label for="baguio">Baguio</label><br> processes the data.
<input type="checkbox" id="cebu" name="top2"
value="Cebu"> The form handler is specified using the form’s action attribute, which
<label for="cebu">Cebu</label><br> specifies the address where the submitted data will be sent, such as:
<input type="checkbox" id="davao" name="top2"
value="Davao"> <form action="/action_page.php">
<label for="davao">Davao</label> <label for="age">Age:</label><br>
</form> <input type="text" id="age" name="age"
value="37"><br>
Date and Time Control <label for="bday">Birthday:</label><br>
<input type="text" id="bday" name="bday"
It is used to create various date and time inputs. <label> tag is still value="Feb25"><br><br>
used here, along with the following syntax: <input type="submit" value="Submit">
</form>
 <input type="date"> – has a format of mm-dd-yyyy
 <input type="time"> – has a format of hh:mm Multimedia and Graphics
 <input type="month”> – has a format of yyyy-mm
 <input type="week"> – has a format of Week#-yyyy HTML has features that allow multimedia and graphics to be
embedded in a webpage. Multimedia includes audio and videos that
Button boost user experience, while graphics include images, canvas, and
animations that enhance the appearance of a website.
It is used to create a button with different functions and is also defined
by <input> and <button> tags. Audio

Here are the following button controls in HTML form: It is defined using the <audio> tag and uses the <source> element
for the audio source file. The control attribute is used to add audio
 <input type="reset"> – resets the user’s input. controls such as play, pause, and volume. HTML accepts common
 <img> tag is used inside the <button> tag to make an image audio formats such as MP3, OGG, and WAV.
button.
<button type="submit"> <audio controls>
<img src="Thumbnail.png" <source src="audio.mp3">
alt="buttonpng" width="180" height="100" </audio>
>
<button>

02 Handout 1 *Property of STI


[email protected] Page 3 of 4
IT2301

Video

It is defined using the <video> tag and uses the <source> element
for the video source file. The poster attribute is used to display a
thumbnail before playing the video. The control attribute also adds
video controls such as play, pause, and volume. HTML accepts
common audio formats such as MP4, WebM, and OGG.

<video poster=”playbutton.png”
width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>

Canvas

It is defined using the <canvas> tag to draw graphics such as paths,


boxes, circles, text, and adding images. This tag is only a container
for graphics, and it requires JavaScript to draw the graphics.

A canvas has no border and no content on an HTML page, so using


the width and height attributes is necessary to define the size of the
canvas. It is also important to specify its ID attribute such as:

<canvas id="Canvas" width="200" height="100"


style="border:1px solid #000000;">
</canvas>

References:
Casabona, J. (2021). Visual quickstart guide: HTML and CSS. Pearson Education,
Inc.
Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and Layout to be dangerous.
Addison-Wesley.
W3Schools (2022). HTML Forms. [Web Article]. Retrieved on January 31, 2022, from
https://www.w3schools.com/html/html_forms.asp

02 Handout 1 *Property of STI


[email protected] Page 4 of 4
IT2301

FUNDAMENTALS OF CASCADING STYLE SHEET


(CSS)
Connecting CSS to HTML (Casabona, 2020)
As HTML provides the structure of the webpage, Cascading Style Sheet (CSS) supplies the style. CSS
describes how a webpage should look in terms of colors, fonts, and spacing among others. It can make the
website look whatever the designer wants.

CSS is currently on its third version, CSS3, which allows animations, more visual effects, and more support for
layout features such as columns and grids. This version is more dependent on the user’s browsers. With HTML,
browsers treat unknown tags as plain text, making them render properly, while older browsers are unlikely to
support newer features of CSS3.

Although HTML and CSS perform different functions for a website, they are often linked as they are both
processed by a browser. They are also the two (2) fundamental languages for making modern websites, though
HMTL is only required to make a webpage, without CSS, the webpage will not look much more than a Microsoft
Word document.

Figure 1. HTML only. Retrieved from Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc.

Figure 2. HTML with CSS. Retrieved from Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc.

03 Handout 1 *Property of STI


[email protected] Page 1 of 6
IT2301

CSS Syntax (Casabona, 2020)

CSS is used to change the look and user experience of a webpage by targeting HTML elements and applying
different styles such as formatting the text, changing the font, or arranging the layout.

The “cascading” part of CSS means that styles are applied in the order they are encountered by the browser,
from the top of the style sheet to the bottom. If line 1 is defined that paragraphs should have blue text, and line
10 is defined to have red, the paragraphs will have red text.

CSS uses codes to define the styles to be applied to each element in a webpage. A collection of these code
statements is called a style sheet which can be stored in the HTML document they apply to or in separate text
files.

A CSS statement or ruleset contains several parts.

p { In this syntax, p is the selector, which is the specific HTML element to be styled
font-size: 30px; with CSS. The selector is followed by an opening and closing curly brace which
color: orange; contains the declaration. The declaration includes the property (font size,
} color), and the value (30px, orange), and ends with a semicolon (;).

There are two (2) primary approaches to adding CSS to any webpage: as an internal style sheet in the HTML
document and as an external style sheet in a separate file.

Internal Style Sheet


It refers to when the CSS ruleset is inside the HTML document. The <style> tag is used for this approach
which is placed between the opening and closing <head> tag or anywhere before the </html> tag such as:

<!DOCTYPE>
<html>
<p>Reminder to be kind.</p>
Output:
<style>
p {
font-size: 30px;
color: orange;
}
</style>
</html>

External Style Sheet


It refers to when the CSS ruleset is on a separate file. The CSS between the <style> tags can be placed in a
separate file using the .css extension which will only have the rulesets. It needs to be referenced in the head of
the HTML documents using the <link> tag.

Using style.css for example, the syntax would look like this:

The <link> tag uses the href attribute which refers to the relative or
<link rel="stylesheet"
absolute URL of the file, and the rel attribute to specify the relationship
href="style.css" />
between the current document and the linked document.

03 Handout 1 *Property of STI


[email protected] Page 2 of 6
IT2301

Styling and Formatting


Styling Text
It can have the biggest impact on the general design of the website. There are several fonts, but traditionally
web-safe fonts include Arial, Courier New, Georgia, Verdana, and Times New Roman.

In CSS, the font-family property is used to define the font. It is a comma-separated list of fonts from highest to
lowest priority, with the font to be used listed first and followed by others in the order they are to be used. This
process is called font stack.

p {
This code tells the browser to use Times New Roman first.
font-family: Times New Roman,
If it is not available, it uses Cambria as a fallback. It uses
"Cambria", serif; the system’s default serif font if it is also unavailable.
}

To set the default font for the whole website:


1. At the top of the .css file, type body {
This targets the elements within the <body> tag which will inherit the assigned font styles.
2. Type font-family:
3. Type Futura, Times New Roman, Helvetica, sans-serif;
Futura is only installed on macOS by default, so this font stack provides more widely available fonts.
4. Type }, save the file, and test it on any browser.

Sizing Text
Text can be resized using the font-size property such as:

p { Different units of measurement are used in this property. Pixels (px) is a fixed
font-size: 30px; measurement that gives designers the most control over the size, and
} Percentage (%), which has a default size of 16px.

Formatting Text

The font-weight property allows the application of different boldness to text including normal which is the
unbolded text, lighter which is thinner than the normal weight, bold which creates darker text, and bolder
which makes text thicker than the bold weight. It uses font-weight: value; as its descriptor.

The font-style property italicizes text. It includes normal which is the normal, straight text, italic which uses
the italic style, and oblique which uses the oblique style. It uses font-style: value; as its descriptor.

The text-decoration property allows emphasis lines to text. It includes none which means no change,
underline to add a like under the text, overline which adds a line over the text, and line-through which is
the same as a strike. It uses text-decoration: value; as its descriptor.

The text-align property aligns the text horizontally. It uses text-align: value; as its descriptor. The values
include left, right, center, and justify.

03 Handout 1 *Property of STI


[email protected] Page 3 of 6
IT2301

Adding Colors
Finding the right color scheme for a website is essential to good design. Codes and names of acceptable colors
are available on the Internet. There are three (3) methods to define colors in CSS:
 RGB: A comma-separated list of the amount of red, green, and blue in a color, ranging from 0 to 255.
 Hexadecimal (hex) values: A six-character code that defines the RGB in a color preceded by a #.
 Color names: A set of predefined names for colors. The easier method to use.

Background Property
This adds an image or a color to the background of the webpage. The background image can be set in horizontal
and vertical views.

It uses background-image: value; as its descriptor. The value is the link to the image. The descriptor
background-repeat: no-repeat sets the background without repetition, while repeat-x; and repeat-y
values repeat the background horizontally and vertically, respectively,

To set a background color for a style in CSS:


1. In the .css file, type the name of the desired selector to apply the style rule. For example, body.
2. Type { to begin the declaration block.
3. Type the name of the desired property to be defined and its value. For example, to turn the page
blue, type background:#0000FF;
4. Type the next property to define including its value. To make the body text white, type
color:#FFFFFF;
5. Type } to close the declaration block and the style rule.

03 Handout 1 *Property of STI


[email protected] Page 4 of 6
IT2301

The Box Model (Casabona, 2020)


The box model refers to how CSS sees every HTML element as if it is in its own box. This “box” consists of
borders, paddings, margins, and content. By default, when a browser loads a webpage, the boxes flow on the
page sequence as it encounters them in the code. This process is often called the normal flow.

Figure 3. The box model.

Border
This can be put on all four sides or put individually on any side. This can also be modified using colors, styles,
width, radius, margin, and padding. Margin is the property that adds spacing around the content, while padding
adds spacing within the elements or white space inside the container.

For style, it has the following values and border styles:


 Dotted – consists of rounded dots that display on a border.
 Solid – a single, straight, and solid border.
 Dashed – short dashes or line segments.
 Double – a two-line solid border.
 Groove – a three-dimensional border that looks like it is carved into the page.
 Ridge – a three-dimensional border that is opposite of the groove style.
 Inset – makes content in the border look like it is coming inside of the canvas.
 Outset – makes content in the border look like it is coming outside of the canvas.

03 Handout 1 *Property of STI


[email protected] Page 5 of 6
IT2301

Syntax Table for Border Color, Style, and Width


Syntax Description
Creates a border around all four sides. The 5px is the width of the
border: 5px solid black; border, solid specifies the line type of a border, and black specifies
the color of a border.
border-top: 5px solid black; Adds a border on top of an element.
border-right: 5px solid black; Adds border on the right side of an element.
border-bottom: 5px solid black; Adds a border at the bottom of an element.
border-left: 5px solid black; Adds a border on the left side of an element.
border-color: blue; Adds a color on all sides of a border.
Specifies the colors on all sides of a border. The first color refers
border-color: blue yellow red
to the top border, the second color to the right side, the third color
black;
to the bottom, and the last color to the left side.
Specifies the colors for the top, bottom, right and left borders.
border-color: blue red black; The first color refers to the top border, the second color to the right
and left borders, and the last color to the bottom border.
Specifies the colors for the top and bottom borders and left and
border-color: blue red; right borders. The first color refers to the top and bottom borders,
while the second color refers to the right and left borders.
border-top-color: red; Sets the color of any specified border.
border-style: solid; Displays a straight and solid border around all four sides.
Specifies the style on all sides of a border. The first style refers
border-style: dotted solid dashed
to the top border, the second style to the right side, the third style
double;
to the bottom, and the last style to the left side.
Specifies the styles for the top, bottom, right and left borders.
border-style: groove ridge inset; The first style refers to the top border, the second style to the right
and left borders, and the last style to the bottom border.
Specifies the styles for the top and bottom borders and left and
border-style: solid dotted; right borders. The first style refers to the top and bottom borders,
while the second style refers to the right and left borders.
border-specificside-style: Sets the style of any specified border.
value;
border-width: 5px; Sets the border width equally on all sides.

Specifies the width on all sides of a border. The first width refers
border-width: 2px 5px 3px 8px;
to the top border, the second to the right side, the third to the
bottom, and the last style to the left side.
Specifies the width for the top, bottom, right and left borders.
border-width: 2px 3px 5px;
The first width refers to the top border, the second width to the right
and left borders, and the last width to the bottom border.
Specifies the width for the top and bottom borders and left and
border-width: 4px 5px;
right borders. The first width refers to the top and bottom borders,
while the second refers to the right and left borders.
border-right-width: 10px; Sets the width of any specified border.
margin: auto; Sets the content to the center of the container
Table 1. Syntax table
The concept for setting up the width is the same as setting up the radius, margin, and padding.

References:
Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc.
Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be dangerous. Addison-Wesley.

03 Handout 1 *Property of STI


[email protected] Page 6 of 6

You might also like