Fundamentals of HTML/CSS

Fundamentals of HTML/CSS

Learning Objectives

This lesson provides an overview of the basic and fundamental topics of Cascading Style Sheets (CSS) and their relation to HTML content. By the end of this lesson, learners will be able to:

• Identify the Document Object Model (DOM) and its properties.

• Use CSS selectors and HTML styling options.

• Create HTML tables.

• Create HTML forms.

• Create an HTML navigation bar with CSS styling.

Table of Contents

Introduction to the Document Object Model.

Box Model Properties:

Content.

Padding.

Border.

Margin.

• Introduction to Cascading Style Sheets (CSS).

• Properties and Values in CSS.

• CSS Units: Lengths.

• Different Ways to Apply CSS Styles:

Inline Style.

Internal Styling.

External Style Sheets.

CSS Comments. - CSS Selectors:

Type Selector.

Combinators:

• Descendant.

• Child.

• Adjacent Sibling.

• General Sibling.

"class" and "id."

Precedence.

Pseudo-Classes.

Pseudo-Elements.

• HTML Tables.

• HTML Layout Elements.

Navigation Bar.

• HTML Forms.

• HTML Input Types.

Introduction to the Document Object Model

The Document Object Model (DOM) is a programming interface for HTML and XML documents.

• A web page is a document. This document can be either displayed in the browser window or as the HTML source, but it is the same document in both cases. Likewise, the DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

The DOM represents the web page as nodes and objects so that programs can change the document structure, style, and content.

• The W3C DOM and WHATWG DOM standards are implemented in most modern browsers. Many browsers extend the standard; therefore, care must be exercised when using them on the web where documents may be accessed by various browsers with different DOMs.

We will practice DOM manipulation in the JavaScript lessons.

Box Model Properties

Before understanding how to create CSS layouts, you need to understand the Box Model. In CSS, the term "box model" is used when talking about design and layout.

Box Model:

The Cascading Style Sheets (CSS) box model is the foundation of a layout on the Web.

• Each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like layers.

• As a browser renders a web page layout, it determines what styles are applied to the content of each box, how big the surrounding is, and where the boxes sit in relation to one another.

Width and height represent the dimensions of the box. This includes the content inside the box.

• The height and width describe dimensions of the actual content of the box (text, images, ...).

Box Model Properties (continued)

• Padding is the space between the inner-edges of the box and the outer-edges of the content, including the border.

Padding can be applied as padding-left, padding-right, padding-top, and padding-bottom, or individually or all at once.

• The Border sits right on top of the outer edges of the padding and defines the thickness of the edges of the box. Style (including color) can be applied to individual parts of the border.

• Margin is the space around the border. Think about margin like personal space.

Style can be applied to individual parts of the margin (margin-left, margin-right, margin-top, and margin-bottom).

Note: Too much padding might cause the box to stretch more than its dimensions.

Box Model Properties (continued)

The following example shows the box model diagram on the top-right for the specified code on the left.

1. The top-left section has CSS properties of the $p$ element.

2. The bottom-left section has HTML code of the $p$ element.

3. The top-right section shows the box model diagram of the p element (copied from the browser inspector on Chrome).

4. The bottom-right section shows the output of this HTML code.

Introduction to Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language, which means that it lets you apply styles selectively to elements in HTML documents. For example, to select all of the paragraph elements on an HTML page and turn the text within them red, you would write this CSS:

CSS alone has no effect. Take this analogy to understand the difference between HTML and HTML with CSS:

\mathrm{HTML}$ is like a car, but without paint or polish. It can have content, like furnishings and accessories, but they are all bland and unfinished.

HTML with CSS is that same car, but with color, style, and polish. The CSS adds the finishing touches to make the car look good as well as drive well.

Web browsers apply CSS rules to a document to affect how they are displayed. This is done by applying:

Selectors: Element(s) you want to apply the updated property values to.

Properties: Values set to update how the HTML content is displayed.

Properties and Values in CSS

For each Selector, there are "properties" inside curly brackets, which simply take the form of words, such as color, font weight, or background color. The basic syntax is as follows:

