basic CCS project

CHECKLIST

(External Style Sheet Filename: style.css)

1.)Three (3) tag selectors (  )

body {

font-family: Georgia, “Times New Roman”, Times, serif;

background-color: #373832;

}

img {

border-radius: 10px;

}

table {

border-collapse: collapse;

margin-left: auto;

margin-right: auto;

}

2.)One (1) class selector (.important) – has to have attribute class =”important”

.main-container {

width: 820px !important;

margin-left: auto;

margin-right: auto;

background-color: #FFF;

border-radius: 15px;

color: #666;

}

3.)Two (2) id selector ( #navigation ) –  id =”navigation”, only once per page

These selectors are used only ONCE in all pages.

#site-title {

font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;

font-size: 34px;

font-variant: small-caps;

text-align: center;

color: #660;

padding: 15px 15px15px15px;

}

#nav-section {

margin-left: auto;

margin-right: auto;

background-color: #333;

color: #CCC;

}

4.)Two (2) grouping selectors ( p, h1, h2 ) – all <p><h1><h2>

table, td, th {

border: 1px solid #333;

}

input, textarea{

margin-bottom: 15px;

}

5.)One (1) pseudo-class selector ( : ) – hovering over element, visited. When you hover over the link in the example, it will change color.

In this case, when you hover over the link, the background color will change instead of the font color.

a:hover, a:active{

background-color: #666;

}

Dear Client,

Inside this zip file are the following:

-checklist.docx (this contains the list of 5 required tags, based from the specifications)
-a folder named asn2-clementft (this contains 4 html file, 1 image and 1 external CSS file, style.css)

I have made some minor changes in the html file (like capitalization, adding links).
I have also retained almost all of names of the CSS selectors in the file that you originally uploaded.

Please let me know if you have questions. Thank you very much. 🙂

Best Regards,
Writer
body {
font-family: Georgia, “Times New Roman”, Times, serif;
background-color: #373832;
}

ul.nav-links {
padding: 10px 10px 10px 10px;
text-align: center;
list-style-type: none;
}

ul.nav-links li {
display: inline;
margin-left: 20px;
margin-right: 20px;
font-weight: bolder;
}

ol.services-offered{
list-style-type: decimal;
}

ol.services-offered li{
margin-left: 20px;
margin-right: 20px;
}

img {
border-radius: 10px;
}

table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}

table, td, th {
border: 1px solid #333;
}

th {
font-size: 17px;
color: #396;
padding: 5px 0px;
}

td {
font-size: 15px;
padding: 5px 10px;
}

form {
width: 400px;
margin-left: auto;
margin-right: auto;
}

label, legend {
font-weight: bold;
color: #C60;
}

input, textarea{
margin-bottom: 15px;
}

textarea {
resize: none;
}

input.submit {
float: right;
width: 100px;
}

a:link, a:visited{
text-decoration: none;
color: #CCC;
}

a:hover, a:active{
background-color: #666;
}

.main-container {
width: 820px !important;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
border-radius: 15px;
color: #666;
}

.page-title {
font-size: 28px;
font-style: italic;
text-align: center;
padding: 15px 5px;
color: #C00;
}

.content {
padding: 20px 100px;
text-align: justify;
}

#selected-link {
color: #69F;
text-decoration: underline;
}

#site-title {
font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-size: 34px;
font-variant: small-caps;
text-align: center;
color: #660;
padding: 15px 15px 15px 15px;
}

#nav-section {
margin-left: auto;
margin-right: auto;
background-color: #333;
color: #CCC;
}

#site-picture{
padding: 10px 10px 10px 10px;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: