sintret.com | CSS

1. Class and Layout

1.1 Using classes to differentiate between tags.

This example shown below that's add a class attribute to an HTML tag so thats you can directly access to it.

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .nav {
            padding-left: 12px;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="home.html">Home</a></li>
    <li><a href="home.html">Blog</a></li>
</ul>
</body>

1.2 Using classes in descendent selectors

Classes can be used to interchangeably with tags, so the descendant selectors work doesnt change.

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .nav a {
            color: blue;
            text-decoration: none;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="home.html">Home</a></li>
    <li><a href="home.html">Blog</a></li>
</ul>
</body>

This selectors says find all a tags that are childreen of any tag with a class of nav

1.3 Writing class and type selectors in the right order

Generally speaking, first declare broadest rule with type selector, and then get more specific with class selectors. these example like this following css code:

ul {
    padding: 10px 0 0 0px;
}
.nav{
    padding: 0; // reset all padding in .nav
}

2. Div and Layout

2.1 The div tag

div is short for division, and it's a block-level tag that's a generic way to group related content into sections on a page.

2.1 Adjusting the size of divs

The width and height of any tag's content can be changed in CSS.

CSS - Part II