Posted on

CSS3 Selectors: Introduction

This entry is part 1 of 40 in the series CSS3 Selectors

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML elements allowing style to be formatted in the page.

CSS uses Selectors for binding style properties to elements in the document.

In the example below, we have use the <ul> element to format an unordered list.

In the <style> section, with the ul selector, we can define the style of the list to use list-style-type: square

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>

    <style type='text/css'>
        ul {
            list-style-type: square;
        }
    </style>

</head>
<body>

<h4>American Rock</h4>
<ul>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>
Posted on

CSS3 Selectors: Type selector

This entry is part 2 of 40 in the series CSS3 Selectors

A type selector represents an instance of the HTML element type in the document structure.

This is the simplest of the selectors.  An example is h2 and p illustrated in the example below.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Codecrawl.com</title>
    <style>
        h2 {
            color: blue;
        }

        p {
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>
<h2>Taylor Swift</h2>

<p> Swift moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music.</p>
</body>
</html>

Posted on

CSS3 Selectors: Groups of selectors

This entry is part 3 of 40 in the series CSS3 Selectors

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Codecrawl.com</title>
    <style>
        h1, h2, h3 { font-family: sans-serif }
    </style>
</head>
<body>
<h1>Country Music</h1>
<h2>Taylor Swift</h2>
<h3>Hot Country Girl</h3>

<p> Taylor Swift moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music.</p>
</body>
</html>
Posted on

CSS3 Selectors: Universal selector *

This entry is part 4 of 40 in the series CSS3 Selectors

A universal selector * will select any html element.

In the example below, both the <h2> and <p> elements have been selected.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Codecrawl.com</title>
    <style>
        * {
            color: blue;
        }
    </style>
</head>
<body>
<h2>Taylor Swift</h2>
<p> Swift moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music.</p>
</body>
</html>

Posted on

CSS3 Selectors: Class selectors

This entry is part 5 of 40 in the series CSS3 Selectors

We can apply a class to a particular html element using <span> tag.

If there are other html elements with similar class, they will be affected too.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com</title>
    <style>
        .city {
            font-family: sans-serif;
            color: purple;
            font-weight: bold;
        }
    </style>
</head>
<body>

<h2>Taylor Swift</h2>

<p> Taylor Swift moved to <span class='city'>Nashville</span>, Tennessee, at the age of 14 to pursue a career in country
    music.</p>

</body>
</html>