• Single selector, single property: selector ${$ property: value; $}$

• Single selector, multiple properties: selector ${$ property $1:$ value; Property 2 : value; }

• Multiple selectors, single property: selector1, selector2, selector 3 { property : value; }

• Multiple selectors, multiple properties: selector1, selector2, selector 3 { property1: value; property2: value; }

A value is given to the property following a colon. Semicolons are used to separate the properties.

can have only one value, while others can have more than one value at a time.

CSS Units: Lengths

There are many property-specific units for values used in CSS, but there are some general units that are used by a number of properties, and it is worth familiarizing yourself with these before continuing.

\mathrm{px}$ (such as font-size: 12px) is the unit for pixels.

• em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em," for example, is two times the current font size.

\mathrm{pt}$ (such as font-size: 12pt) is the unit for points, a measurement typically used in printed media.

%$ (such as width: $80 %$ ) is the unit for percentage widths of the parent element.

\mathrm{vw}$ (such as $1 \mathrm{vw}$ ) is equal to $1 %$ of the viewport width. Viewport denotes browser window size.

\mathrm{vh}$ (such as $1 \mathrm{vh}$ ) is equal to $1 %$ of the viewport height.

• vmin (such as $1 \mathrm{vmin}$ ) is equal to $1 %$ of smaller length of vw or vh.

v \max$ (such as $1 v \max$ ) is equal to $1 %$ of larger length of vw or $v$.

Different Ways to Apply CSS Styles

CSS can be added to HTML documents in three ways:

• Inline - by using the style attribute inside of HTML elements.

• Internal - by using a

• 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.

Inline Style

Inline styles directly affect the tag that they are written in without the use of selectors. In order to use them, we make use of the attribute "style," followed by the equal sign (=) and quotation marks (“‘s)). Inside of the quotes, we can apply CSS syntax.

We can use inline styling to produce the same styling that was used with the style tag.

Inline Style: Example One

Inline Style: Example Two

Internal Styling

Internal styling is applied inside the HTML document itself, and is used mostly for the purpose of allowing quick styling, creating examples, and for testing purposes.

The

The 〈style〉 tags are generally placed inside the <head〉 tag because style content is not something that will be displayed in the browser.

Internal Styling: Example

This is a heading

This is a paragraph.

External Style Sheets

External style sheets are created in separate documents with a .css extension. An external style sheet is simply a listing of CSS rules. It cannot contain HTML tags.

• The $\langle$ link $\rangle$ tag, which goes in the <head $\rangle$ of and HTML page, specifies relationships between the current document and an external resource.

• The element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices), among other things.

When determining what styles to apply to elements, external stylesheets have the lowest precedence, and inline styles have the highest precedence. This means that a property written inline will override that same property in either internal styles or an external stylesheet.

To add a stylesheet to a file:

• In your styles folder, create a file name index.css.

• Go to your index.html file, and inside the <head $\rangle$ tag, add a $\langle$ link - tag

• Use the path of your index.html file for the href attribute.

Activity: External Style Sheets

Create a CSS file named style.css and add the code below.

CSS Comments

CSS comments are not displayed in the browser, but they can help document and organize your source code, as well as make it more readable.

A CSS comment is placed inside the /$.

In CSS, for both single and multiples line comments, you only have to use /* at the beginning and */ at the end of the text you would like to make into a comment; you do not need to add comment indicators on every line.

CSS Selectors

Simple selectors: Selects one or more elements based on the element type - selector, class, or id.

Combinators: Combines two or more selectors in useful selector ways for very specific selections (not exactly selectors). For example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.

• Attribute selectors: Selects one or more elements based on the attributes/attribute values.

Pseudo-classes: Matches one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.

Pseudo-elements: Matches one or more parts of content that are in a certain position in relation to an element. For example, the first word of each paragraph, or generated content appearing just before an element.

Multiple selectors: Puts multiple selectors on the same CSS rule, separated by commas to apply a single set of declarations to all the elements selected by those selectors (not separate selectors).

Simple Selector: Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. Combinators come in the following forms:

