by ·Comments Off on CSS Typography

 

Inset Text In Pure CSS

 

The first thing that we will do is define gradient background so that our inset text is clearly visible.

#insetBackground {
                      width: 650px;
                      height: 80px;
                      background: #1e5799; /* Old browsers */
                      background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
                      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
                      background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
                      background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
                      background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
                      background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
                      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

 

The next thing that we are going to do is define the style to make the text appear inset. To so that we will make use of text-shadow.

h1.inset {
              padding-left: 50px;
              padding-top: 10px;
              font-family: Georgia, "Times New Roman", Times, serif;
              font-size: 50px;
              color: #0D4383;
              text-shadow: rgba(0,0,0,0.8) -1px 0, rgba(0,0,0,0.4) 0 -1px, rgba(255,255,255,0.8) 0 1px, rgba(0,0,0,0.4) -1px -2px;
}

Now we will put these styles in use.

<div id="insetBackground">
    <h1 class="inset">Inset text in Pure CSS</h1>
</div>

Let’s put it all together

<!DOCTYPE html>
<html>
    <head>
        <style>
            #insetBackground {
                width: 650px;
                height: 80px;
                background: #1e5799; /* Old browsers */
                background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
                background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
            }

            h1.inset {
                padding-left: 50px;
                padding-top: 10px;
                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 50px;
                color: #0D4383;
                text-shadow: rgba(0,0,0,0.8) -1px 0, rgba(0,0,0,0.4) 0 -1px, rgba(255,255,255,0.8) 0 1px, rgba(0,0,0,0.4) -1px -2px;
            }
        </style>
        <title>Inset text using only CSS</title>
    </head>

    <body>
        <div id="insetBackground">
            <h1 class="inset">Inset text in Pure CSS</h1>
        </div>
    </body>
</html>
Inset Text In CSS

Inset Text In CSS

 

Doesn’t it looks gorgeous? And we just used the power of CSS to make this.

3D Text In Pure CSS

To make the text look like we will make use of text-shadow. To start lets create a container in which we will place the text. This will give the gray background to the container.

#container{
    width: 1024px;
    height: 760px;
    padding: 50px 10px 0 10px;
    margin: 0 auto;
    text-align: center;
}

Now let us style the h1 component within this container with some special font and text-shadow. This will make the text look 3D.

#container h1{
    font: 75pt Georgia;
    color: white;
    text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #c9c9c9,
                 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,0.2),
                 0 0 5px rgba(0,0,0,0.2),
                 0 1px 3px rgba(0,0,0,0.6),
                 0 3px 4px rgba(0,0,0,0.4),
                 0 5px 10px rgba(0,0,0,0.5),
                 0 10px 20px rgba(0,0,0,0.4),
                 0 20px 20px rgba(0,0,0,0.3);
}

And now let us add some html bones to this CSS muscle.

<body>
    <div id="container">
        <h1>Text in 3D</h1>
        <h1>This is a simple and easy way to use the drop shadow effect to show text in such a way that it looks 3D</h1>
    </div>
</body>

And when we put of this together then we will see the magic.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background: lightgray;
            }

            #container{
                width: 1024px;
                height: 760px;
                padding: 50px 10px 0 10px;
                margin: 0 auto;
                text-align: center;
            }

            #container h1{
                font: 75pt Georgia;
                color: white;
                text-shadow: 0 1px 0 #ccc,
                             0 2px 0 #c9c9c9,
                             0 3px 0 #bbb,
                             0 4px 0 #b9b9b9,
                             0 5px 0 #aaa,
                             0 6px 1px rgba(0,0,0,0.2),
                             0 0 5px rgba(0,0,0,0.2),
                             0 1px 3px rgba(0,0,0,0.6),
                             0 3px 4px rgba(0,0,0,0.4),
                             0 5px 10px rgba(0,0,0,0.5),
                             0 10px 20px rgba(0,0,0,0.4),
                             0 20px 20px rgba(0,0,0,0.3);
            }
        </style>
        <title>3D Text Using Only CSS</title>
    </head>

    <body>
        <div id="container">
            <h1>Text in 3D</h1>
            <h1>This is a simple and easy way to use the drop shadow effect to show text in such a way that it looks 3D</h1>
        </div>
    </body>
</html>
3D Text In CSS

3D Text In CSS

First Letter Capitalization Using Pure CSS

