2. • CSS is the language for describing the
presentation of Web pages including fonts,
colors, margins, lines, height, width,
background images, advanced positions and
many other things.
• CSS is independent of HTML and can be used
with any XML-based markup language.
6. • control layout of many documents from one
single style sheet
• more precise control of layout
• apply different layout to different media-types
• numerous advanced and sophisticated
techniques.
8. The 3 levels of style sheets are –
1. External style sheet
2. Internal style sheet
3. Inline style
9. Inline Style
• It is applied to a single element of the HTML tag.
• The style attribute to the relevant tag.
• They’re useful for quick and permanent changes
but are less flexible than external and internal
stylesheets, as each inline style you create must
be edited separately if you’re making a design
change.
11. Internal Style Sheet
• An internal stylesheet holds CSS rules for the
page in the head section of the HTML file.
• The rules only apply to that page, but you can
configure CSS classes and IDs to style multiple
elements in the page code.
• A single change to the CSS rule will apply to all
tagged page elements.
13. External Style Sheet
• An external stylesheet is a standalone .css file
linked from a web page.
• The external stylesheets, can be used to apply
rules to multiple web pages.
• The single change in the stylesheet can be
applied to all linked pages, saving lots of time
and effort.
17. • Inline styles relate to a specific HTML tag,
using a style attribute with a CSS rule to style a
particular page element.
• An internal stylesheet holds CSS rules for the
page in the head section of the HTML file.
20. • The CSS box model is the foundation of layout
on the Web — each element is represented as
a rectangular box, with the box's content,
padding, border, and margin built up around
one another like layers
21. • The width and height properties set the width
and height of the content box, which is the area
in which the content of the box is displayed.
• Padding refers to the inner margin of a CSS box —
between the outer edge of the content box and
the inner edge of the border.
• The properties are padding-top, padding-
right, padding-bottom and padding-
left properties.
23. • Bootstrap is the popular CSS Framework for
developing responsive and mobile-first
websites.
• Bootstrap 5 is the newest version
• Bootstrap 5 supports all major browsers
except Internet Explorer 11 and lower version.
24. • Bootstrap is a potent front-end framework used
to create modern websites and web apps.
• It is open-source
• It includes HTML and CSS based design templates
for creating common user interface components
like forms, buttons, navigations, dropdowns,
alerts, modals, tabs, accordions, carousels,
tooltips, and so on.
25. • Bootstrap gives you ability to create flexible
and responsive web layouts with much less
efforts.
• Bootstrap was originally created by a designer
and a developer at Twitter in mid-2010.
Before being an open-sourced framework,
Bootstrap was known as Twitter Blueprint.
27. • The viewport is the user's visible area of a web
page.
• The viewport varies with the device, and will be
smaller on a mobile phone than on a computer
screen.
• Before tablets and mobile phones, web pages
were designed only for computer screens, and it
was common for web pages to have a static
design and a fixed size.
28. • HTML5 introduced a method to let web
designers take control over the viewport,
through the <meta> tag.
• <meta name="viewport" content="width=devi
ce-width, initial-scale=1.0">
29. • This gives the browser instructions on how to
control the page's dimensions and scaling.
• The width=device-width part sets the width of
the page to follow the screen-width of the device
(which will vary depending on the device).
• The initial-scale=1.0 part sets the initial zoom
level when the page is first loaded by the
browser.