• Descendant - represented by a single space " " between selectors, selects elements matched by the second selector if they have an ancestor element matching the first selector.

Child - represented by a > between selectors, selects elements matched by the second selector if they are direct children of the element matching the first selector.

Adjacent Sibling - represented by a + between selectors, selects elements matched by the second selector if they are the next sibling element of the element matching the first selector.

General Sibling - represented by a between selectors, selects elements matched by the second selector if they are any sibling element of the element matching the first selector.

Combinators: Descendant Example

Descendant Combinator ( )

The descendant combinator ( ) separates two selectors, and matches the second element only if it is a descendant of the first element, regardless of depth.

In the example,

is the parent element. The $\langle p\rangle$ elements are descendants of the $\langle$ section $\rangle$ element. All $\langle p\rangle$ elements will be affected. CSS Block

Html Block

Combinators: Child Example

Child Combinator ( - )

The child combinator (+) separates two selectors, and matches the second element only if it is a child of the first element.

In the example,

is the parent element. The $\langle\mathrm{p}\rangle$ elements are children of the <section element. Both $\langle p\rangle$ elements will be affected.

The child selector may seem similar to the descendant selector, but note that the child selector will only affect direct children of the parent element, while the descendant selector affects all descendants of the element, regardless of nesting. CSS Block

Html Block

Combinators: Adjacent Sibling Example

Adjacent Sibling Combinator (+)

The adjacent sibling combinator (+) separates two selectors, and matches the second element only if it immediately follows the first element and both are children of the same parent element.

In the example,

is the parent element. $\langle\mathrm{h} 2\rangle$ and $\langle p\rangle$ elements are children of the same parent element. $\langle\mathrm{h} 2\rangle$ immediately precedes the first $\langle p\rangle$ element, but not the second, so only the first $\langle p\rangle$ element will be affected. CSS Block

Html Block

Combinators: General Sibling Example

General Sibling Combinator ( )

The general sibling combinator ( ) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

In the example,

is the parent element. $\langle h 2\rangle$ and $\langle p\rangle$ elements are children of the same parent element. $\langle\mathrm{h} 2\rangle$ precedes both of the $\langle\mathrm{p}\rangle$ elements, so they will both be affected. CSS Block

Html Block

Simple Selectors: CSS "class" and "id"

