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!
