Scribd
Upload
17 views10 pages

Lecture 6

Uploaded by

IRFAN MUGHAL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views10 pages

Lecture 6

Uploaded by

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

CSS

LECTURE 06
2
Box sizing

 By default, the width and height of an element is calculated like this:


width + padding + border = actual width of an element
height + padding + border = actual height of an element

9/15/2024
3
Box Sizing

 The box-sizing property allows us to include the padding and border in an element's total width and
height.
 If you set box-sizing: border-box; on an element, padding and border are included in the width and height.
 .div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

9/15/2024
4
Psedo Class Selectors

 A pseudo-class is used to define a


special state of an element.
 For example, it can be used to:
 Style an element when a user
mouses over it
 Style visited and unvisited links
differently
 Style an element when it gets focus

9/15/2024
5
Pseudo-element Selectors

 A CSS pseudo-element is used to style specified parts of an element.


 For example, it can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an element
 selector::pseudo-element {
property: value;
}

9/15/2024
6
Pseudo-element Selectors

 The ::first-line pseudo-element is used to add a special style to the first line of a text.
 The ::first-letter pseudo-element is used to add a special style to the first letter of a
text.
 The ::first-line pseudo-element can only be applied to block-level elements.
 The ::before pseudo-element can be used to insert some content before the content
of an element.
 The ::after pseudo-element can be used to insert some content after the content of
an element.
 The ::marker pseudo-element selects the markers of list items.
 The ::selection pseudo-element matches the portion of an element that is selected
by a user.

9/15/2024
Attribute Selectors

 The [attribute] selector is used to select elements with a specified


attribute.
Styling Forms

 The attribute selectors can be useful for styling forms without class or ID:
 input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
Activity

 Open W3schools and try out all examples of attribute selectors.


 https://www.w3schools.com/css/css_attribute_selectors.asp
 Design a website using float to style the layout and navbar elements.
CSS Display

 Commonly used display properties are:


display:none (no display)
display:inline
display:block
display:inline-block
 We use inline-block if we want an element to behave like an inline
element but still want to control it’s width.
 Also margin:auto can be applied to elements with width specified .

You might also like