Wednesday 24 April 2013

CSS Selectors - Universal vs Type vs Class vs ID

Watch this example on YOUTube:
Code below creates simple web form with simple style sheet that has 4 selectors.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication19.WebForm4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        * {
            color: green;
        }
        h1 {
            color: blue;
        }
        .RedFont {
            color: red;
        }
        #YellowFont {
            color: yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>This text will use universal selector - will be in green </p>
        <h1>This text will use type selector - will be in blue</h1>
        <div class="RedFont">This text will use class selector - will be in red</div>
        <div id="YellowFont">This text will use id selector - will be in yellow</div>
    </div>
    </form>
</body>
</html>

No comments:

Post a Comment