Oops, try again. Make sure you set the body’s background-color to brown.
Your body has no attributes, it still says
How do You do that??
Put your cursor after the ‘y’ in
<body> and add the appropriate attribute.
I think it is better, if one understands the concept.
It all start’s with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.
This document has a minimal build of
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> </body> </html>
The Browser =load’s= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )
html | +-----+------+ | | head body | title
In the description of your document in DOM-talk…
you will encounter terms like:
parent children sibling descendants ascendants…
The HTML-Element has no parent
but is a parent to 2 child-Element’s
The ‘head’- and ‘body’-Element,
both being children to the ‘html’-Element
are siblings to each-other.
The ‘head’-Element is parent to the ‘title’-Element…
the ‘title’-Element is a child of the ‘head’-Element
the ‘title’-Element is also a descendant of the ‘html’-Element.
The DOM has several interface’s
over which you can access the data**/**information
held by the DOM.
One of the interface’s is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it’s associated VALUE )
methods ( giving you the functionality to manipulate the Elements )
<!DOCTYPE html> <html> <head> <title>First font size change</title> </head> <body> <p style = "font-size:8px"> Some text for you to make tiny! </p> <p style = "font-size:10px ; background-color: blue"> Some text for you to make normal size!</p> <p style = "font-size:18px> Some text for you to make super big!</p> </body> </html>
You see the HTML-page,
with a HEADER characterised by the HEAD-Tags <head></head>
with a BODY characterised by the BODY-Tags <body></body>
within the BODY you have 3 PARAGRAPH-Tags <p></p>
Within the opening-Tag of a HTML-Element like the p-Tag
you can insert so-called attributes.
One of those attributes is the style-attribute
with which you can manipulate the display-style of a HTML-Element.
Now we run into the usage of the word property
Each property consists of a property-key and it’s associated VALUE
If you have more then one property you use the semi-colon-; as separator
The syntax of writing a property is
the property-key a colon and it’s associated VALUE
thus the font-size-property would look like:
As the font-size is a property
of the style-attribute we would write
style = "font-size: 12px"
or ( with multiple properties )
style = "font-size:12px ; background-color: blue"
we are using the semi-colon-; as a so-called separator
We now integrate this into the starting < p>-Tag
<p style = "font-size:12px ; background-color: blue" ></p>
The -background-color of this p-Tag will be blue
and the characters of the TEXT
which we write in-between the p-Tags
will have a font-size of 12 pixels.
You should have added the background-color:brown to your body opening tag, remove the paragraph tags where currently the brown background color is at
no, you can simple add the style attribute to the body opening tag:
Ok that was it thanks