CSS class (.) and id (\#) are the most common forms of selectors you can use to style HTML pages. The best part about class and id is that you can customize the name of the selector as long as you follow the syntax rules. Class and id are attributes that you can assign to any HTML element to give it a custom value. For example:

$\langle p$ class="param” $\rangle \ldots\langle/ p\rangle$

$\langle$ div id="main_container'”.. 〈div〉

CSS classes are meant to style one or many elements, while id is meant to target a single HTML element only. These custom values can be anything you like; however, make sure to follow these conventions when naming a class or id:

• Use a descriptive name that starts with a letter or an underscore, never a number or special character.

• If the name consists of more the one word, use camelCase, or separate the words with a dash $(-)$ or an underscore $\left(_\right)$.

• class="mainContainer" or class="main_container" or class="main-container"

Selectors: Class Example

Class Selector (.)

The class selector (.) matches elements based on their class attributes. The selector will choose all elements with the associated class, regardless of location within the DOM.

In the example, the .grey-text class has been assigned to both $a\langle\mathrm{~h} 2\rangle$ element and one of the $\langle p\rangle$ elements, and will affect both of those elements. CSS Block

Html Block

Selectors: id Example

id Selector (\#)

The id selector (\#) matches elements based on their id attribute. The selector will choose an element with the associated id, regardless of location within the DOM.

In the example, the \#mySection id has been assigned to a

element, and will affect that entire <section〉. CSS Block

HTML Block

Selector Precedence

CSS reads its code from top-left to bottom-right, and gives precedence to some selectors over others.

If two or more identical rules are to be applied to the same HTML element, the most recent (bottom-most) rule will take precedence.

• Order of appearance becomes relevant when you use the same selector for multiple styles.

• Overall precedence order:

• Inline Style.

• ID selectors.

• Child to parent.

• Class and pseudo-classes.

• Elements and pseudo-elements.

Pseudo-Classes

A pseudo-class is used to define a special state of an element. CSS pseudo classes apply styles to the HTML elements based on some characteristics which cannot be specified using element attributes, classes, or IDs.

A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify that you want to style the selected elements, but only when they are in certain state.

For example, pseudo-classes can be used to:

• Style an element when a user mouses over it.

• Style visited and unvisited links differently.

• Style an element when it gets focus.

Example pseudo-classes include:

Syntax of Pseudo-Classes

:active

: checked

:first-child

:last-child

:nth-child

: hover

Example: Anchor Pseudo-Classes

Pseudo-Classes: :first-child Example

:first-child

The :first-child pseudo-class matches elements when they are the first child of their parent element.

In the example, p: first-child matches every $\langle p\rangle$ element that is the first child of its parent, and no other $\langle p\rangle$ elements.

Bootstrap Not first child $p$ element. First child p element. Doloribus explicabo incidunt magnam magni nobis.

CSS Block

Html Block

Pseudo-Classes: :last-child Example

:last-child

The :last-child pseudo-class matches elements when they are the last child of their parent element.

In the example, $p$ :last-child matches every $\langle p\rangle$ element that is the last child of its parent, and no other $\langle p\rangle$ elements.

Result

Bootstrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Last child p element

Also last child $\mathrm{p}$ element. CSS Block

Html Block

Pseudo-Classes: :nth-child() Example

:nth-child()

The :nth-child() pseudo-class matches elements based on their order within their group of siblings.

In the example, li:nth-child( ) matches every $<$ li> element based on its position among its siblings.

Result

1. List Item 1

2. List Item 2

3. List Item 3 CSS Block

li:nth-child(1) { color: blue; $}$

li:nth-child(2) {color: green; $}$

li:nth-child(3) {color: orange; $}$

Html Block

Pseudo-Elements

A CSS pseudo-element is used to style specified parts of an element.

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, preceded by two colons $(::)$ that can be added to the end of selectors to select a certain part of an element.

For example, pseudo-elements can be used to:

Style the first letter or line of an element.

Insert content before or after the content of an element.

Example pseudo-elements include:

• : : before

• : after

• : first-letter

• :first-line

Syntax of Pseudo-Elements

Pseudo-Elements: Examples

The following table shows different pseudo-elements and their details.

Pseudo-Element	Description	Example
$::$ before	Inserts content beginning of the targeted element content.	$\begin{array}{l}\text { div: : before }{ \ \langle p\rangle \text { Important Message }</ p\rangle\end{array}$
$::$ after	Inserts content end of the targeted element content.	$\begin{array}{l}\text { div::after }{ \ \langle p\rangle \text { end }\langle/ p\rangle\end{array}$
$::$ first-line	Selects first line of the targeted block level element	$\begin{array}{l}\text { div::first-line }{ \ \text { color: blue; }\end{array}$
$::$ first-letter	Selects first letter of the targeted block level element.	$\begin{array}{l}\text { div::first-letter }{ \ \text { color: red; }\end{array}$

HTML Tables

In HTML, you create tables using the <table element in conjunction with the $\langle\operatorname{tr}\rangle$ (table row), $\langle\operatorname{th}\rangle$ (table header), and $\langle$ td $\rangle$ (table data) elements.

Each $\langle t r\rangle$ element represents a row within the table that it is nested in, and each <td element represents a table data cell within the row that it is nested in. You can also add table headers using the $\langle t h\rangle$ element.

Click here for a reference on HTML Tables.

HTML Table Sections

Tables can be organized into sections for further clarity.

different sections of a table. The element specifies the caption (or title) of a table.

Copy the HTML to the right, into a file named table.html.

We will use this file as part of a practice activity beginning on the next slide.

Practice Activity: Table Styling

Create a style.css file, include this CSS file in your table.html file via a element. If you have not yet created your table.html file, refer to the previous slide.

In your style.css file, we will use the type selector to style the table element:

1. Add a selector for the td and th elements using the multiple selector (td, th {} ).

2. To this selector, add a border property with a value of $1 \mathrm{px}$ solid red;.

3. After adding the border, you will notice that the cells are all separated, which is the initial value for the border-collapse.

4. Add the property border-collapse to the body element with a value of collapse.

5. The table's width, by default, is the width of the content. Add a width property to the table element with a value of $100 %$

6. Now let's center the text with the text align property, added to the table element with a value of text-align: center;.

Practice Activity: Table Styling Part Two

Using the basic structure and CSS of the previous slide, create the basic layout of a calculator. Expand upon your style.css file as shown below, and edit your HTML layout to match the example.

895B

CalculatorProject.zip

archive

HTML Layout Elements

You have seen most websites on the internet usually display their content in multiple rows and columns, formatted like a magazine or newspaper to provide the users a better experience. This can be easily achieved by using HTML tags such as $\langle$ table $\rangle$, $\langle$ div $\rangle$, $\langle$ header $\rangle$, $\langle$ footer $\rangle$, $\langle$ section $\rangle$, etc., and adding some CSS styles to them.

• 〈header〉- Defines a header for a document or a section.

• 〈nav〉- Defines a set of navigation links.

• 〈section>- Defines a section in a document.

• <article〉- Defines an independent, self-contained content.

• 〈aside〉- Defines content aside from the content (like a sidebar).

• 〈footer> - Defines a footer for a document or a section.

• 〈details> - Defines additional details that the user can open and close on demand.

• 〈summary〉- Defines a heading for the 〈details〉 element.

HTML Content Division Element

$\langle$ 〈div〉

The $\leq$ div $\rangle$ HTML element is a generic content container that divides content into workable sections. The $\langle$ div> tag is the most usable tag in web development because it helps to separate data in the web page and create particular sections for particular data or functions.

Inside a $\langle$ div $\rangle$ tag, we can put more than one HTML element, group them together, and apply CSS to them. The $\langle\mathrm{div}\rangle$ tag is a block-level tag; every $\langle$ div $\rangle$ tag will start from a new line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus explicabo incidunt magnam magni nobis pariatur quia, rerum int tempora vero.

Result

Navigation Bar

• A navigation bar consists of a number of links that are called upon based on user actions.

• A navigation bar helps readers in selecting topics, sub-topics, or links of their interest. Using a navigation bar, users need not enter the URL of the specific webpage, as this is automatically taken care of by the navigation bar. The navigation sections have the necessary links of the webpage embedded within them.

• For Web developers, creating a navigation bar helps in separating content from structure.

Activity: Navigation Bar

Here, we will build an example navigation bar, and edit its elements to fit a desired look and feel.

1. Create an HTML file called index.html and add the code below.

2. Create a CSS file called style.css and add the code to the right.

Activity: Navigation Bar (continued)

3. Navigate to your index.html file in your web browser and view the contents. You can quickly achieve this by right-clicking on the file in your folder and selecting "Open With" and your browser of choice. You should see the following:

| Home | News | Contact | About | | :--- | :--- | :--- | :--- | :--- |

4. Change the sections of the navigation bar to something that suits you. You can add new sections, rename existing sections, and change the layout or styling components.

5. Find some images to accompany your sections, and add them to the navigation bar via elements. An example has been provided to the right, including CSS styling. This example produces the following result when added to our navigation bar:

Home News Contact Resources $\log \operatorname{In}$

Navigation Bar Activity Code Break-Down

• display: The display CSS property sets whether an element is treated as a block or an inline element, and the layout used for its children, such as flow layout, grid,or flex. We will cover this property with more detail in later slides.

• list-style-type: The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

• text-decoration: This shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line; text-decoration-color; text-decoration-style; and the newer, text-decoration-thickness property.

• margin-right: The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer to its neighbors.

• background-color: The background-color CSS property sets the background color of an element.

HTML Forms

HTML forms are one of the main points of interaction between a user and a website or application. HTML forms allow users to send data to the website. Most of the time, that data is sent to the web server, but the web page can also intercept it to use on its own, locally.

An HTML form is made of one or more widgets. Those widgets can be:

• text fields (single-line or multi-line),

• select boxes,

• buttons,

• checkboxes, or

• radio buttons.

Most of the time, these widgets are paired with a label that describes their purpose. Properly implemented labels are able to clearly instruct both sighted and unsighted users on what to enter into a form input.

HTML Input Types

Example: HTML Forms

• The

  action attribute is usually used for server processing.

• The is useful for assistive technology.

• If the is nested in the label, you do not need a for attribute. You will need a for attribute with a matching id of the input you are using.

• The element attribute type of text is the default value.

• The name attribute is used when the form data is submitted as a variable.

• The boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

• The password attribute is a single-line

text field whose value is obscured, and will alert the user if the site is not secure.

Example: HTML Forms (continued)

The

HTML element is used to group several controls, as well as labels () within a web form.

• The <legend - HTML element represents a caption for the content of its parent.

The checkbox attribute is rendered by default as boxes that are checked (ticked) when activated.

• The radio attribute creates radio buttons. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected. Only one radio button in a given group can be selected at the same time.

Example: Complete HTML Form (continued)

Dropdown Menus in HTML Forms

A dropdown menu allows users to select from a list of predefined values when inputting data into a form.

list.

Theelements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option other than the first item in the list, add the selected attribute to the option.

Practice Activity: HTML Forms

Using HTML, create the following pages:

1. Create a Login Page

Login Page

Email Enter Your Email Password Enter Your Password Login

2. Create a Register Page

Register Page

First Name Enter Your First Name Last Name Enter Your Last Name Email Enter Your Email Password Enter Your Password Confirm Password Confirm Your Password Gender Female Male Date of Birth mm/dd/yyyy Habits $\square$ You like sports $\square$ You like to eat $\square$ You like to sleep Register

Practice Assignment: Page Wireframes

Please follow the links below to the practice assignments for creating page wireframes:

• PA - 307.2.1 - Create a Wireframe for your Landing Page

• PA - 307.2.2 - Create a Wireframe for your Login and Registration Pages

You can also find these practice assignments on Canvas under the Assignments section. If you have questions while performing the activity, ask your instructors for assistance.

Practice Activity: Web Page

Create a simple single web page. Choose any industry, such as family, movies, books, bootique, construction, event organization, or any other idea you like for web page.

Try to use a large combination of the HTML and CSS tools that you have learned so far.

Provide as much information as you can about the topic, and be creative in your styling.

• Provide at least one hyperlink to an actual website.

• Add at least one HTML form, such as a registration form, "get a quote" form, etc.

• After you are finished, take three minutes to present your page.

Once presentations are done, spend the rest of the time working on your Capstone Project, using the tools and techniques you have learned so far.

Knowledge Check

• What is the Document Object Model?

What are the four properties that make up the CSS box model?

• What is a CSS property, and how is it assigned a value?

• What is a CSS selector, and how can they be used to apply style to elements?

• What is the difference between inline style, internal style, and external style? Which takes precedence?

• How do you write a comment in CSS?

• What are combinators, and how are they used to select elements in CSS?

• How do you select a class in CSS? How do you select an id?

• What is a pseudo-class and what is it used for?

• What is a pseudo-element and what is it used for?

Summary

The Document Object Model (DOM) is a programming interface for HTML and XML documents, which creates an object-oriented representation of the webpage that can be modified by a scripting language such as JavaScript.The basic and fundamental topics of Cascading Style Sheets (CSS) and their relation to $\mathrm{HTML}$ include:

• The Box Model, which describes the space properties of an element within the DOM.

• Cascading Style Sheets (CSS), which is a style sheet language that allows you to selectively apply styles to elements in HTML documents. CSS styles can be applied via inline CSS, internal CSS, or external CSS files, with the latter being the most common implementation.

• Comments in CSS, which are important for organizing and documenting code. CSS has a wide range of available selectors for customizing the style of specific elements.

• HTML tables and forms, which provide ways of organizing and collecting data, and can be styled with CSS to match your desired look and feel.

• Navigation bars, which aid users in quickly traversing content in an organized manner.

Questions?