Web Technology I · Unit 5
CSS Styling and Layout
Exam-focused notes for CSS Styling and Layout (Web Technology I, BIT251): what the TU syllabus asks and how it has actually been tested, with 12 solved past questions from this unit.
What this unit covers
- CSS definition and purpose
- Inline internal and external CSS methods
- CSS selectors class and id
- CSS box model padding margin border
- Normal box layout and basic box layout
- CSS positioning static relative absolute fixed
- CSS float property
- CSS text styling and properties
CSS positioning static relative absolute fixed
Write HTML and equivalent CSS for some HTML elements to demonstrate relative and float positioning. [5]
In relative positioning, an element is positioned relative to its own normal position in the document flow. The element still occupies its original space, but it is visually shifted using top, bottom, left, or right properties. In float positioning, an elem...
Full solved answer →Write internal CSS to illustrate the static, relative, and fixed position property of an HTML element. [5]
The CSS position property controls how an element is placed in the document. The three key values are: Value Description -------------------- static Default positioning; element flows in normal document order relative Positioned relative to its own normal p...
Full solved answer →Describe the relative, float and absolute positioning with suitable examples. [5]
Since no specific curriculum notes were provided, this answer is based on standard CSS positioning concepts as taught in web technology courses. --- An element with position: relative is positioned relative to its own normal position in the document flow. T...
Full solved answer →Inline internal and external CSS methods
Consider an HTML file that contains three <div> elements and two <p> elements. The first <div> should have border color red with border size 1px. The next two <div> elements should have font-family Arial and text color blue. Both of the <p> elements should have background color yellow and their display property set to block type. Now write the equivalent external CSS for this case. [5]
--- --- Selector Used Target Element Properties Applied --------- first-div (ID selector) First <div border-color, border-style, border-width .styled-div (Class selector) 2nd and 3rd <div font-family, color p (Element selector) Both <p elements background-c...
Full solved answer →How inline, internal, and external CSS are used in an HTML document. Illustrate with examples. Your CSS should include at least one class selector and id selector.[10]
CSS (Cascading Style Sheets) can be applied to an HTML document in three ways: Method Location Attribute/Tag Used -------------------------------------- Inline Inside the HTML element style attribute Internal Inside the <head section <style tag External Sep...
Full solved answer →What is CSS? How CSS is inserted in a HTML page? Illustrate with examples.[10]
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and visual appearance of HTML documents. It controls how HTML elements are displayed on screen, including layout, colors, fonts, spacing, and other visual properties. Ke...
Full solved answer →Write an external CSS and link it to a HTML page containing HTML elements. Use your own assumptions for HTML elements and their CSS. [5]
External CSS is a separate .css file that contains all the styling rules. It is linked to an HTML page using the <link tag inside the <head section. Syntax to link external CSS: --- We create a simple student profile webpage with a heading, paragraph, a lis...
Full solved answer →What is the use of CSS? Describe various methods of inserting CSS in HTML. Give proper examples.[10]
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and visual appearance of HTML documents. It controls how HTML elements are displayed on screen, paper, or in other media. --- - Styling and Layout: Controls colors, font...
Full solved answer →Normal box layout and basic box layout
Write a CSS script to illustrate the concept of Normal Box Layout and Basic Box Layout. [5]
In CSS, the Box Model treats every HTML element as a rectangular box. Each box consists of: - Content - the actual content (text, image, etc.) - Padding - space between content and border - Border - surrounds the padding - Margin - space outside the border ...
Full solved answer →CSS box model padding margin border
What is CSS Box Model? Define the areas and edges in the CSS box model. Write CSS style for demonstrating CSS box model.[10]
The CSS Box Model is a fundamental concept in web design and layout that describes how every HTML element is rendered as a rectangular box on a webpage. According to this model, every element consists of multiple layers (areas) surrounding the actual conten...
Full solved answer →CSS selectors class and id
How class selector is different from id selector while defining the CSS for HTML? Support your answer with example. [5]
Feature Class Selector ID Selector --------- Syntax symbol . (dot) (hash) HTML attribute class="..." id="..." Reusability Can be applied to multiple elements Must be unique per page (only one element) Specificity Lower specificity Higher specificity (overri...
Full solved answer →Consider a HTML page contains two divisions and one paragraph tags. The divisions have id div1 and div2 respectively. The color of text in both of divisions should be red and background color of divisions should be green. The font style in paragraph should be Arial and the size of font should be 14. Write necessary CSS for the given scenario. [5]
Selector Property Value Purpose ------------ div1, div2 color red Sets text color to red in both divisions div1, div2 background-color green Sets background color to green in both divisions p font-family Arial Sets font style to Arial in paragraph p font-si...
Full solved answer →Make Unit 5 stick
Practice BIT251 with flashcards & quizzes