Module 2
What is CSS?
• Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
• With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!
• Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent.
So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the
same color (unless you specify something else)!
CSS - Introduction
• CSS- Cascading Style Sheet
• It is used to Style HTML.
• Current version is CSS3.
Cascade Style Sheets(CSS)
• CSS (Cascading Style Sheets) is a language designed to simplify the
process of making web pages presentable.
• It allows you to apply styles to HTML documents by prescribing
colors, fonts, spacing, and positioning.
• The main advantages are the separation of content (in HTML) and
styling (in CSS) and the same CSS rules can be used across all pages
and not have to be rewritten.
• HTML uses tags, and CSS uses rule sets.
• CSS styles are applied to the HTML element using selectors.
CSS Syntax
• Id { #section{
• } }
•
• class {
• } .header{
• }
• tagname{ h1{
• } }
•
CSS Syntax
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon.
Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
Example-https://
[Link]/css/css_intro.asp
Example : 2
Using CSS
• CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal or Embedded - by using a <style> element in the <head>
section
• External - by using a <link> element to link to an external CSS file
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML
element.
• An inline CSS uses the style attribute of an HTML element.
OUTPUT
Internal or Embedded CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.
• The following example sets the text color of ALL the <h1> elements
(on that page) to blue, and the text color of ALL the <p> elements to
red.
• In addition, the page will be displayed with a "powderblue"
background color:
OUTPUT
External CSS
• An external style sheet is used to define the style for many HTML
pages.
• To use an external style sheet, add a link to it in the <head> section of
each HTML page:
• An external style sheet can be written in any text editor, and must be
saved with a .css extension.
• The external .css file should not contain any HTML tags.
• Here is how the "[Link]" file looks like:
Output
Exploring CSS selectors- Properties and
values
• CSS Selectors
• Selectors are used to select (target) HTML elements that you want to style.
• Common Types of Selectors:
• 1. Element Selector – selects all elements of a given type.
• p{
color: blue; Changes all <p> text to blue.
• }
• 2. Class Selector – selects elements with a specific class (.).
• .myClass {
• font-size: 18px;
•}
• <div class="myClass">...</div> will get font size 18px.
• 3. ID Selector – selects one element with a specific ID (#).
• #header {
• background-color: lightgray;
•}
• <h1 id="header">Title</h1> gets gray background.
• 4. Universal Selector (*) – selects all elements.
• *{
• margin: 0;
• padding: 0;
•}
• 5. Group Selector (,) – styles multiple selectors at once.
• h1, h2, p {
• font-family: Arial;
•}
• 6. Descendant Selector (space) – selects elements inside another
element.
• div p {
• color: red;
•}
• Targets only <p> inside <div>.
CSS Properties and Values
• A property is the style you want to change, and a value is the setting
you give it.
•p{
• color: green; /* property: color, value: green */
• font-size: 16px; /* property: font-size, value: 16px */
• text-align: center; /* property: text-align, value: center */
•}
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• /* Element selector */
• h1 {
• color: blue;
• }
• /* Class selector */
• .text {
• font-size: 20px;
• background-color: yellow;
•}
• /* ID selector */
• #unique {
• text-align: center;
• font-weight: bold;
•}
• </style>
• </head>
• <body>
• <h1>CSS Selectors Example</h1>
• <p class="text">This is styled with a class.</p>
• <p id="unique">This is styled with an ID.</p>
• </body>
• </html>
CSS Selectors, Properties, and Values
CSS Positioning Elements
• CSS positioning defines how elements are placed within a web page.
It allows you to control the layout, stacking order, and alignment of
elements. The primary positioning types in CSS are:
Relative Positioning
• Relative positioning places an element relative to its normal position.
You can move it using top, left, right, or bottom.
Output
Absolute Positioning
• Absolute positioning removes the element from the document flow
and places it relative to the nearest ancestor with a positioning context
(relative, absolute, or fixed).
Backgrounds in CSS
• The background property controls how the background of an element
looks
2. List Styles in CSS
• The list-style properties control how ordered/unordered lists look.
[Link] Layouts in CSS
• CSS helps style tables for better readability.
The CSS Box Model
• In CSS, the term "box model" is used when talking about web design
and layout.
• The CSS box model is essentially a box that wraps around every
HTML element.
• Every box consists of four parts: content, padding, borders and
margins.
CSS box model
• 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
Example
OUTPUT
2. Text Flow in CSS
• Text flow = how text behaves inside and around elements.
What is Responsive Web Design?
• Responsive web design makes your web page look good on all
devices.
• Responsive web design uses only HTML and CSS.
• Responsive web design is not a program or a JavaScript.
What is The Viewport?
• 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.
• Then, when we started surfing the internet using tablets and mobile phones, fixed
size web pages were too large to fit the viewport. To fix this, browsers on those
devices scaled down the entire web page to fit the screen.
• The viewport tells the browser how to scale and display a webpage on
different screen sizes (mobile, tablet, desktop).
• Media query is a CSS technique introduced in CSS3.
• It uses the @media rule to include a block of CSS properties only if a
certain condition is true.
Div
Span