CSS is code that changes the appeareance of HTML.
One place you can put CSS in a style tag that's a child of the head tag.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p {
color:blue;
}
</style>
</head>
<body>
</body>
</html>
Tags are selected by creating something called a selector.
<p>I am a description with tag p.</p>
the simplest selector is the type selector, and is a just tag name without <> brackets.
p{
text-decoration:underline;
}
selectors have a very specific syntax that needs to be followed or the CSS not worked.
selector{
property:value;
}
Selectors with select all matching tags on the page and apply the properties.
<h3>Members</h3>
<ul>
<li>Rekt - Vocals</li>
<li>Face-like - Vocals</li>
<li>DJ Regex</li>
</ul>
li {
font-size: 24px;
}
A descent selector can be used to select tags only if they are childreen of another tag.
<h3>Members</h3>
<ul>
<li>Rekt - Vocals</li>
<li>Face-like - Vocals</li>
<li>DJ Regex</li>
</ul>
ul li {
font-size: 24px;
}
A pseudo-selectors is a modifier that can be added to a selector to select a tag only when a certain condition has occured .
a {
text-decoration: none;
}
a:hover {
text-decoration: underline; color:green;
}
The :first-child pseudo-selector can be applied to narrow the amount of child tags selected.
<h3>Members</h3>
<ul>
<li>Rekt - Vocals</li>
<li>Face-like - Vocals</li>
<li>DJ Regex</li>
</ul>
ul li:first-child {
color: red;
}
put this css on the top to reset all css tags value.
html, body, h1, h2, h3, h4, ul, ol, li, p, a {
padding: 0;
border: 0;
margin: 0;
}
The Box Model is the way to describe the borders and spacing it beetwen the boxes of each tag.
There are 4 parts of the box model:
use padding to put more space between border and content.
h3 {
margin: 30px 0 30px 30px;
border-bottom: 1px solid #cccccc;
padding-bottom: 1px;
}
add 15px
of space between the edge of the window and all of the other content on the page.
body {
padding: 15px;
}
add 15px
of space between the edge of the window and all of the other content on the page.
ul {
padding: 0 0 0 30px;
}
li {
margin-bottom: 5px;
}