How do i apply css to the inner level of an element?
Suppose there are number of div tags and if there are an element at the innermost level then how do I access that one or declare css for that element?
How do I access the element
or set the background image for it in a separate css file?
7 Answers 7
It depends on how specific you want the style to be, say if you have:
You can style the
as generic/specific as you want:
p < color:red; /* Affects all p */ >p.description < color:blue; /* Affects all p with class description */ >.some-container p < color:black; /* Affects all p that is a descendant of an element with some-container class */ >.page .content .some-container p.description < color:white; /* You get the idea */ >
thanx for such a nice reply, but if there are in similar manner a div has id then the attribute will be accessed in the same manner or not?
Easiest way may be defining a css class and using that class for element.
A space between CSS selectors allows you to reference descendant elements, no matter how far down the tree they are.
So if your top-level has a class of topdiv , you can access all the
elements beneath it in the tree with a simple CSS selector like this:
If you need to be more specific, you can use a class from one of the divs further down the tree, either instead of the .topdiv reference, or alongside it:
will reference all the
elements contained within a middlediv element that is itself contained within a topdiv element.
You can continue this pattern to make is as specific as you need to, in order to be sure you only reference the elements you want.
If you need to get more specific than that, you can replace the space separator with an angle bracket > . This specifies that the next item in the selector is an immediate child element of the previous one, rather than being anywhere down the tree.
There are a number of other CSS selectors that might be handy to know, but those are the most common ones in use, and the most likely to help in your situation.
This tutorial will introduce you to styling the HTML Content Division element—or element—using CSS. The element can be used to structure the layout of a page and break up a webpage into separate components for individual styling. In this tutorial, you will create and style elements, as well as learn how to add and style other elements inside a container. These skills will prepare you to use elements as layout tools later on in the series when you begin recreating the demonstration website.
The
element is used by adding opening and closing
tags to an HTML document. On its own, the
element typically has little visual effect on the presentation of a webpage. To specify the size, color, and other properties of a
element, you can assign it style rules using CSS.
Prerequisites
To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.
Exploring the Element in Practice
Let’s try a hands-on exercise to study how the element works. Erase everything in your styles.css file (if you added content from previous tutorials). Next, add the following CSS rule for the tag selector:
Save the styles.css file. Next, return to your index.html file, erase everything that’s there (except for the first line of code: ) and add the following code snippet:
Notice that the element has opening and closing tags but does not require any content. Save the index.html file and reload it in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).
Your webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule:
