Scribd
Upload
78 views

LabHTML04 CSS Selectors and Rules

The document provides instructions for two CSS lab assignments to recreate web page designs using CSS selectors and rules. The first lab, "Photo Shoot Effect", contains constraints for styling various elements of an HTML page including the body, headings, paragraphs, images, navigation, hyperlinks, articles, figures and footer. The second lab, "Ancient Architecture", similarly lists styling constraints for an HTML page focusing on fonts, image sizes, positioning of elements, and special styling for headings, navigation, hyperlinks and paragraphs. Hints are also provided for each lab assignment.

Uploaded by

Thọ Thái Văn
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
78 views

LabHTML04 CSS Selectors and Rules

The document provides instructions for two CSS lab assignments to recreate web page designs using CSS selectors and rules. The first lab, "Photo Shoot Effect", contains constraints for styling various elements of an HTML page including the body, headings, paragraphs, images, navigation, hyperlinks, articles, figures and footer. The second lab, "Ancient Architecture", similarly lists styling constraints for an HTML page focusing on fonts, image sizes, positioning of elements, and special styling for headings, navigation, hyperlinks and paragraphs. Hints are also provided for each lab assignment.

Uploaded by

Thọ Thái Văn
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

1.

    Lab: CSS Selectors and Rules


1.1         Photo Shoot Effect

Create a Web Page like the following using "photo-shoot-effect.html"

Create file: "photo-shoot-effect.css"


You are NOT allowed to change the HTML file.

1.1.1        Constrains
         <body>
o   Width: 960px;
o   Center the body
o   font-family: Arial, sans-serif;
o   Text Color: #fcfcfc;
o   Background: #355664;
        Headings
o   Font-family: forte, Arial, sans-serif;
        <h1>
o   Text size: 50px;
o   Padding: 10px 0 0;
o   Center the text
        <h2>
o   Text size: 40px;
o   Letter spacing: 15px;
o   Center the text
o   Border at the bottom: 3px solid #416371;
o   Padding at the bottom: 20px;
        <h3>
o   Text Align: right;
o   Text size: 30px;
o   Font-weight: normal;
o   Margin: 0 0 10px;
        Paragraphs
o   Line height: 20px;
o   Padding bottom: 5px;
o   Text Color: #94c258;
        Images
o   Width: 500px;
o   Height: 300px;
o   Border: None;
        Div with class = "article-content"
o   Margin: 15px 0;
        Navigation
o   Background: #355664;
o   Padding-right and Left: 5px;
o   Padding-top and Bottom: 0px;
        Hyperlinks
o   Text Color: #ffffff;
o   Text Color: #7CB3E9;
o   Text Color: #8EC45B;
o   Margin: 5px 2px;
o   Padding: 7px 10px 4px;
o   Text Size: 30px;
        Article
o   Height: 390px;
o   Background: #213E4A;
o   Padding: 20px;
o   Margin: 0 0 10px;
        Figure
o   Border: 3px solid #142830;
o   Float: right;
o   Height: 300px;
o   Width: 500px;
o   Margin left: 15px;
        Footer
o   Border at top: 3px solid #142830;
o   Padding Top: 15px;
o   Margin Bottom: 30px;
o   Center the text
o   Text size: 20px;

1.1.2        Hints
Use:
        Reset the CSS file;
        text-transform: uppercase;
        text-transform: none;
        text-transform: lowercase;
        border-radius: 10px;
1.2         Ancient Architecture

Create a Web Page like the following using "ancient-architecture.html".


Create file: "ancient-architecture.css"
You are NOT allowed to change the HTML file.
Font Family: Roboto, sans-serif; 'Indie Flower', cursive; EucrosiaUPC sans-serif;

1.2.1        Constrains
        Body
o   Font Family: Roboto, sans-serif;
o   Background: #e2d7aa;
o   Text Color: #000000
o   Text size: 16px
o   Width: 1180px;
o   Center the container
        Image
o   Width: 1100px;
o   Height: 450px;
        Image-container
o   Width: 1600px;
o   Height: 450px;
o   Margin at Top: 65px;
        <h1>
o   Text size: 60px;
o   Center the text
o   Margin at the top: 65px;
o   Font Family: ‘Indie Flower’, cursive;
        Navigation
o   Margin: 30px;
        Hyperlinks
o   Text size: 28px;
o   Text-color: #000000;
        Hyperlink
o   Text-color: #0a2d4a;
o   Font Weight: Bold;
        Image in Article
o   Width: 350px;
o   Height: 200px;
o   Margin Bottom: 20px;
        First Letter in paragraph
o   font-family: EucrosiaUPC, sans-serif;
o   Text size: 40px;
        Hyperlink in span
o   Background: url(images/bg2.jpg)
o   Text color: #ffffff;
o   Padding: 10px;
o   Margin-top: 10px;
        Footer
o   Margin: 0px;
o   Padding: 10px 0 10px 0;
o   Center the text

1.2.2        Hints
To style the comments box use:
      article p:last-of-type span:first-of-type a::before {
    content: url("images/comment.png");
    position: relative;
    right: 5px;
    top: 7px;
    padding: 10px;
    }
 
--------------------------

You might also like