0% found this document useful (0 votes)
26 views

C6 CSS Exam - Study Guide

Uploaded by

lilaurilie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
26 views

C6 CSS Exam - Study Guide

Uploaded by

lilaurilie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Study Guide for HTML and CSS Test

HTML Questions

1. Creating Hyperlinks
● Tag: <a>
● Example: <a href="https://www.example.com">Link Text</a>
2. Table Header
● Tag: <th>
● Used inside: <table> and <tr>
● Example: <th>Header Text</th>
3. Unique Identifier for Elements
● Attribute: id
● Usage: <div id="uniqueId"></div>
4. Inserting Line Breaks
● Element: <br>
● Example: First line<br>Second line
5. Internal Style Sheets
● Tag: <style>
● Usage: Placed inside <head> section
● Example: <style>body { background-color: lightblue; }</style>
6. Inline Styles
● Attribute: style
● Example: <div style="color: red;">Red Text</div>

CSS Questions

1. Background Color
● Property: background-color
● Example: background-color: lightblue;
2. Background Image
● Property: background-image
● Example: background-image: url('image.jpg');
3. Text Size
● Property: font-size
● Example: font-size: 16px;
4. Capitalize Text
● Property: text-transform
● Value: capitalize
● Example: text-transform: capitalize;
5. Removing Bullet Points
● Property: list-style
● Value: none
● Example: list-style: none;
6. Selecting by ID
● Syntax: #header
● Example: #header { color: blue; }
7. Text Color
● Property: color
● Example: color: red;
8. Bold Text
● Property: font-weight
● Value: bold
● Example: font-weight: bold;
9. Space Between Border and Content
● Property: padding
● Example: padding: 10px;
10. Transparency
● Property: opacity
● Fully Transparent: opacity: 0;
● Example: opacity: 0.5;

Advanced CSS Questions

1. Select All Elements


● Selector: *
● Example: * { margin: 0; }
2. Mouse Over Style
● Pseudo-Class: :hover
● Example: a:hover { color: red; }
3. Float Right
● Property: float
● Value: right
● Example: float: right;
4. Transparency Property
● Property: opacity
● Example: opacity: 0.5;
5. Center Text
● Property: text-align
● Value: center
● Example: text-align: center;
6. Space Between Lines
● Property: line-height
● Example: line-height: 1.5;
7. Default Position Value
● Value: static
● Example: position: static;

Tables

1. Table Borders
● Property: border
● Example: border: 1px solid black;

Display

1. Hiding Elements
● Property: visibility
● Value: hidden
● Example: visibility: hidden;

Position

1. Relative Positioning
● Property: position
● Value: relative
● Example: position: relative;
2. Fixed Positioning
● Property: position
● Value: fixed
● Example: position: fixed;
Float

1. Float Right
● Property: float
● Value: right
● Example: float: right;
2. Clearing Floats
● Property: clear
● Value: both
● Example: clear: both;

Align

1. Centering Block Elements


● Property: margin
● Value: auto
● Example: margin: 0 auto;

Opacity

1. Set Opacity to 50%


● Property: opacity
● Value: 0.5
● Example: opacity: 0.5;

Syntax

1. CSS Comments
● Syntax: /* comment */
● Example: /* This is a comment */

Text and Fonts

1. Italic Text
● Property: font-style
● Value: italic
● Example: font-style: italic;

Borders

1. Border Width
● Property: border-width
● Example: border-width: 2px;

Margins

1. Top Margin
● Property: margin-top
● Example: margin-top: 10px;

Padding

1. Left Padding
● Property: padding-left
● Example: padding-left: 10px;

Icons

1. Font Awesome Icon


● Syntax: <i class="fa fa-icon"></i>
● Example: <i class="fa fa-home"></i>

Links

1. Remove Underline from Hyperlinks


● Property: text-decoration
● Value: none
● Example: a { text-decoration: none; }

Pseudo Elements and Pseudo Class

1. First Letter Styling


● Pseudo-Element: ::first-letter
● Example: p::first-letter { font-size: 2em; }

Study these concepts thoroughly, understand the syntax and use cases, and practice writing the code
snippets to solidify your knowledge. Good luck with your test!

You might also like