Cascading Style Sheets
the beautiful skin atop HTMLtweak css values for a website using Inspector
fire up inspector, or Ctrl+Shift+C, click on something, and see the sidebar<style>
tagbackground-color
most obvious style change
<body style="background-color: #dddddd">
<div>IMPRESSIVE LOGO</div>
header
for convenience<header>
<!-- logo goes here -->
<!-- nav goes here -->
</header>
text-align: center
to center logo<div style="text-align: center;">
IMPRESSIVE LOGO
</div>
text-align: center
to center navigation links<ul style="text-align: center">
<ul style="text-align: center; list-style-type: none;">
<li style="display: inline-block;"> <a href="#details">Details</a> </li>
<li style="display: inline-block;"> <a href="#installation">Installation</a> </li>
<li style="display: inline-block;"> <a href="#creators">Creators</a> </li>
style
tag in head
<!-- in head -->
<style>
</style>
body
to select html tagsbody {
background-color: #dddddd;
}
.class
to select class.logo {
color: #90a150
}
ul
to style listsul {
list-style-type: none;
}
li {
display: inline-block;
margin-left: 1em;
}
yucks!
nav ul
selector to be more precise, or give a class
to the navnav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
we want logo to be beside the links, use float
to ask browser to squeeze them on the same line
.logo {
float: left;
font-size: 3em;
}
nav ul {
float: right;
list-style-type: none;
}
use a clear: both
on div.content
to clear it away
.content {
clear: both;
}
our links seem to be too close together, use margin-left
to give it space
nav ul li {
display: inline-block;
margin-left: 1em;
}
our content looks like they are too close to the edges of the page
wrap everything in a div.container
, set padding-top: 3em
.container {
padding-top: 3em;
}
make impressive logo bigger using font-size
.logo {
color: #90a150;
float: left;
font-size: 3em;
}
text-align
has no more use now that it's floated, remove it
font
nav ul {
float: right;
list-style-type: none;
font-size: 1.3em;
font: 1.3em sans-serif;
}
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
font-family: 'PT Sans', sans-serif;
set a width
for .container
or a max-width
.container {
margin: 0px auto;
max-width: 760px;
padding-top: 3em;
}
introducing a:link
, a:hover
, a:visited
a:link {
color: #839e24;
text-decoration: none;
border-bottom: 0.14em dotted #839e24;
}
a:hover {
color: #303030;
background: #b1d641;
border-bottom: none;
}
there's a lot more, such as n-th child
, explore on your own
Detailed reference on all CSS properties
Google Web Fonts