HTML CSS Exercise: Style first and the last element

Last update on March 04 2024 06:51:42 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html><!-- Declares the document type and version of HTML -->
<html><!-- Opening tag for the HTML document -->
<head><!-- Opening tag for the head section which contains metadata -->
<title>HTML CSS Exercise - Style first letter and first line</title><!-- Title of the HTML document -->
<style type="text/css"> /* Opening tag for CSS styling */
.container
{
width:500px; /* Sets the width of the container */
}
p:first-child, /* Selects the first paragraph element within the container */
p:last-child{ /* Selects the last paragraph element within the container */
color:#5ac4ed; /* Sets the text color of the selected paragraphs */
}
</style><!-- Closing tag for CSS styling -->
</head><!-- Closing tag for the head section -->
<body><!-- Opening tag for the body section which contains the content -->
<div class="container"><!-- Opening tag for a container div with class 'container' -->
<p>In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National Science Foundation (NSF), and ESL, Inc sponsored Berkeley POSTGRES Project which was led by Michael Stonebraker.</p><!-- First paragraph of content -->
<p>In 1984, an SQL language interpreter was added to POSTGRES. And thenm it was released to the web under the name of Postgres95. By 1996, the new name PostgreSQL was chosen for the project.</p><!-- Second paragraph of content -->
<p>PostgreSQL supports four standard procedural languages (which allows the users to write their own code which can be executed by database server)- PL/pgSQL, PL/Tcl, PL/Perl and PL/Python.</p><!-- Third paragraph of content -->
<p>PostgreSQL supports B+-tree, hash, generalized search trees(GiST) and generalized inverted indexes (GIN). Users can also create their own customized indexes.</p><!-- Fourth paragraph of content -->
</div><!-- Closing tag for the container div -->
</body><!-- Closing tag for the body section -->
</html><!-- Closing tag for the HTML document -->

Explanation:

The HTML document is structured using standard tags such as <html>, <head>, <title>, <body>, and <div>.
CSS styling is applied within <style> tags.
The .container class sets the width of the container to 500px.
The CSS selector p:first-child selects the first paragraph element within the container and sets its text color to #5ac4ed.
Similarly, p:last-child selects the last paragraph element within the container and sets its text color to #5ac4ed.

Live Demo:

See the Pen style-first-and-last-element-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes