mohammadiamin/index.css Secret

## index.css

body {
    background-color: #d8ffff;
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    text-transform: uppercase;
    margin-top: 20px;
    color: #DE3163;
    font-size: 25px;
}

.font-family {
    font-family: Arial, Helvetica, sans-serif;
}
.line {
    width: 15%;
    position: relative;
    margin: 0 auto;
    margin-top: 10px;
    border: 1px solid #DE3163;
}

table, th, td {
    border: 1px solid #F7DC6F;
    border-collapse: collapse;
}

tr:nth-child(odd) {
    background-color: rgb(233, 233, 233);
}

tr:nth-child(even) {
    background-color: rgb(216, 216, 216);
}

th {
    user-select: none;
    background-color: #D6EAF8;
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-size: 20;
    letter-spacing: 1px;
}

td {
    padding: 6px 10px;
    text-align: left;
    font-family: 'Trebuchet MS';
    font-size: 13px;
    color: #4c561e;
}

table {
    margin: 30px auto;
    margin-bottom: 0;
}

.selector {
    font-family: 'consolas', monospace;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}

.caption {
    font-size: 12px;
    caption-side: bottom;
    margin-top: 5px;
}


.formdiv {
    width: fit-content;
    padding: 5px;
    position: relative;
    margin: 10px auto 0 auto;
    background-color: #378394;
    border-radius: 4px;
}

form {
    color: white;

}
input {
    color: #DE3163;
}
select {
    color: #DE3163;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./resources/css/index.css">
    <title>CSS Selectors</title>
</head>
<body>
    <header class="font-family">
        <strong>CSS</strong> Selectors
        <div class="line"></div>
    </header>

    <main>

        <table>
            <caption class="font-family caption">some of CSS selectors</caption>
            <tr class="font-family">
                <th>Selector</th>
                <th>Function</th>
                <th>Description</th>
                <th>Sample</th>
            </tr>
            <tr>
                <td class="selector">"."</td>
                <td>to select class</td>
                <td>at first write a "." after that the name of the class to select all the same class</td>
                <td>.paragraf</td>
            </tr>
            <tr>
                <td class="selector">"#"</td>
                <td>to select id</td>
                <td>at first write a "#" after that the name of the id</td>
                <td>#paragraf</td>
            </tr>
            <tr>
                <td class="selector">Tag Name</td>
                <td>to select a tag</td>
                <td>write the name of the tag to select all the same tags in the HTML</td>
                <td>p or table</td>
            </tr>

        </table>


            <div class="formdiv font-family">
                <form action="">
                    <label for="yn">Did you find it usefull?</label>
                    <select id="yn" name="yes&no">
                        <option value="yes">YES</option>
                        <option value="no">NO</option>
                    </select>
                    <input type="submit" value="Send">
                </form>
            </div>

    </main>

</body>
</html>

	body {
	background-color: #d8ffff;
	margin: 0;
	padding: 0;
	}

	header {
	text-align: center;
	text-transform: uppercase;
	margin-top: 20px;
	color: #DE3163;
	font-size: 25px;
	}

	.font-family {
	font-family: Arial, Helvetica, sans-serif;
	}
	.line {
	width: 15%;
	position: relative;
	margin: 0 auto;
	margin-top: 10px;
	border: 1px solid #DE3163;
	}

	table, th, td {
	border: 1px solid #F7DC6F;
	border-collapse: collapse;
	}

	tr:nth-child(odd) {
	background-color: rgb(233, 233, 233);
	}

	tr:nth-child(even) {
	background-color: rgb(216, 216, 216);
	}

	th {
	user-select: none;
	background-color: #D6EAF8;
	/font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;/
	font-size: 20;
	letter-spacing: 1px;
	}

	td {
	padding: 6px 10px;
	text-align: left;
	font-family: 'Trebuchet MS';
	font-size: 13px;
	color: #4c561e;
	}

	table {
	margin: 30px auto;
	margin-bottom: 0;
	}

	.selector {
	font-family: 'consolas', monospace;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	text-align: center;
	}

	.caption {
	font-size: 12px;
	caption-side: bottom;
	margin-top: 5px;
	}


	.formdiv {
	width: fit-content;
	padding: 5px;
	position: relative;
	margin: 10px auto 0 auto;
	background-color: #378394;
	border-radius: 4px;
	}

	form {
	color: white;

	}
	input {
	color: #DE3163;
	}
	select {
	color: #DE3163;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./resources/css/index.css">
	<title>CSS Selectors</title>
	</head>
	<body>
	<header class="font-family">
	<strong>CSS</strong> Selectors
	<div class="line"></div>
	</header>

	<main>

	<table>
	<caption class="font-family caption">some of CSS selectors</caption>
	<tr class="font-family">
	<th>Selector</th>
	<th>Function</th>
	<th>Description</th>
	<th>Sample</th>
	</tr>
	<tr>
	<td class="selector">"."</td>
	<td>to select class</td>
	<td>at first write a "." after that the name of the class to select all the same class</td>
	<td>.paragraf</td>
	</tr>
	<tr>
	<td class="selector">"#"</td>
	<td>to select id</td>
	<td>at first write a "#" after that the name of the id</td>
	<td>#paragraf</td>
	</tr>
	<tr>
	<td class="selector">Tag Name</td>
	<td>to select a tag</td>
	<td>write the name of the tag to select all the same tags in the HTML</td>
	<td>p or table</td>
	</tr>

	</table>


	<div class="formdiv font-family">
	<form action="">
	<label for="yn">Did you find it usefull?</label>
	<select id="yn" name="yes&no">
	<option value="yes">YES</option>
	<option value="no">NO</option>
	</select>
	<input type="submit" value="Send">
	</form>
	</div>

	</main>

	</body>
	</html>