Scribd
Upload
8 views24 pages

WF-UNIT3

The document discusses the CSS box model, which includes content, padding, border, and margin, and explains how links can be styled based on their states. It also covers CSS layout techniques such as floating elements, positioning (static, relative, absolute), and the concept of CSS specificity. Additionally, it introduces CSS units, including absolute units like pixels and relative units like percentages, em, and rem for defining measurements.

Uploaded by

Rajath MS
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
8 views24 pages

WF-UNIT3

The document discusses the CSS box model, which includes content, padding, border, and margin, and explains how links can be styled based on their states. It also covers CSS layout techniques such as floating elements, positioning (static, relative, absolute), and the concept of CSS specificity. Additionally, it introduces CSS units, including absolute units like pixels and relative units like percentages, em, and rem for defining measurements.

Uploaded by

Rajath MS
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/ 24

UNIT 3: CSS, Links and Images

The Box Model

In CSS, the term "box model" is used when talking about


design and layout. The CSS box model is essentially a box
that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content.
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
Cumulative Margins
CSS Links
• Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).
• In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Dropdown menu

• HTML) Use any element to open the dropdown content, e.g. a <span>, or a
<button> element.
• Use a container element (like <div>) to create the dropdown content and add
whatever you want inside of it.
• Wrap a <div> element around the elements to position the dropdown content
correctly with CSS.
• CSS) The .dropdown class uses position:relative, which is needed when we
want the dropdown content to be placed right below the dropdown button
(using position:absolute).
CSS Layout – Floating Elements

• Floating elements can produce flexible layout.


• Positioning elements by floating in CSS is a layout technique that allows you
to control the alignment of block-level elements within a container.
• When you float an element, you essentially move it to the left or right within
its container, and other elements flow around it. This is often used for creating
multi-column layouts, wrapping text around images, and more.
• Static
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
• Relative Positioning
Relative positioning is the position where the element is positioned relative to its
normal position.
• Absolute positioning
Absolute positioning is the position where the element is positioned
absolutely to its first positioned parent. That means an element with position:
absolute is removed from the normal document flow. By default, it is
positioned to the starting point (top-left corner) of its parent element. We can
use the positioning attributes top, left, bottom. and right to set the location.
Programs
CSS Layouts
• A header is usually located at the top of the website (or right below a top
navigation menu).
• A navigation bar contains a list of links to help visitors navigating through your
website:
• Content : The layout in this section, often depends on the target users. The most
common layout is one (or combining them) of the following:
1-column (often used for mobile browsers)
2-column (often used for tablets and laptops)
3-column layout (only used for desktops)
CSS Specificity
• CSS specificity is a concept that determines which CSS rule is applied to an
HTML element when multiple conflicting styles are defined. It's a way to
prioritize and resolve conflicts in styles.
• When multiple CSS rules target the same element, the browser calculates
specificity to determine which style to apply. If two or more rules have the same
specificity, the one that appears later in the stylesheet takes precedence (i.e., the
"cascading" part of CSS).
<div id="myElement" class="myClass" style="color: green;">This is
green text.</div>
• In this case, the inline style takes precedence because it has the highest specificity.
If you remove the inline style, the ID selector's style (#myElement) will be applied
due to its higher specificity, overriding the class selector's style (.myClass).
CSS Units
• In CSS (Cascading Style Sheets), units are used to define measurements for various properties
such as length, width, height, font size, and more. There are several different types of units in
CSS, each with its own purpose and usage.
Absolute Units:
• Pixel (px): The pixel is a common unit of measurement in CSS. It's a fixed-size unit and is the
same on all devices. One pixel is a single dot on the screen.
Relative Units:
• Percentage (%): Percentage units are relative to the parent element or the container's size. For
example, setting the width of an element to 50% will make it half the width of its parent
element.
Em (em): The "em" unit is relative to the font size of the parent element. For example, if the font
size of a parent element is 16px and you set a child element's font size to 1em, it will be 16px. If
you set it to 2em, it will be 32px.
Rem (rem): Similar to the "em" unit, but it's relative to the root (the <html>) element's font size.
This makes it easier to maintain consistent sizing throughout your website.

You might also like