Scribd
Upload
35 views

CSS Worksheet 1

This document contains a CSS worksheet for a student. It provides guidelines for styling elements on a web page with CSS including: 1) Setting the font family for the entire page, 2) Styling the <aside> with width, padding, and float properties, 3) Adding top padding and centering text for the footer, and 4) Transferring HTML formatting like bold, italic, and tables to CSS. The student's CSS code is provided which implements the guidelines.

Uploaded by

bai lalok
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views

CSS Worksheet 1

This document contains a CSS worksheet for a student. It provides guidelines for styling elements on a web page with CSS including: 1) Setting the font family for the entire page, 2) Styling the <aside> with width, padding, and float properties, 3) Adding top padding and centering text for the footer, and 4) Transferring HTML formatting like bold, italic, and tables to CSS. The student's CSS code is provided which implements the guidelines.

Uploaded by

bai lalok
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Worksheet

Name: Shahrul Shirhan BIN SARIBUDIN

Student ID: 102768678

Group: 1

Instructions
This is a continuation from your previous worksheet (HTML worksheet).

Complete this worksheet during your lab session and submit it to your tutor. Write the codes
in the respective boxes provided below to style the web page based on the guidelines
provided.

Use pencil to write your answers.


div class=”main”

class =”style1”

class =”style1”
id="style2"

Float left
class=”left”
Specific guidelines

1. Set the font type of the entire page to Georgia, Garamond and Sans Serif
2. For <aside>, set the width to occupy 20% of the screen and vertical-align it to the center. Set left,
right and top padding to 10px, bottom padding to 15px using shorthand notation, float it to the
right.
3. For the footer, add 40px top padding and center-align the text.
4. Remember to transfer the formatting you did in HTML to CSS for example bold and italic for inline
text, table column width, padding, etc

style.css

*{
    font-family: Georgia, Garamond, Times, serif;
}

aside {
    width: 20%;
    vertical-align: center;
    padding: 10px 10px 15px 10px;
    float: right;
    border: 1px solid black;
}

footer {
    padding-top: 40px;
    text-align: center;
    clear: both;
}

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

th,
td {
    padding: 10px;
    text-align: center;
}

caption {
    caption-side: bottom;
}

.left {
    float: left;
}
.style1 {
    font-weight: bold;
}

.style2 {
    font-style: italic;
}

.main {
    text-align: center;
}

You might also like