Scribd
Upload
37 views

Lab03 CSS LabManual

This document provides instructions for a lab on CSS and HTML. It covers CSS ID and class selectors, CSS grouping, and the CSS box model of margins, padding, and borders. The procedures demonstrate how to apply different styles to the same tag in different places using ID and class selectors. CSS grouping is shown to style multiple tags at once. The box model is explained and steps demonstrate how to design a box with background color, width, border, padding, and margins. An example web page is designed using <div> tags.

Uploaded by

muhammedsavas799
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

Lab03 CSS LabManual

This document provides instructions for a lab on CSS and HTML. It covers CSS ID and class selectors, CSS grouping, and the CSS box model of margins, padding, and borders. The procedures demonstrate how to apply different styles to the same tag in different places using ID and class selectors. CSS grouping is shown to style multiple tags at once. The box model is explained and steps demonstrate how to design a box with background color, width, border, padding, and margins. An example web page is designed using <div> tags.

Uploaded by

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

CSE5001 – WEB PROGRAMMING

LAB 03 – CSS and HTML

After completing this Lab, you will be able to

• CSS ID and Class Selector

• CSS Grouping

• CSS Box Model (Margin, Padding and Border)

• Example Web Page Design with “div”

PROCEDURE 1 – CSS ID and Class Selector

When we apply generic CSS to a tag, that tag has the properties given wherever it is used.

1
Thanks to the Style Template selectors, we can apply different styles to the same tag in different
places.

In other words, we can apply the CSS selector we created to a tag wherever we want and not apply it
where we don't want it. We can even apply different formatting to the same label in different places.

Step 1 - ID Selectors:

• When identifying, "#" is put in front of the name.


• When applying to any tag, the "id" parameter is used.
• Since the id parameter also specifies the identity of the element it is used with, there may be
problems when the same id selector is applied to more than one tag.
For example, in the example below, the capitalized style template has been applied to both
the b tag and the u tag. There will be no problems with formatting and the specified
properties will be applied to both tags. However, if there is a programming language (such as
Asp.Net, Php, Javascript) that uses these ids on the page, there will be problems because
there will be two elements with the same name on the page.
• It does not change the tags to which it is not applied. For example, in the example below, the
big-name style selector is applied to the first b tag, the small-name style selector is applied
to the second b tag, while no CSS template is applied to the third b tag.

** Execute the code and review the results.

2
Step 2 – Class Selectors:

• When defining, "." is put.


• While applying, the "class" parameter is used.
• It can be applied to more than one tag, it does not affect the tags to which it is not applied.

** Execute the code and review the results.

3
PROCEDURE 2 – CSS Grouping

We can group while selecting tags with the same style values. For example;

Here 3 tags have the same style. Then we can write it in one line, separated by commas. **
Execute the code and review the results.

Note: You can use not only tags but also id and class.

4
We can make combined selections using different options over the label names.
*{ Selects all tags
p{ Selects all p tags. It can be used in other tags as well.
div p { Selects all p tags contained within div tags.
div , p { Selects all div and all p tags.
div > p { Selects all p tags whose parent tag is div.
Selects all div tags at the same level after p. To see the same level, you can
p ~ div {
look at the tab level in the editors.
p + div { Selects the first div tag of the same level after p.
Selects the p paragraphs with the label whose class name is box inside the
div.box , p {
div.

PROCEDURE 3 – CSS Box Model (Margin, Padding and Border)

The CSS box model is a box model of rectangles that wrap around each HTML element. The box
model allows us to add a border around elements and define spacing between elements. It consists
of: margins, borders, padding, and actual content.

Content - The main content of the box in which text and images appear.

Padding - The space around the content. The fill is transparent so no color can be assigned. It can be
called inner space.

Border – The border that surrounds the outer part of the padding. Color and line-type can be
assigned to it.

Margins – The transparent space outside the border of the frame. Color cannot be given. It can be
called the outer space.

5
Step 1 - Width and Height of an Element. First, we create a new file named firstLayer.html to write
the HTML codes.

Step 2 – We are creating a <div> element whose id is firstLayer. Next, we prepare content using the
h1 and p tags.

Step 3 – Secondly, we create a css file named firstLayer.css. And we add which style properties to
which layer we will apply to this file.

Step 4 - We are designing a box model with a yellow background color, a width of 300px, a border
size of 15px and a color of red, 50px between content and border, and 20px outside space (margin).

Step 5 - We embed the firstLayer.css file in the html document using the <link> tag.

** Execute the code and review the results.

6
PROCEDURE 4 – Example Web Page Design with “div”

7
T.A. Merve GÜN

You might also like