Web Technology · Unit 3 · 8 hrs
Cascading Style Sheets
Exam-focused notes for Cascading Style Sheets (Web Technology, CSC329): what the TU syllabus asks and how it has actually been tested, with 11 solved past questions from this unit.
What this unit covers
- Introduction
- Cascadding Style Sheets (CSS)
- CSS Syntax
- Inserting CSS: Inline, Internal, External, ID and Class Selectors
- Colors
- Backgrounds
- Borders
- Text
- Font
- List
- Table
- CSS Box Model
- Normal Flow Box Layout: Basic Box Layout, Display Property, Padding, Margin
- Positioning: Relative, Float, Absolute
- CSS3 Borders
- Box Shadows
- Text Effects and shadow
- Basics of Responsive Web Designs
- Media Queries
- Introduction to Bootstrap
Text Effects and shadow
Define CSS. What is the use of CSS shadow effects? Write an HTML script with proper CSS as per the following description. Display a text content "CSIT Exam" in a div with id div1. The text should have a horizontal shadow of 3px and a vertical shadow of 2px. The shadow color should be green. Also set the horizontal and vertical shadow of the div to 10px respectively with the shadow color of div to blue.[10]
--- CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation and formatting of HTML documents. It controls the layout, colors, fonts, spacing, and overall visual appearance of web pages. CSS separates content (HTML) from desi...
Full solved answer →What is text-overflow property in CSS? How can you use clip and ellipsis in text-overflow? [5]
The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled (viewed) to the user. When text is too long to fit within its container, this property controls how the overflow is indicated to the user. Note: For tex...
Full solved answer →Positioning
Create an HTML page containing three paragraphs p1, p2 and p3 with some contents. Write internal CSS to set the position of p1 to relative, p2 to float and p3 to absolute. [5]
- position: relative - element is positioned relative to its normal position in the document flow. - float - used to float an element to the left or right, allowing other content to wrap around it. - position: absolute - element is positioned relative to th...
Full solved answer →How can you define position property for specifying specific positioning of an HTML element? Write internal CSS to illustrate position of an HTML div. [5]
The position property in CSS specifies the type of positioning method used for an HTML element. There are five different position values: Value Description -------------------- static Default value; positioned according to the normal flow of the page. Not a...
Full solved answer →How positioning of HTML elements can be done using CSS? Create a HTML page with a div with some content and two paragraph with some contents having id p1 and p2. Write external CSS for the div tag having fixed position with border style solid and width 2px. the p1 should have relative position. The font type of p1 should be Arial and color should be red. The p2 have absolute position with top 0px and left 200px.[10]
The position property specifies the type of positioning method used for an element. There are five different position values: Value Description -------------------- static Default; positioned according to normal flow of the page relative Positioned relative...
Full solved answer →Inserting CSS
How internal and external CSS differ from each other. Illustrate with example. [5]
CSS (Cascading Style Sheets) is used to control the presentation and layout of HTML elements. It can be applied in different ways, two of which are Internal CSS and External CSS. --- - Internal CSS is written inside the HTML document itself, within the <sty...
Full solved answer →What are the usages of class and id selectors in CSS? Illustrate with example. [5]
The ID selector uses the id attribute of an HTML element to select a specific unique element. The id of an element must be unique within a page, so the ID selector is used to select only one unique element. To select an element with a specific ID, we write ...
Full solved answer →How external CSS is inserted in an HTML page? Create an HTML page with two paragraph tags with id p1 and p2, and one div tag with id dv1. Write an external CSS file as per the description. the margin of the paragraphs should be 100px from the top and 80px from the left. Both of paragraphs should have the display set to block. The dv1 should have padding left and right set to 30px and 25px respectively, its background color should be blue and the font color should be red with the font type Verdana. Set the display of dv1 to none.[10]
External CSS is a separate .css file that contains all the style rules. It is linked to an HTML page using the <link tag inside the <head section of the HTML document. Syntax: - rel="stylesheet" defines the relationship between the HTML file and the linked ...
Full solved answer →Text
What is word-wrap property in CSS? Write an HTML script to illustrate the word-wrap property. [5]
The CSS word-wrap property allows long words to be broken and wrapped onto the next line. If a word is too long to fit within an area, it normally expands outside the container. The word-wrap property forces the text to wrap within the boundary of the conta...
Full solved answer →CSS Box Model
Describe CSS Box model with example. [5]
The CSS Box Model is a fundamental concept in web design that describes how every HTML element is rendered as a rectangular box on a webpage. According to standard web technology principles, every element on a page is treated as a box consisting of four lay...
Full solved answer →Media Queries
How web pages can be made responsive using media queries? Illustrate with an example. [5]
A media query is a CSS technique that applies styles only when certain conditions (such as screen width, device type, or orientation) are met. It allows a single web page to adapt its layout and appearance for different screen sizes (desktops, tablets, mobi...
Full solved answer →Make Unit 3 stick
Practice CSC329 with flashcards & quizzes