This is useful at lot of places like articles, news, blogs, etc. to distinctly mark the start of a paragraph. Let’s add the style to do that. In the code below we have defined the font-size of the first-letter in a paragraph as 4 times (4em) the normal size and the font-weight as normal. We have defined this style for the pseudo class first-letter (For more details on pseudo class visit https://www.abhishekshukla.com/css/css3-basics-part-1/). Also we have changed the font weight of the span to be bold so that it’s distinctly visible.

p#firstCapsUpper:first-letter {font-size: 4em; font-weight: normal;}
span {font-weight: bold}

Now let’s put this style in use

<div>
    <p id="firstCapsUpper">
    <span>Lorem ipsum dolor sit amet,</span>; eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
    </p>
</div>

Let’s put everything together and then this is how it will look like.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p#firstCapsUpper:first-letter {font-size: 4em; font-weight: normal;}
            span {font-weight: bold}
        </style>
        <title>First letter Capital</title>
    </head>

    <body>
        <div>
            <p id="firstCapsUpper">
            <span>Lorem ipsum dolor sit amet,</span>; eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
            </p>
        </div>
    </body>
</html>
First Letter Caps In CSS

First Letter Caps In CSS

In the above example the first letter takes the space above itself. We could make the first letter slide down by changing the style for pseudoClass first-letter.

 

p#firstCapsLower:first-letter {font-size: 4em; font-weight: normal; float: left;}

Let’s put this style to use.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p#firstCapsUpper:first-letter {font-size: 4em; font-weight: normal;}
            p#firstCapsLower:first-letter {font-size: 4em; font-weight: normal; float: left;}
            span {font-weight: bold}
        </style>
    <title>First letter Capital</title> 
    </head>

    <body>
        <div>
            <p id="firstCapsUpper">
                <span>Lorem ipsum dolor sit amet,</span> eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
            </p>
            
            <p id="firstCapsLower">
                <span>Lorem ipsum dolor sit amet,</span> eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
            </p>
        </div>
    </body>
</html>

It would look something like below:

 

First Letter Caps In CSS

First Letter Caps In CSS

 

First Line Bold In Pure CSS

To achieve this we will make use of first-line pseudo class (For more details on pseudo class visit https://www.abhishekshukla.com/css/css3-basics-part-1/). We will also make the first letter as bigger and slide below just the way we had it before.

p#first::first-letter {font-size: 4em; font-weight: bold; float: left}
p#first::first-line {font-size: 2em; font-weight: bold;}

 

Let’s put these styles to use.

<!DOCTYPE html>
<html>
    <head>
        <title>First letter caps and first line bold</title>
        <style>
            p#first::first-letter {font-size: 4em; font-weight: bold; float: left}
            p#first::first-line {font-size: 2em; font-weight: bold;}
       </style>
    </head>

    <body>
        <p id="first">Lorem ipsum dolor sit amet, his in tation adipisci assueverit. Has id fugit liberavisse. Cu sed omnis aliquam reprimique. Est ne justo dicant tritani, eos et diam torquatos, eius simul expetendis te nam. Id vis salutatus suscipiantur. Eum unum persequeris et, eu enim nostrud ius, his cu mazim everti petentium. Atqui sonet quando an sea, ei est veniam legimus accumsan.

Eum ut commune praesent dissentiunt. Vel no meis philosophia. Ancillae aliquando vim te, maluisset tincidunt ei usu, debet prodesset has cu. Omnis dicat eu vix, usu ne habeo vocent. Pri quod etiam commodo an, has cu primis commodo delenit, quo reque verterem eu. Ne mea quidam sadipscing, ad qui ullum mentitum reprimique.

Et eum adipisci moderatius, vis eu quando reformidans conclusionemque. Velit docendi sed et, qui periculis reprehendunt ad, labore fierent vel te. Ex mel habeo repudiandae mediocritatem, est no solet equidem corpora, probo facer putant nam ne. No suas maiestatis eum, ei dico dicam conclusionemque eum. Ius laudem ubique doming at, vis ne nostrud suscipiantur. Cibo numquam facilisi mea an, sea platonem consequat ei.</p>
    </body>
</html>

When we see this html page in the browser we would see something like below. An interesting point to note it that when we resize the browser then still the first visible line will be bold.

 

First Letter Bold In CSS

First Letter Bold In CSS

 

Rotate Text Using Pure CSS

To rotate we will make use of transform property of the elements. The below style will rotate the elements by 90 degree in the counter clockwise direction.

.rotate {
    -webkit-transform: rotate(-90deg); /* Safari */
    -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE */
    -o-transform: rotate(-90deg); /* Opera */
}

 

Let’s put the rotate style to use.

<!DOCTYPE html>
<html>
    <head>
        <title>First letter caps and first line bold</title>
        <style>
            .rotate {
                -webkit-transform: rotate(-90deg); /* Safari */
                -moz-transform: rotate(-90deg); /* Firefox */
                -ms-transform: rotate(-90deg); /* IE */
                -o-transform: rotate(-90deg); /* Opera */
            }
        </style>
    </head>

    <body>
        <p class="rotate">Lorem ipsum dolor sit amet, his in tation adipisci assueverit. Has,<br/> id fugit liberavisse. Cu sed omnis aliquam reprimique. Est ne justo dicant <br/>tritani, eos et diam torquatos, eius simul expetendis te nam. Id vis salutatus <br/>suscipiantur. Eum unum persequeris et, eu enim nostrud ius, his cu mazim everti <br/>petentium. Atqui sonet quando an sea, ei est veniam legimus accumsan.</p>
    </body>
</html>

It would look something like below.

 

First Letter Bold In CSS

First Letter Bold In CSS

 

The htmls file for this post are available @skydrive and @googledrive.

Any questions, comments and feedback is welcome.

by ·Comments Off on CSS3 Basis part 4 of 4

 

In this post we will have a look at layout and navigation options available in CSS3.

Layout

There are majorly two approaches for designing the layout of the page: fixed layout and fluid layout.

Fixed Layout – This type of layout is easier to implement as in this layout the size of the content does not changes with the size of the browser. So no matter what our page occupies the same size at any point of time irrespective of the resolution or size of the browser.

Fluid Layout – This type of layout requires more work as whenever the size of the browser changes then our page has to respond to changes by adjusting the page layout and size.

How to design the layout of our page

  • Identify your content
  • Add the content to the web page
  • Arrange the content inside the boxes
  • Use float to make the user interface fluid

Currently our page looks like the image shown above. Let us redesign our page into column based layout and to that we will move the About CSS3 section to a column in the right.

* One important thing to remember is that if want some content in a column then it should be defined before the main content.

So let us take the aside which has About CSS3 content and move it above the article itself. The next step is to assign a class .sidePanel to the aside.

<aside>

Now we add another section just below the previous one.

<section id="header-section">

<h1>Advanced concepts in CSS</h1>

<div>

<span>Posted on 25th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn advanced concepts in CSS3 so that we can take it up a notch.

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Advanced.jpg" /></p>

<p>Since you have a good foundation of CSS3, now we will go ahead and look at the advanced concepts of CSS3. We will also get our hands dirty with some practical examples.

</p>

</section>

Currently our page looks something like below.

 

Layout

Layout

Now let us create a new class .sidePanel that we assigned to our aside.

.sidePanel

{

float: right;

width: 150px;

margin-top: 50px;

margin-right: 10px;

}

 

However our page still does not look like we would want it to. We have the main content and side panel running into each other and the main content getting distorted because of the side panel.

 

Layout

Layout

To work around with issue we will do 2 things:

  • We will add a class .mainPanel which will have the right margin greater than the width of the right panel.
.mainPanel

{

margin-right: 175px;

}

 

  • Reduce the height and width of the image so the that it fits nicely.
.image

{

width: 80%;

height: 80%;

}

 

So finally the code for our webpage looks something like below

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

text-align: center;

padding: 5px

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

footer p

{

font-size: x-small;

color: #000000

}

.article-title

{

background-color: #c4c4c4;

}

.meta-article

{

font-style: oblique;

}

.meta-author

{

font-style: normal;

}

#first-article

{

background-color: #e8dede

}

ul :nth-child(odd) {background-color: #c4c4c4}

ul :nth-child(even) {background-color:#e8dede}

.webPage {

font-size: 16px;

background-color: #000000;

width: 800px;

margin-top: 25px;

margin-left: auto;

margin-right: auto;

border:  5px solid black;

border-radius: 25px;

background-color: green;

box-shadow: 0 0 15px 5px lightGray

}

.sidePanel

{

float: right;

width: 150px;

margin-top: 50px;

margin-right: 10px;

}

.mainPanel

{

margin-right: 175px;

}

.image

{

width: 80%;

height: 80%;

margin: 5px;

float: right;

}

</style>

</head>

<body>

<aside>

<section>

<h2>About CSS3</h2>

</section>

<section>

This section is generally used for the side panels. Somethime it is also used to give additional information.

<ul>Here is a list of few useful concepts in CSS

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

</ul>

</section>

</aside>

<div>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.</p>

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" />

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>

<section id="header-section">

<h1>Advanced concepts in CSS</h1>

<div>

<span>Posted on 25th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn advanced concepts in CSS3 so that we can take it up a notch.</p>

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Advanced.jpg" />

<p>Since you have a good foundation of CSS3, now we will go ahead and look at the adavnced concepts of CSS3

We will also get our hands dirty with some practical examples.</p>

</section>

</article>

</div>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>

And the page looks like

Layout

Layout

Navigation

In a website navigation is generally done by the use of links and these links do nothing but take to a different webpages.

To create a navigation bar we will start off with an ul with the list of links that we want to use in the navigation bar. So let us create a list of links just above the main div.

<ul>

<li><a href="https://www.abhishekshukla.com">Home</a></li>

<li><a href="https://www.abhishekshukla.com/category/css">CSS</a></li>

<li><a href="https://www.abhishekshukla.com/category/html/html5">HTML5</a></li>

<li><a href="https://www.abhishekshukla.com/category/javascript">JavaScript</a></li>

</ul>

 

We have added 4 links and these will appear at the top of the page. So this how our page looks now. We see the background styled because of the ul styles that we have specified before.

Navigation

Navigation

Now we will remove the bullet style form the li. We will add a new style for ul.mainMenu and reset the list style to none and will make the bullets disappear.

ul.mainMenu

{

list-style-type: none;

}

Let us remove the padding and margins as well.

ul.mainMenu

{

position:relative;

list-style-type: none;

padding-left: 0px;

margin-left: 0;

border-bottom: 1px solid #000000;

text-align: center;

}

 

And now the looks much better

Navigation

Navigation

Now let us take the block level ul tag and make it into an inline tag so that there no new line between each entry. So now all the links will appear in one line.

.mainMenu li

{

background: green;

display: inline;

}
Navigation

Navigation

 

We can now style each li to look like buttons so let’s go ahead and style the li with color, border, etc.

.mainMenu a
{
background-color: #1197c9;

color: #393636;

display: inline-block;

border: 1px solid #000000;

border-bottom: none;

padding: 5px 20px 5px 20px;

text-decoration: none;

}

 

And now this is how our page looks like

 

 

Navigation

Navigation

 

The code for this post can be found here or @ mirror

Any questions, comments or feedback is most welcome.

 

 

by ·Comments Off on CSS3 Basis part 3 of 4

 

In this post we will talk about

  • Fonts
  • Web Fonts
  • Text Transformations

Fonts

We can use any fonts which are available on the users system. We also specify a font family and in that case the user’s browser will use any font available from that font family. The three most popularly used fonts are:

 

Serif Fonts

These fonts are generally used in articles or paragraphs as these provide easier reading. Some of the Serif fonts are

  • Baskerville
  • Georgia
  • MS Serif
  • New York
  • Palatino Linotype
  • Times
  • Times New Roman

If we want to default to any available font from this family available on the user system then we can use serif.

Sans-Serif Fonts

These fonts are generally used for headlines as they stand out. Some of the Sans-Serif fonts are

  • Arial
  • Arial Black
  • Century Gothic
  • Geneva
  • Helvetica
  • Impact
  • Lucida Grande
  • Palatino Linotype
  • Tahoma
  • Trebuchet MS
  • Verdana

If we want to default to any available font from this family available on the user system then we can use sans-serif.

Monospace Fonts

These fonts are good for writing code. Some of the Monospaced fonts are

  • Andale Mono
  • Cooperplate
  • Courier
  • Courier New
  • Lucida Console
  • Monaco

If we want to default to any available font from this family available on the user system then we can use monospace.

So with this all this new knowledge on fonts let us go ahead and change the fonts in our html.

p

{

color:  #24981f;

font-family: Georgia 'Times New Roman' serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: Impact Tahoma 'Century Gothic' sans-serif;

font-size: larger;

}

h2

{

color: #1197c9;

font-family: Impact Tahoma 'Century Gothic' sans-serif;

font-size: large;

}

And our page with new fonts looks something like below

Fonts

Fonts

Web Fonts

The fonts mentioned above need to be present on the user’s system, so that the web page could use it but in the case of Web Fonts we can specify to download these fonts on the user’s machine. But sometimes this might not be the right choice as this might lead to ownership issues because of the font’s ownership. The best solution around that is to use a Font Server and better yet use Google font server. To get the specific font all we need to do is get the link of a particular font from the Google font server and include it in the web page so that it is downloaded as and when it is needed.

Let’s try to use Web Fonts and for that we need to go to http://www.google.com/fonts. On the left hand panel we can see various options to filter and customize our fonts.

 

Google Web Fonts

Google Web Fonts

We also have multiple option to select the text we want to analyze, the size we want to analyze and the various way we can sort it. We can also see it in poster, paragraph, sentence or word.

 

Google Web Fonts

Google Web Fonts

To use a particular type of font we need to add it to the collection and click on Use at the bottom right corner of the page.

 

Google Web Fonts

Google Web Fonts

Once we do that we see all the instructions as to how we can use that font in our web page. And before we use it we can include or exclude the stuff we want and also see the load time of that font in the web page.

 

Google Web Fonts

Google Web Fonts

We will go ahead and use this font in our webpage for paragraph and headings.

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

It works really well even after the fact this font is not present on my system.

 

Web Fonts

Web Fonts

Font Size

Just selecting the font family is enough, for our webpage to look really amazing we also need set the font size appropriately as well. We can specify the font size in

  • em – It is a scalable unit. 1em = current font size. So if the current font size is 16 px then 1em = 16px and 2em = 32px.
  • percentage – It is similar to em but the current font size is 100%. So if the current font size is 16px then 100% = 16px and 200% = 32px.
  • px – These are the fixed sized unit where 1px = one on screen.
  • keywords (small, medium, large, etc) – These are also fixed sized units. One point = 1/72 of an inch.

Font Color

We can also set the font color in our styles. The various ways to set font color are

  • rgb – We need to pass the red, green and blue hexadecimal values of the color
  • rgba – This is similar to rgb with an additional attribute of a which repsents the opacity. The value of a ranges between 0(Transparent) and 1(Opaque).

Font Style

We could also use Font style. The various font styles that we can set in our font are

  • italic – This will italicize the content.
  • bold – This will make the content bold.

Also if font style is already set before in the hierarchy then we can reset it to normal which will remove any font style that is already present.

Other Text Decorations

We can use to change the text to

  • text-transform: lowercase
  • text-transform: uppercase
  • text-transform: capitalize
  • font-variance: small caps
  • text-decoration: overline

Below is the usage of all of these

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title></title>

<style>

h1

{

text-transform: capitalize;

}

h2

{

text-transform: uppercase;

}

h3

{

font-variant: small-caps;

}

h4

{

text-decoration: overline;

}

p

{

text-transform: lowercase;

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<h2>Learn everything about CSS</h2>

<h3>Learn everything about CSS</h3>

<h4>Learn everything about CSS</h4>

<p>

LEARN EVERYTHING ABOUT CSS

</p>

</section>

</article>

</body>

</html>
Text Decorations

Text Decorations

Kerning

The “font-kerning” property controls metric kerning, kerning that utilizes adjustment data contained in the font.

    • letter-spacing: 1px;
    • word-spacing: 2px;

 

Leading

The CSS line-height property is similar to leading in desktop publishing – it determines the “line height”. This results in lines of text appearing closer together or further apart.

    • line-height: 1.5

 

    • line-height: 150%

 

li { letter-spacing: -1px; word-spacing: 5px; line-height: 150%; }

 

Text Decorations

Text Decorations

Box Model

In CSS3 we can consider our page to consist a set of boxes. Every element that we have could be considered as an individual box. So an image will be a box so will be a paragraph or any other element on our page.

Border

It is the line around each of these boxes. It can be set for all four sides of the element or individual side.

  • border
  • border-top
  • border-right
  • border-bottom
  • border-left

Margin

All these boxes are separated by space which is known as margin. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom margins.

Padding

It is the space between the border and the content of the boxes. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom paddings.

Block level and Inline Tags

The various block level tags are:

  • p
  • div

The various inline tags are as below. These tags cannot have top and bottom margin.

  • strong
  • em
  • image

By default we have a square box for the elements however we can create a rounded corner box for the elements using the following style

.box-rounded-corner

{

border-radius: 25px;

background-color: green;

}

 

And

<ul>

<li>learn everything about css</li>

<li>learn everything about css</li>

<li>learn everything about css</li>

<li>learn everything about css</li>

</ul>

 

 

Round Corners

Round Corners

Let us apply few of the these changes on our initial page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

text-align: center;

padding: 5px

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

footer p

{

font-size: x-small;

}

.article-title

{

background-color: #c4c4c4;

}

.meta-article

{

font-style: oblique;

}

.meta-author

{

font-style: normal;

}

#first-article

{

background-color: #e8dede

}

ul :nth-child(odd) {background-color: #c4c4c4}

ul :nth-child(even) {background-color:#e8dede}

.webPage {

font-size: 16px;

color: #117c13;

background-color: #000000;

width: 800px;

margin-top: 25px;

margin-left: auto;

margin-right: auto;

border:  5px solid black;

border-radius: 25px;

background-color: green;

box-shadow: 0 0 15px 5px lightGray

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>

<aside>

<section>

<h2>About CSS3</h2>

</section>

<section>

This section is generally used for the side panels. Somethime it is also used to give additional information.

<ul>Here is a list of few useful concepts in CSS

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

</ul>

</section>

</aside>

</article>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>
Border Margin Padding

Border Margin Padding

The code for this post can be found here or @ mirror

Any questions. comments or feedback are most welcome.

by ·Comments Off on CSS3 Basis part 2 of 4

In this post we will talk about

  • HTML elements hierarchy
  • Specificity

 

HTML Hierarchy Tree

The elements which are present higher in this hierarchy tree are known as ancestors and the elements which are below these ancestors are known as the descendants of these ancestors. The descendants inherit the style form their ancestors or parents. Inheritance is really useful as we do not need to duplicate styles for descendants because they pick up all the style from their parents. So in the image below if there is a style applied to the div they will be implicitly inherited by their descendants which are h1, h2, ul, a and their descendants em and li.

HTML Family Tree

HTML Family Tree

However there are a few properties that are not inherited. These properties are

  • Placement tags
  • Margins
  • Borders
  • Background Colors

Which makes sense because generally we do not want inherit these properties to the child element anyways. Also the styles that are more specific override the less specific or inherited style. So in the case of above hierarchy tree if we have a specific style for li then it will override the style provided by div or ul. So let us see this Inheritance in action. There are some styles properties that we want to apply to all the elements in our web page so the best way to do that will be adding that style at the body level. If you recall from the previous post that we have 3 types of selects which we can use to specify styles (tag, class and Id). The tag selector is specific to a tag and the Id selector is supposed to be unique on a page so our best option to define this style is as a class. So let us a style for our web page. The way we define style by class is prefixing (.) before the class name. As you can see below we have created a style for the page where we have defined the style name as .webPage where (.) represents that the style is for a class.

.webPage {

font-family: Calibri, Cooper, Verdana, sans-serif;

font-size: 16px;

color: #117c13;

background-color: #000000;

width: 800px;

margin: 5 auto;

}

We have specified multiple fonts followed by a complete font family. It is useful because if the browser does not Calibiri font available, it will use Cooper and if does not have Cooper it will use Verdana and if it does not have Verdana then the browser will use any sans-serif font. Then we have also specified the default font-size of the text on the page along with font color, background color, width and margin of the body. Now let us refer this style in the html page.

<body>

The complete code of the webpage is below.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<style>

.webPage {

font-family: Calibri, Cooper, Verdana, sans-serif;

font-size: 16px;

color: #117c13;

background-color: #000000;

width: 800px;

margin: 5 auto;

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>

<aside>

<section>

<h2>About CSS3</h2>

</section>

<section>

This section is generally used for the side panels. Sometime it is also used to give additional information.

<ul>Here is a list of few useful concepts in CSS

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

</ul>

</section>

</aside>

</article>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>

When we see this page in the browser it looks something like below.

Style Body

Style Body

While in browser if want to see a style then we need to press F12 and click on the lens icon at the bottom of the page and then select the element which we want to inspect.

Find Element Style

Find Element Style

 

Find Element Style

Find Element Style

Once we make this selection in the same Elements Window we see the styles that are applied to the selected element.

Find Element Style

Find Element Style

We can also look at the styles of the element by simply right clicking the element and selecting Inspect element.

Find Element Style

Find Element Style

Specificity

Specificity is the methods by which a browser chooses which property estimations are the most important to a component and becomes connected. Specificity is just dependent upon the matching administers which are made out of selectors of distinctive sorts. This means that at any point of time the style that will be applied to an element will be the most specific style. We can determine which of the style is most specific by counting the number of ID selectors, class selectors, attribute selectors, pseud-class selectors, type elements and pseudo-elements. So let us say Number of Id selectors (Tag Selector) = x Number of class, attribute and pseud-class selectors (Class Selector) = y Number of type and pseudo-elements (Id Selector) = z Then xyz is our specificity of our style or (x*100 + y*10 + z) Below are a few instances showing us how we can find specificity of a style.

li                                                              x=0 y=0 z=1 => specificity = 1

ul li                                                         x=0 y=0 z=2 => specificity = 2

ul ol+li                                                   x=0 y=0 z=3 => specificity = 3

ul + *[ rel="nofollow"]                   x=0 y=1 z=1 => specificity = 11

ul ol .footer                                        x=0 y=1 z=2 => specificity = 12

.footer .webpage                            x=0 y=2 z=0 => specificity = 20

# first-article # header-section   x=2 y=0 z=0 => specificity = 200

# first-article li .footer                    x=1 y=1 z=1 => specificity = 111

So this is the exact reason lot of CSS designers prefer not to use Id but use classes instead. Ids change the specificity a lot on their own and might have some unintended behaviors at times. We generally don’t need to calculate the specificity as we can inspect the element to see how the styles are working on it. As we can see in the image below the font-size specified in .webPage is overwritten in p.

Find Element Style

Find Element Style

The code for this post can be found @ here or @ mirror

by ·Comments Off on Css3 Basics – Part 1 of 4

In this post we will be covering the basic concepts in CSS3 along with some hands on examples. The topics that we will cover in this post are:

  • Structure of a CSS Style
  • Types of Stylesheets
  • Selector
    • Tag
    • Class
    • Id
  • Pseudo-Class

Structure of a CSS Style

Cascading Style Sheets are the way we usually style the elements on our web pages and CSS helps us define this style at one place which can be reused at multiple places later on.

When we write a CSS style it looks something like below. We have the name of the CSS class (or selector) followed by the opening and closing parenthesis. Inside these parentheses we define the property name and the value of those properties which are separated by colon (:). Each property value pair is separated by a semi colon (;). Sometime the vales can be placed inside quotes (“” or ‘’) depending on the value that we are adding.

CSS Structure

CSS Structure

 

Types of Stylesheets

External Stylesheet

External stylesheets are the ones which are used mostly as they allow us to make design changes to an entire site by simply changing one file.

  • External Stylesheet allows us to have better separation of concerns between the HTML and the style that we are writing. The HTML should be completely independent of the style that will be applied to it.
  • They are faster as they are cached and easily available for use.
  • We can include external stylesheet into a HTML page by simply adding it as a link. We need to specify the rel as stylesheet along with the type and path of the stylesheet.
<link href="~/Content/css/styles.css"  rel="stylesheet" type="text/css" />

Internal Stylesheet

Internal stylesheet reference styles within the page itself. Internal stylesheets are mainly use during development or prototyping because they are faster while development as they do not need to come from the cache every time we reload the application. These stylesheet should only be used at the time of development or prototyping and there is a good chance that these stylesheet will become obsolete in a few years.

To create an internal stylesheet we add the styled within the head tags of the webpage

<html>

<head>

<title>Learn CSS</title>

<style></style>

</head>

<body></body>

</html>

Section

Section is used to specify a particular area on the screen.

Aside

This section is generally used for the side panels. Sometimes it is also used to give additional information.

Footer

This is used for adding the footer to the website or the webpage.

Selectors

Tag

Tag selectors are page wide selectors like p (paragraph). This selector is the most wide as they have multiple elements with that tag.

Class

The Class attribute tells the browser that an HTML tag belongs to a certain group. We can have many selector with the same class and this allows us apply one style to multiple selectors across the web page or website. Class selectors allow us to select every element on the page with that specific class. The Class selector is a little less wide than the Tag selector but still there can be multiple elements that can be present with the same class selector. When declare class selector in the style then we specify dot (.) to indicate that this is a class selector. But when we use it just specify the class name.

Id

The Id attribute should only be used in one tag on your HTML page, so that whatever is in that one tag look different. The motive of using an Id attribute is to uniquely identify a selector so whenever we are using an Id it should be unique. The Id selector is even more specific than the class selector as Id assigned to an element on the page should be unique for that page. When we specify the Id in the style we use the hash (#) symbol to indicate that this is an Id. Two major uses of Id because of its uniqueness on the page are –

  • Id can be used by JavaScript code to find a specific element.
  • Id can be used for linking to a specific part if the page.

In the code below we see all the things that we have talked about till now.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>
             <aside>
                <section>
                    <h2>About CSS3</h2>
                </section>

                <section>
                    This section is generally used for the side panels. Somethime it is also used to give additional information.
                </section>
            </aside>

</article>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>

 

When run the above webpage we will see something like below. The browser has different font style for the headings. It has a picked up a default font for the text as we did not specify any font family.

Only HTML

Only HTML

Now we will style this page to do that we will create an inline style. To create an inline style we need to add the style tag within the head tag. We will start off with styling the paragraph in our webpage. So let us add a few property and values for the paragraph style.

p
{
    color:  #24981f;
    font-family: Calibri;
    font-size: medium;
}

Let us also specify the style for the h1 and h2. Notice the font size for h2 is smaller that h1

h1
{
    color: #0f769d;
    font-family: Calibri;
    font-size: larger;
}
h2
{
    color: #1197c9;
    font-family: Calibri;
    font-size: large;
}

Let us also style the footer as well to show small text. You will see that we have specified the style name as footer p, this means that this style applies to any paragraph which is inside the footer.

footer p
{
    color: #000000;
    font-family: Calibri;
    font-size: x-small;
}

Now our webpage looks something like below.

Style By CSS Tag

Style By CSS Tag 

Style by Tag

We have already seen how to specify style by Tag in the previous section where we have specified styles based on tags like p, h1, h2, footer, etc.

p
{
    color:  #24981f;
    font-family: Calibri;
    font-size: medium;
}
h1
{
    color: #0f769d;
    font-family: Calibri;
    font-size: larger;
}
h2
{
    color: #1197c9;
    font-family: Calibri;
    font-size: large;
}
footer p
{
    color: #000000;
    font-family: Calibri;
    font-size: x-small;
}

You could see that we have specified the styles based on the element tags. So we have specified the style for all the paragraphs using p, for all heading1 using h1 and for all heading2 using h2. All of these styles apply to all the elements on the page with no exception. However if we notice the style that we have specified by footer p means that this style will apply only to the paragraph present inside the footer. This type of style specification opens up a lot of capabilities of defining styles for different elements inside different tags.

Style by Class

In the code that we have written before we saw that the h1 that we were using had a class named article-title.

<h1>Learn everything about CSS</h1>
Style By CSS Class

Style By CSS Class

We will define a style specific to this class. To that we need to go to the style section in the head tag and specify .article-title as the style name and then add a background color property to the style.

.article-title
{
    background-color: #c4c4c4;
}

Now if go back and refresh the page we will see that the h1 text has a background now. The same will happen for any element that is using the same class.

Now let us add the same class that we have added to h1 to h2 as well.

<h2>About CSS3</h2>

We will see that h2 will also get the same background. This will verify the principle that one class can be used at multiple places.

Style By CSS Class

Style By CSS Class

Now let us add style for the article metadata as well. The class that we are using for that is meta-article.

<div>
    <span>Posted on 12th Sep 2013</span>
    <span>by</span>
    <span>Abhishek Shukla</span>
</div>

So we will go back to the styles section and add a new style named .meta-article and assign the font-style for that class to be oblique.

.meta-article
{
    font-style: oblique;
}

And then the text for this div with meta-article class will become oblique.

Style By CSS Class

Style By CSS Class

Now say I want my name to not to be oblique but in normal font style so I will add a new style for the meta-author class and set the font-style to be normal.

.meta-author
{
    font-style: normal;
}

And then we will see the author name in normal font style.

Style by Id

To specify a style by Id we need to prefix a # before the Id while specifying the style. In this case will use the Id of the article section named as first-article and specify a background color.

#first-article
{
    background-color: #e8dede
}

This will make the background of the whole article as light gray.

Style By CSS Id

Style By CSS Id

Pseudo-class

These work just like the normal classes to find the elements. These pseudo-classes work on the relative basis. So in a class we can access the first child, last child, nth child, first child of a type, nth child of a type, etc. Below is the list of pseudo classes available in CSS3.

:focus

The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

:active

The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. For mouse event this active behavior represents the time between mouse buttons down and then up. This is generally used

:hover

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules.

:link

The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or

:visited

In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending of the expected effect.

:visited

The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover —

:active

Below is the use of all these 4 pseudo classes. We have specified these classes inside a (anchor tag)

<head>
    <meta charset="utf-8" />
    <title>Pseudo Selectors</title>
    <style>
        a:link { color:#0094ff; }
        a:visited { color: #ff006e; }
        a:hover { color: #ff6a00; }
        a:active { color: #60a941; }
    </style>
</head>
<body>
    <a href="#">This link will change color on hover becuase of style that is based on active pseudo class</a>
</body>
Pseudo Class

Pseudo Class

:checked

The :checked CSS pseudo-class selector works for any radio (input type=”radio”), checkbox (input type=”checkbox”) or option (option in a select) component that is checked or toggled to an on state. The client can transform this state by clicking on the component, or selecting an alternate worth, in which case the :checked pseudo-class no more applies to this component.

In the code below as soon as the checkbox or the radio button is checked the checkbox and radio button part disappears.

<style>
    input:checked
    {
        display: none;
    }
</style>

<body>
    <input type="checkbox" >CheckBox</input>
    <input type="radio" >RadioBox</input>
</body>

:default

The :default CSS pseudo-class represents any user interface element that is the default among a group of similar elements.

:disabled

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can’t be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

:empty

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

:enabled

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can’t be activated or accept focus.

:first-child

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

:first-of-type

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

:last-child

The :last-child CSS pseudo-class represents any element that is the last child element of its parent.

:last-of-type

The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.

:nth-child()

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

:nth-last-child()

The :nth-last-child CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

:nth-last-of-type()

The :nth-last-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

:nth-of-type()

The :nth-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you’re selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

: only-child

The : only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

: only-of-type

The : only-of-type CSS pseudo-class represents any element that has no siblings of the given type.

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pseudo Selectors</title>
        <style>
            span:nth-of-type(2n+1)
            {
                 background-color: #ffd800;
            }
            span:nth-of-type(2n)
            {
                background-color: #ff006e;
            }
            div :first-of-type
            {
                background-color: #0094ff;
            }
            span:last-child
            {
                background-color: lime;
            }
        </style>
    </head>
    <body>
        <div dir="rtl">
            <span>This is child number 1</span>
            <span>This is child number 2</span>
            <span>This is child number 3</span>
            <span>This is child number 4</span>
            <span>This is child number 5</span>
            <span>This is child number 6</span>
            <span>This is child number 7</span>
            <span>This is child number 8</span>
            <span>This is child number 9</span>
            <span>This is child number 10</span>
        </div>
    </body>
</html>
Pseudo Class

Pseudo Class

:lang()

The :lang CSS pseudo-class matches elements based on the language the element is determined to be in. In HTML, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language.

element:lang(language-code) { style properties }

:not()

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

:not(selector) { style properties }

:root

The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the <html> element and is identical to the selector html, except that its specifity is higher.

:target

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

 

The code for this post can be downloaded @ here or @ mirror

Any questions, comments or feedback are most welcome.