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>

CSS3: Flexbox and block content

This entry is part 7 of 13 in the series CSS3

Flexbox helps us to put our content into block form.

Flexbox consists of flex-container.  It also consists of flex-items, the children of flex-container.

The display property is set to flex or inline-flex. Inline-flex will put the content into inline block form.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Flexbox</title>
    <style>
        #flex-container {
            display: -webkit-flex;
            display: flex;
            width: 500px;
            height: 500px;
            background-color: Navy;
        }

        #flex-item {
            background-color: Silver;
            width: 200px;
            height: 200px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div id='flex-container'>
    <div id='flex-item'>I am content block A</div>
    <div id='flex-item'>I am content block B</div>
</div>
</body>
</html>

 

CSS3: Creating a responsive design with media queries

This entry is part 2 of 13 in the series CSS3

You might want to have a design that will work in handphone, tablet or a normal desktop.

CSS3 Media Queries give you the ability to have the display adjust to different screen widths, heights and even orientation.

In the CSS3 style below, we have the normal desktop where the background will be black, a screen size of between 320px to 400px (handphone) where the background will be blue and a screen size of 401px to 1024px where the background will be red.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - CSS3</title>
    <style>
        body {
            background: black;
            color: #fff;
            font-family: tahoma, verdana, sans-serif;
        }

        h1 {
            font-size: 3em;
        }

        p {
            font-size: 2em
        }

        @media screen and (min-width: 320px) and (max-width: 400px) {
            body {
                background: blue;
            }
            h1 {
                font-size: 2.2em;
            }
            p {
                font-size: 1.5em;
            }
        }

        @media screen and (min-width: 401px) and (max-width: 1024px) {
            body {
                background: red;

            }
            h1 {
                font-size: 2.5em;
            }
            p {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>

<h1>British Rock</h1>

<p>Rod Stewart is one of the
    most popular best-selling music artists of all time, having sold over 100 million records worldwide.
</p>

</body>
</html>

 

CSS3: Introduction

This entry is part 1 of 13 in the series CSS3

CSS3 is the newest interation of the CSS specification.

There are a few new features in CSS3:

  • Responsive design with media queries
  • Gradients
  • Transitions
  • Transformations
  • Animation

In this basic introduction, we try to cover some of the new features found in CSS3.