So far in this mini-series on HTML and CSS for Lorelle’s WordPress School, we’ve covered the basics and gave you a test HTML file to experiment with, explored the basics of HTML tags, inline styles with CSS, HTML embedded styles where the styles are removed from the HTML and placed in a <style> HTML tag in the head of the web page, and today we continue with the experimental HTML file as we explore the parent-child relationship of CSS and introduce you to CSS classes.
Terminology time:
- CSS Parent-Child Relationship: In CSS, the parent-child relationship is similar to the human version. Supposedly, a parent tells the child what to do and they do it – most of the time. In CSS, there is more hope as the parent design element influences the child elements within it through inheritance.
- Inheritance: If the styles of a child HTML element are not specified, the element inherits the styles of its parent, the HTML tag, commonly referred to as the container, wrapped around it. For example, if the font-family is set in the
<body>, the paragraph HTML tag will inherit the same font unless specifically changed in the styles. - CSS ID: In CSS and HTML, the ID is the identifier for that HTML element. It is a unique term and found only once on a web page. On the style sheet, it is recognized with a # in front of the identifier such as
#headerand#this-one. It may also be used to create jump links within a page or website. - CSS Class: A class is an identifier on HTML elements that may be used repeatedly on the same web page. For example, if the design featured multiple h2 headings, by using
<h2 class="red">, all the headings with the class “red” feature the instructions for that class name in the styles such as turning the text color red. All other h2 headings are ignored and the styles are not applied. In the CSS style sheet, a class is identified with a period such as.redand.widget. - Stylesheet/Style Sheet: The stylesheet/style sheet is the file that holds the CSS instructions separated from the HTML presentation files. It is linked to the HTML web pages using that style sheet. There may be one or many style sheets linked to a single web page as necessary.
The CSS Parent-Child Relationships
The Parent-Child relationship of CSS means that the parent design element influences the elements within it.
In a previous example, the font declaration was defined by the paragraph HTML tag ID test-paragraph.
<style type="text/css">
#test-paragraph {
font-family: Impact;
color:red;
font-size:30px;
}
</style>
<p id="test-paragraph">This is test text.</font></p>
We are going to move the font to the paragraph tag styles.
#test-paragraph {
font-size:30px;
color:red;
}
p {
font-family: Impact;
}
Save the file and view it in the browser. It looks exactly as the last example shown in the previous tutorial section, EXCEPT that all of the paragraphs now feature the Impact font.
We only want the Impact font on that paragraph, not every the text within every paragraph on our test HTML page. Let’s set the paragraph tag to match the ID of our test-paragraph.
p#test-paragraph {
font-family: Impact;
}
Here is the breakdown of what just happened.
- With the paragraph style set to the font Impact, all paragraphs inherited that style.
- By identifying that we only wanted to change the paragraph with the ID
test-paragraph, only that paragraph changed, the parent paragraph inheritance denied.
Make sense?
In the previous tutorial, we used the following to change the design of a div within a div.
div div {
background-color: yellow;
}
Reading the code like a book, it tell us that the child div of the parent div has instructions to feature the background color of the div as yellow. In other words, all the divs within the div, but not the parent div, is to do what they are told.
The child was changed to be different from the parent.
This is part of the parent child relationship of CSS. An HTML element within another HTML element may inherit the design details of the parent or surrounding HTML element, or have their own set of instructions. Identifiers designate which styles belong to which HTML element and its instructions.
As you experiment with WordPress Themes, you will find the parent-child relationship one of the biggest challenges you face. Each Theme features styles set in the <body> of the web page, inherited by all the styles within the web page. Yet there are multiple headings like h2, h3, and h4 used throughout the Theme in different places such as in the header, post title, sidebar, footer, and displayed multiple times on multiple post pageviews like categories and searches to display the post titles. The h2 heading could look different in each spot on a single web page.
How do you find which style influences another style, which styles it inherits, and which styles it overwrites to generate its own look and feel?
Chasing down all these parent-child relationships makes the process of tweaking a Theme with a Child Theme a challenge, but we are here to learn! I can tell you are up to the challenge.
Experiments with the CSS Parent/Child Relationship
Let’s experiment with the CSS Parent/Child Relationship in your test file.
At the bottom of the test file before the last </div>, add the following HTML:
<div id="test-42"> <p class="salad">This is our salad paragraph.</p> <p class="fork">This is our fork paragraph.</p> <p>This is a paragraph not invited to lunch.</p> </div> <!-- This is the bottom of the test div in an HTML comment code -->
The parent of this code block is the div HTML. It surrounds the children, three HTML paragraphs. Two of the paragraphs have classes. Remember, a class is an identifier that may be repeated many times on a web page.
Notice that we have a new HTML element in the example code. This is an HTML comment. It will not appear on the front end display of the web page. These are also referred to as inline documentation as comments often old instructions about the code, what it does, and how to use it. All WordPress code is documented this way to help you trace the path of the code through your site and provide information and instructions.
At the top of the file in the styles, let’s add the styles for this block of HTML:
/* testing CSS child-parent relationships */
#test-42 {
color:magenta;
}
.salad {
color:green;
}
.fork {
color:blue;
}
Notice that this CSS set of instructions features a line at the top with slash and asterisks? This is a CSS comment or inline documentation featuring instructions and information. It is invisible on the front end view of the site, only seen within the source code.
The first style identifies the div differently from the other ones on the test file as ID test-42.
The two paragraph classes for salad and fork are set next, and the last paragraph does not have an identifier.
Save the HTML file and view it in the web browser. You should see something like this:
The #test-42 container has a font color set to magenta. Which line appears in that vibrant pink color? The last one. Why?
The paragraph inherited the colors from its parent container.
The other two paragraphs have styles that set the color of the text. They defied the parent instructions by overwriting the parental comment to set the text color to magenta.
In our earliest experiments, we set the <body> to feature a font-family. This new test block inherits that font.
Let’s override the font set for the entire document to make the font different for this <div>.
#test-42 {
color:magenta;
font-family: "Times New Roman", Times, serif;
}
Save the file, preview it in the browser, and the font should be different for this test block.
It disinherited the styles from its parent.
It’s your turn to experiment with the styles and inheritance.
Give each style the following, and set it to whatever you wish. Save the file as you go and look at the browser view to see what changes and what doesn’t. The challenge is to style each paragraph differently, as well as the container wrapped around all of them.
- font-size
- color
- margin
- padding
- background-color
The CSS Parent/Child Relationship Challenger
So far we’ve dealt with simple parent-child relationships. Let’s look at one more test block to help you better understand the control a parent HTML element has over its children, and how the children fight back to control their own destiny.
This time you are going to do the work.
Add the following below the previous exercise.
<div id="wrap"> <p>This is text within the wrap parent container.</p> <div id="one"> <p>This is text within the first div.</p> <div id="two"> <p>This is text within the second div.</p> </div> <!-- This is the closing DIV tag for the first DIV --> </div> <!-- This is the closing DIV tag for the second DIV --> </div> <!-- This is the closing DIV tag for the wrap DIV →
Add the CSS to the head styles:
div#wrap {
}
div#one {
}
div#two {
}
Using what you have learned so far, set the CSS to match this image. Come on, you can do it. Hint? It involves the background-color.
Notice the paragraph text in the wrap container is black. It is white in the other DIVs.
Was the white font color set in the wrapper? Where was it set? Where did it inherit the white color?
This is the just the tip of the iceberg of design ideas we can play with. Further studies in HTML, CSS, and web design will take you on a journey through the parent-child relationships to help you control the end result of the design.
For more information on the parent-child relationships of CSS, see:
- CSS Element Relationships – Little Web Hut
- Web Design Reference Guide – Like Mother Like Child: A Look at Inheritance in CSS – Peachpit
- Inheritance – Best Practices Web Design
The next section in this tutorial on HTML and CSS covers positioning with CSS, critical to the structure and layout of a web page.
The Google+ Discussion on this post is here, and we invite you to join us and talk about your experiences with these tutorials and lessons, and the struggles you have had with the CSS inheritance on WordPress Themes.
This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:
- Lorelle’s WordPress School Introduction
- Lorelle’s WordPress School Description
- WordPress School Tutorials List
- WordPress School Google+ Community
- WordPress Publishing Checklist
- How to Give Feedback and Criticism
Lorelle on WordPress 
4 Trackbacks/Pingbacks
[…] « WordPress School: HTML and CSS Parent-Child Relationship […]
[…] WordPress School: HTML and CSS Parent-Child Relationship […]
[…] What is a child theme? It is a theme that is the child of a parent. In web development, we use parent/child relationships to define when something is primary and when something else is directly related to primary. Want to know more about parent/child relationships in web development? Here is a good review of parent/child relationships in CSS on the Lorelle.WordPress.com blog. […]
[…] you don’t know what parent and child elements are, allow Lorelle to explain. Similar to a human relationship, the parent element tells the child element what to […]