More CSS

Universal selector (*)

It is global and a powerful selector that targets each and every element on the whole
document and it is applied using asterisk symbol ( * ).
* {color: green;}
Assume that the HTML document contains elements like h1, h3, paragraph, ordered list,
unordered list and preformatted text. So you want to apply green color to all those elements,
so instead of writing CSS like this (body, h1, h3, p, ul, ol, li, pre{color: green}) you can
use the universal selector.

Descendant selector
Descendant selector matches all the elements that are descendants of the defined element;
it targets the nested ones by separating two selectors using blank space. For example you
know that you can nest HTML elements inside one another like this.

1 <div>
2 <h2>First Heading</h2>
3 <div>
4 <h2>Second Heading</h2>
5 <div>
6 <h2>Third Heading</h2>
7 </div>
8 </div>
9 </div>

So to style just the third heading you can use descendant selector like this.

1 div div div h2{

2 color:red;
3}

Understanding ‘>’, ‘+’, ‘~’ symbols in CSS selectors

Alright we have seen the basic and most used CSS selectors, other than this there are
pseudo-class and pseudo-element selectors which we are not going to discuss here. Most
beginners confuse greater than >, plus + and tilde ~ symbols in CSS selectors, so here lets
see that in brief.

Child selector ‘>’

This selector selects the direct children’s of the particular element. For example take a look
at the HTML and CSS below. The CSS #sample > h2 just targets the immediate child of div
id sample that is the rules will be only applied to first heading and third heading and not the
second heading which is nested inside.
————-HTML

1 <div id="sample">

2 <h2>First Heading</h2>

3 <div id="block">

4 <h2> Second Heading</h2>

5 </div>

6 <h2> Third heading </h2>

7 </div>

————–CSS

1 #sample > h2 {

2 background-color: yellow;

3 color:blue;

4 font-size: 22px;

5}

Adjacent sibling selector (+)

Adjacent sibling combinator uses + sign that targets all selectors having same parent but the
target is immediate sibling that is it selects all elements that comes next to the first one.

1 <div>

2 <p>Para One</p>

<p>Para
3
Two</p>

4 <div>block</div>

5 <p>Para Three</p>

6 <p>Fourth Para</p>

7 </div>
From the example above if we use selector like p + p {} it only gets applied to para two and
fourth para. And if we remove that div block then the CSS will be applied to second para,
third para and fourth para, leaving the first one.

1p+p{

2 background-color: yellow;

3 color:blue;

4 font-size: 22px;

5}

General Sibling Combinator

General sibling selector uses ~ tilde symbol and it is similar to adjacent sibling selector, but
the thing is the second selector doesn’t have to immediately succeed the first one. It means
it selects every element after the former selector. Take the above HTML what we used for
adjacent sibling selector as an example. Now the below CSS will only be applied to second
para, third para as well as fourth para.

1p~p{

2 background-color: yellow;

3 color:blue;

4 font-size: 22px;

5}

Website Layout
You can also define your own selectors in the form of class and ID selectors.

The benefit of this is that you can have the same HTML element, but present it differently
depending on its class or ID
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a
name preceded by a hash character (“#”).

So the CSS might look something like:

#top {
background-color: #ccc;
padding: 20px
}

.green {
 color: red;
font-weight: bold;
}
The HTML refers to the CSS by using the attributes id and class. It could look
something like this:

<div id="top">

<h1>Chocolate curry</h1>

<p class="green">This is my recipe for making curry purely with chocolate</p>

<p class="green">Mmm mm mmmmm</p>

</div>

The difference between an ID and a class is that an ID can be used to identify one
element, whereas a class can be used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML
selector first, so p.jam { /* whatever */ } will only be applied to paragraph elements that
have the class “jam”.

ID Selectors

HTML5 offers new semantic elements that define different parts of a web page:

header Defines a header for a document or a section

nav Defines a container for navigation links

section Defines a section in a document

article Defines an independent self-contained article

aside Defines content aside from the content (like a sidebar)

footer Defines a footer for a document or a section

details Defines additional details

summary Defines a heading for the details element

HTML Layout Using <div> Elements

The <div> element is often used as a layout tool, because it can easily be positioned with CSS.

This example uses 4 <div> elements to create a multiple column layout:

HTML File
<html>

<head>

<link rel="stylesheet" type="text/css" href="div2css.css" />

</head>

<body>
<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,with
a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,its
history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright My website.com
</div>

<html>

CSS File

#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
 float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}