| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/Classes/CST1021/Labs/ |
Upload File : |
Lab 8 - Defining Selectors
Total possible points: 15
-15 if the CSS Validation Service or Markup Validation Service report errors. No further grading will be done.
Deductions for any elements required by the lab that are not present or incorrect:
-3 for each missing declaration, element, or like group.
-2 for each incorrect declaration, element, or like group.
-1 for any additional html elements that have errors.
There are some things I expect. If they are incorrect you will lose the following:
Work submitted incorrectly: -2 pts. This covers errors such as incorrect files names, incorrect file formats, poor formating, etc.
Second and subsequent submission of work for grading: -2 pts.
Work submitted late: -2 pts per week.
I reserve the right not to apply the deduction points at my absolute discretion.
-1.5 Work submitted late.
-1.5 Second and subsequent submission of work for grading.
Only subtract 1 point max for Work submitted incorrectly.
-1 Work submitted incorrectly.
Your `Lab08` folder was misnamed `Lab 08`.
-1 Work submitted incorrectly.
Your files were not contained in a Lab08 folder.
Instead they were in the root of your zip file.
If you need help correcting this, please contact me.
Your submission contains an extra file: `JordanWiest-LabNN`.
-1 Work submitted incorrectly.
Lab08.css:
-15 The CSS Validation Service at https://jigsaw.w3.org/css-validator/validator.html.en reported errors.
You really must validate your css before submitting your assignment.
=e
Lab08.html:
-15 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really must validate your html before submitting your assignment.
=e
Lab08.html:
OK.
h1
article(h3 em)
article#description(h3 em)
p.property(span_em)
div.property(em)
a[target]
a
article(h3 em)
article#description(h3 em)
-1 Step 3.3.2; Line 16; The em element is inside the h3, not in text following it.
-1 Step 3.3.2; Line 14; Missing the required h3 heading.
-1 Step 3.3.2; Line 23; The em element is inside the h3, not in text following it.
p.property(span_em)
-1 Step 3.3.3; Line 16; You have a third article element instead of the required p element.
div.property(em)
a[target] a
-1 Step 3.3.5; Line 29; The target attribute link value is not an allowed value.
-1 Step 3.3.5; Neither of your hyperlinks have a target attribute.
Instead you have an id attribute with a value of Target.
Lab08.css:
OK.
The assignment clearly states:
Do not add any styles not listed below. One point will be deducted for each.
All css declarations must be in the external style sheet. No internal or inline styles may be used in the html.
h1 { background-color: lightgreen; }
#description { /** / two declarations /**/ }
.property { /** / two declarations /**/ } (other than color)
div.property { /** / changes one declaration of .property and adds one more /**/ } (other than color)
a[target] { /** / one declaration /**/ }
p em { color: red; }
::first-letter { font-size: 1.5em; font-weight: bold; } /*+ / May begin with * /**/
h1, div { color: darkgreen; }
-0 Lines 8,10,12; Each css declaration should end with a ;
These only work because the missing ; was on the last declaration in the declaration block.
-5 lines 30-35. This is html code, not css.
Step 2.3 Do not add any styles not listed below.
-1 Step 2.3; Line 31; You added an rule not required by the lab.
Step 2.3.1; h1 { background-color: lightgreen; }
-2 Step 2.3.1; Line 4; Incorrect selector.
This is not a simple type selector.
-3 Missing the rule required by step 2.3.1.
-1 Step 2.3.1; Line 6; You added a style declaration not required by the lab.
You set the color property.
-1 Step 2.3.1; Line 4; Only the background-color should be set here.
Step 2.3.2; #description { /** / two declarations /**/ }
-3 Missing the rule required by step 2.3.2.
-2 Step 2.3.2; Line 4; Incorrect selector.
This selector should be for only an id, not an element#id.
-2 Step 2.3.2; Line 4; Incorrect selector.
This selector should an id, not an element.class.
-2 Step 2.3.2; Line 5; Incorrect selector.
This selector should be for an id, not an element named description.
There is no description element (tag) in html 5.
-1 Step 2.3.2; Line 10; You may not use a value of inherit.
The style must also cause a visible effect on the page. border-spacing would have no effect w/o a border.
See notes for step 2.3.
-1 Step 2.3.3; Line 14; The style does not cause a visible effect on the page.
font-weight: 300; has no effect because the font does not have light glyphs.
-1 Step 2.3.2; Line 13; The style does not cause a visible effect on the page.
font-weight: 200; has no effect because the font does not have light glyphs.
-1 Step 2.3.2; Line 6; You have three declarations, not two as required.
Step 2.3.3; .property { /** / two declarations /**/ }
-3 Missing the rule required by step 2.3.3.
-1 Step 2.3.3; Line 10; Missing second property declaration.
-1 Step 2.3.3; You have a third property declaration.
-2 Step 2.3.3; Line 6; Incorrect selector.
You selected on paragraphs of class property.
-2 Step 2.3.3; Line 11; Incorrect selector.
This is an id selector, not a class selector. Search for css class selector.
-2 Step 2.3.3; Line 8; Incorrect selector.
This is an element (type) selector, not a class selector. Search for css class selector.
-2 Step 2.3.3; Line 19; Incorrect selector.
This is an element class selector, not just a class selector. Search for css class selector.
-1 Step 2.3.3; Line 12; Incorrect selector.
The attribute selector `[class|="property"]` should have been a simple class selector.
A simple class selector is declared using a dot (.) followed by the class name.
-1 Step 2.3.3; Line 8; The style does not cause a visible effect on the page.
font-weight: 400; is the default font weight.
-1 Step 2.3.3; Line 8; The style does not cause a visible effect on the page.
font-family: 'Times New Roman'; is the default font weight.
-1 Step 2.3.3; Line 8; The style does not cause a visible effect on the page.
font-size: medium; is the default font weight.
-1 Step 2.3.3; Line 8; The style does not cause a visible effect on the page.
The font does not have a lighter variant.
-1 Step 2.3.3; Line 17; The style does not cause a visible effect on the page.
font-weight: 300; has no effect because the font does not have light glyphs.
-1 Step 2.3.3; Line 18; The style does not cause a visible effect on the page.
text-align: left; is the default test alignment.
-1 Step 2.3.3; Line 17; The style does not cause a visible effect on the page.
Times New Roman is the default browser font.
-1 Step 2.3.3; Line 19; The style does not cause a visible effect on the page.
text-decoration needs a position.
-1 Step 2.3.3; Line 29; You added a style declaration not required by the lab.
The instruction states: sets two properties of your choice (other than color). You have three.
-1 Step 2.3.3; Line 6; Bad declaration.
The `font:bold;` declaration does not work.
Try setting the font-weight instead.
-1 Step 2.3.3; Line 8; You styled three properties, not two.
Step 2.3.4; div.property { /** / changes one declaration of #description and adds one more /**/ }
-3 Missing the rule required by step 2.3.4.
-3 Step 2.3.4; Lines 10-13; I am unable to tell if you followed directions as step 2.3.3 is missing.
-2 Step 2.3.4; Line 17; Incorrect selector.
You did not select a div element of class property.
You selected a class.
-2 Step 2.3.4; Line 17; Incorrect selector.
You did not select a div element of class property.
You selected all div elements.
-2 Step 2.3.4; Line 7; Incorrect selector.
You did not select a div of class property.
Instead you selected a div with any element of class property inside it.
-2 Step 2.3.4; Line 6; Incorrect selector.
You did not select a div element of class property.
You selected a div class.
-2 Step 2.3.4; Line 6; Incorrect selector.
You did not select a div element of class property.
You selected the first div element placed immediately after an element of class property.
-2 Step 2.3.4; Line 17; Incorrect selector.
You did not select a div element of class property.
You selected all div elements and the class property.
-2 Step 2.3.4; Line 18; Incorrect selector.
You did not select a div element of class property.
Instead you re-defined the property class.
-2 Step 2.3.4; Lines 17-19; Did not change a class property declaration as required.
You must change one of the property declaration values from the property class rule above.
You also added two new declarations when only one is required.
-1 Step 2.3.4; Line 35; You did not add an additional style declaration as required by the lab.
-1 Step 2.3.4; Line 35; You added a style declaration not required by the lab.
The instruction states: changes one of the properties in step 2.3.3 and adds another property declaration (other than color).
There should therefore be two declarations, you have four.
-1 Step 2.3.4; Line 35; You added a style declaration not required by the lab.
The instruction states: changes one of the properties in step 2.3.3 and adds another property declaration (other than color).
There should therefore be two declarations, you have four. Two are changes, two are new ones.
-1 Step 2.3.4; You have a third property declaration.
-1 Step 2.3.4; Line 13; Missing added (third) property declaration.
-2 Step 2.3.4; Line 18; Did not add another property declaration as required.
Instead you changed both properties from step 2.3.3.
-0 Line 7; You declared the class property a second time. This one over-writes the one on line 5.
Did you want to add this class to the div element?
-2 Step 2.3.4; Line 7; You did not change one of the properties in step 2.3.3.
You also added two declarations, not one.
-2 Step 2.3.4; Lines 14-18; You did not change one of the properties in step 2.3.3.
Instead you declared the same one again. You did, however, add on as required.
-2 Step 2.3.4; Lines 15-17; Incorrect selector.
Does not declare for class `property` as required. Search for css class selector.
This should also be BEFORE the attribute selector declaration on lines 12-14.
-1 Step 2.3.4; Line 6; You set more than the two properties required here.
-1 Step 2.3.4; Line 9; The style does not cause a visible effect on the page.
-1 Step 2.3.4; Line 9; The style does not cause a visible effect on the page.
border: thick; also needs to have a border-style to display a border.
font-weight: 200; has no effect because the font does not have light glyphs.
-1 Step 2.3.4; Line 9; The style does not cause a visible effect on the page.
text-decoration-style: wavy; has no effect because the text-decoration has no text-decoration-line.
-1 Step 2.3.4; Line 13; Missing added property declaration.
There should be only two declarations. One a change and one new. See instructions.
-1 Step 2.3.4; Line 10; You styled four properties, not three.
You also changed two properties, not one.
-1 Step 2.3.4; Line 4; The background-color should not be set here.
Step 2.3.5; a[target] { /** / one declaration /**/ }
-3 Missing the rule required by step 2.3.5.
-2 Step 2.3.5; Line 24; Incorrect selector.
There should be no value specified for the target attribute selector.
-2 Step 2.3.5; Line 7; Incorrect selector.
This does not select an a element with a target attribute. Search for css attribute selector.
Be careful, I want the target attribute but without a specific value.
-2 Step 2.3.5; Line 8; Incorrect selector.
This is not an attribute selector as required. Search for css link target attribute selector.
-2 Step 2.3.5; Line 22 Incorrect selector.
This is a selector for an element called target of class a, not the attrubute selector required.
Search for css link target attribute selector.
-2 Step 2.3.5; Line 8; Incorrect selector.
This is not an attribute selector for target as required. You selected for href with a value instead.
-2 Step 2.3.5; Line 8; Incorrect selector.
There cannot be a space between the a and [.
-1 Step 2.3.5; Line 13; Setting only the outline-color does not display and outline without the outline style being set.
-0 Step 2.3.5; Line 11; Each css declaration should end with a ;
Step 2.3.6; p em { color: red; }
-3 Missing the rule required by step 2.3.6.
-2 Step 2.3.6; Line 9; Incorrect selector.
This should be for an em inside a p.
You have selected all p elements.
-2 Step 2.3.6; Line 9; Incorrect selector.
This should be for an em inside a p.
You have selected all em elements.
-2 Step 2.3.6; Line 21; Incorrect selector.
This should be for an em inside a p.
You selected all span elements.
-2 Step 2.3.6; Line 9; Incorrect selector.
This should be for an em inside a p.
You have selected a p element inside of an em element.
It is hard to see this did not work because the .property color is set to orangered.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.6; Line 7; Incorrect selector.
This should be for an em element inside a p element.
You have selected a p element with an em attribute.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.6; Line 26; Incorrect selector.
This should be for an em inside a p.
You have selected a p element of class em.
-2 Step 2.3.6; Line 9; Incorrect selector.
Your selector used the wrong combinator. The > selects only direct children and I wanted ALL of them.
Note that the em is inside of a span, so it is not a direct child of the p element.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.6; Line 28; Incorrect selector.
This should be for an em inside a p.
This select all em elements preceded by a p element.
This would effect em elements that follow the p, not the em inside it.
-2 Step 2.3.6; Line 28; Incorrect selector.
This should be a selector only for em elements inside of a p element.
Search for `CSS Selector Reference` to find selectors and examples.
-1 Step 2.3.6; Line 28; You set the wrong color.
-1 Step 2.3.6; Lines 24-27; You set the text color. That is the only declaration in the instructions.
Step 2.3.7; ::first-letter { font-size: 1.5em; font-weight: bold; } /*+ / May begin with * /**/
-3 Missing the rule required by step 2.3.7.
-2 Step 2.3.7; Lines 14,19,24; Incorrect selector.
This selector should be for all elements.
You added three rules, one each for article, p, and div.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.7; Line 27; Incorrect selector.
This selector should be for all elements, not just the body.
This must be only one selector for the pseudo-element.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.7; Line 27; Incorrect selector.
This selector should be for all elements, not just some.
This must be only one selector for the pseudo-element.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.7; Line 27; Incorrect selector.
This selector should be for all elements, not just p elements.
Search for `CSS Selector Reference` to find selectors and examples.
-0 Step 2.3.7; Line 25; While ':first-letter' works because of browser correction, '::first-letter' is the correct syntax.
Step 2.3.8; div, h1 { color: darkgreen; }
-3 Missing the declaration required by step 2.3.8.
-2 Step 2.3.8; Line 37; Incorrect selector.
Your selector does not select both div and h1 elements.
This selects all div elements inside of an h1, not all h1 and div elements as required.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.8; Line 37; Incorrect selector.
Your selector does not select both div and h1 elements.
Selects every div element that is preceded by an h1 element
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.8; Line 37; Incorrect selector.
Your selector does not select both div and h1 elements.
This selects all h1 elements inside of a div, not all h1 and div elements as required.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.8; Line 37; Incorrect selector.
Your selector does not select both div and h1 elements.
This selects all div elements preceded by an h1, not all h1 and div elements as required.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.8; Line 11; Incorrect selector.
Your selector does not select both div and h1 elements.
This selects all div elements placed immediately after an h1, not all h1 and div elements as required.
Search for `CSS Selector Reference` to find selectors and examples.
-2 Step 2.3.8; Line 37; Incorrect selector.
You only styled divs of class property instead of all divs.
-2 Step 2.3.8; Line 11; Incorrect selector +.
Your selector does not select both div and h1 elements.
This selects the first div element placed immediately after an h1, not all h1 and div elements as required.
Search for `CSS Selector Reference` to find selectors and examples.
-1 Step 2.3.8; Line 39; You set the background-color instead of the color.
-1 Step 2.3; You did not add the styles in the order required.
-1 Line 36; You added a style rule not required by the lab.
-1 Line 42; You added a style declaration not required by the lab.
Lab08.html:
OK.
Step 3.1 <h1>
Step 3.3.1 <article> with <h3>, <em>
Step 3.3.2 <article id="description"> with <h3>, <em>
Step 3.3.3 <p class="property"> + span_em
Step 3.3.4 <div class="property"> + em
Step 3.3.5 <a target="_blank"> <a>
-1 Your html tag is missing the lang attribure and value.
-2 Lines 13,17; The directions did not ask for p elements inside the article elements.
Since the effects of the css could be still be determined, no points are deducted.
Step 3.1 <h1>
Step 3.3.1 <article> with <h3>, <em>
-1 Step 3.3.1. Line 19; You used a p instead of an article.
-1 Step 3.3.1. Line 10; You used an a (hyperlink) instead of an article.
-1 Step 3.3.1; The article does not contain an em element.
-1 Step 3.3.1. Line 13; The em element should be in text after the h3 element.
Step 3.3.2 <article id="description"> with <h3>
-3 Step 3.3.2. You did not include the article of id description as required.
-1 Step 3.3.2. Line 16; The id is incorrect. The # cannot be part of the id value.
-1 Step 3.3.2. Line 21; You used a p instead of an article.
-1 Step 3.3.2. Line 14; You used an a (hyperlink) instead of an article.
-1 Step 3.3.2; Line 14; The article does not use an id, you set a class instead.
-1 Step 3.3.2; The article does not contain an em element.
-1 Step 3.3.2. Line 17; The em element should be in text after the h3 element.
Step 3.3.3 <p class="property"> + span_em
-2 Step 3.3.3. Missing the required paragraph of class property.
This must be after the article from step 3.3.2, not inside it.
-2 Step 3.3.3. Missing the required paragraph of class property.
You have a div element instead.
-2 Step 3.3.3. Line 18; You did not give the p the required class.
-1 Step 3.3.3. Line 23; The paragraph must be of class property, not id.
Nor was a color asked for.
-1 Step 3.3.3. The article does not contain a span element with an em element inside ot it.
-1 Step 3.3.3. Line 19; The em element must be inside the span element.
-1 There was an error for your p element. I do not consider this a -15 error.
It is caused by the h3 element which should be before a p, not in it.
-1 Step 3.3.3; Line 25; Use of an inline style.
All css declarations must be in the external style sheet.
Step 3.3.4 <div class="property"> + em
-3 Step 3.3.4. You did not include the div of class property as required.
-2 Step 3.3.4. You did not use a div of class property as required.
Instead you have a div with a p of class property inside of it.
The style is not applied to this. It would work if the selector was `div p.property`.
-1 Step 3.3.2. Line 26; The class is incorrect. The . cannot be part of the class value.
-1 Step 3.3.4. Line 22; The div is not of class property.
-1 Step 3.3.4. Line 22; You added a p element inside the div that was not required.
-1 Step 3.3.4. Missing the required em element.
-1 Step 3.3.4. Line 25; You set two classes. Only "property" was required.
Step 3.3.5 <a target="_blank"> <a>
-2 Step 3.3.5; One of your links must have the target attribute and a value.
Search for hyperlink target.
-1 Step 3.3.5; Line 23; The attribute value must be enclosed in quotes.
All css declarations must be in the external style sheet. No internal or inline styles may be used in the html.
-1 Step 3.3.5; Line 28; Incorrect attribute value.
The value of your target attribute is not one of the allowed values.
-2 Lines 9-11; You have an internal style.
All css declarations must be in the external style sheet. No internal or inline styles may be used in the html.
You are also using another external style sheet for the font.
If you still want this to work move the internal css rule on line 10 to your Lab08.css file.
-1 Line 22; No internal or inline styles may be used in the html.
-0 Line 20; There should be no space between attributes, the = sign, and the value.
`id= "description"` should be `id="description"`.
-0 Lines 23,25,27; There should be no space between attributes, the = sign, and the value.
-1 Line 23; All css declarations must be in the external style sheet.
No internal or inline styles may be used in the html.
-0 You code is inconsistent with indenting elements and is hard to read.
+1 Your code is well formatted and easy to read. I am giving you 1 point back for this.
Well done. Great looking code.