Scribd
Upload
14 views160 pages

FSD1

This document provides an overview of HTML and CSS, detailing their syntax, structure, and core components in web technology. It covers the history of HTML, the importance of semantic markup, and the basic structure of HTML documents, including elements like <html>, <head>, and <body>. Additionally, it explains the significance of web technologies in creating both static and dynamic web applications, emphasizing the role of HTML in defining web page structure and content.

Uploaded by

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

FSD1

This document provides an overview of HTML and CSS, detailing their syntax, structure, and core components in web technology. It covers the history of HTML, the importance of semantic markup, and the basic structure of HTML documents, including elements like <html>, <head>, and <body>. Additionally, it explains the significance of web technologies in creating both static and dynamic web applications, emphasizing the role of HTML in defining web page structure and content.

Uploaded by

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

MODULE_1

HTML &CSS
SUBJECT CODE: 22CSE53
PREPARED BY,
MRS RAKSHITHA NARESH
FLOW OF CONTENTS
❑Introduction to HTML
➢ HTML Syntax
➢ Semantic Markup
➢ Structure of HTML Documents
➢ HTML5 Semantic Structure Elements

❑Introduction to CSS
➢ What is CSS
➢ CSS Syntax
➢ Location of Styles
➢ Selectors
➢ The Cascade: How Styles Interact, The Box Model, CSS Text Styling.
SYLLABUS
WEB TECHNOLOGY
▪ Web technologies are the tools, programming languages, and frameworks used to
build websites and web applications.
They include:
▪ Frontend technologies → HTML, CSS, JavaScript, frameworks like React, Vue, Angular
▪ Backend technologies → [Link], Django, Laravel, databases like MySQL, MongoDB
▪ Protocols → HTTP/HTTPS, WebSocket, FTP
▪ Other tools → APIs, security layers, content delivery networks (CDNs)
▪ From simple static websites to complex, dynamic web applications, web
technologies are integral to nearly every online experience.
▪ In 2025, the scope of web technology has expanded to include cutting-edge
functionalities like real-time communication, artificial intelligence (AI), and
decentralized networks.
CORE COMPONENTS OF WEB TECHNOLOGY
▪ HTML (HyperText Markup Language) – Defines the structure of web pages (headings, paragraphs,
lists, images, links).
▪ CSS (Cascading Style Sheets) – Controls appearance (colors, fonts, layout, responsiveness).

▪ JavaScript – Adds interactivity (animations, clickable buttons, real-time form validation).

▪ Web Browsers – Interpret HTML, CSS, JavaScript and render websites (e.g., Chrome, Firefox, Safari).

▪ Web Servers – Host websites and deliver content via HTTP/HTTPS.

▪ Web Protocols – Rules for communication between server and browser (HTTP, HTTPS, HTTP/2,
HTTP/3).
▪ APIs (Application Programming Interfaces) – Allow different systems to exchange data (e.g., fetching
weather info).
▪ Databases – Store and manage website/app data (e.g., MySQL, MongoDB, PostgreSQL).
INTRODUCTION TO HTML
▪ HTML stands for Hypertext Markup Language and it is a widely used programming
language used to develop web pages.
▪ HTML Stands for HyperText Markup Language, where
▪ HyperText stands for Link between web pages.
▪ Markup Language means Text between tags that define the structure.

▪ HTML is a markup language that is used to create web pages.


▪ It defines how the web page looks and how to display content with the help of
elements.
▪ It forms or defines the structure of our Web Page; thus it forms or defines the
structure of our Web Page.
▪ Markup means special tags that we add to files with an extension of .html or .htm to
tell web browsers how to display content using these files.
▪ These tags define the structure and layout of a webpage. Example of tags:
<html> , <head>, <body>, <p>, <img>
▪ Each tag has a special purpose, for example <img> tag allows us to add an image
to a web page.
▪ HTML is not a programming language but a markup language.
▪ Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the
static or dynamic type. With the help of HTML only, we can create static web pages.
▪ Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.
HISTORY OF HTML
▪ HyperText Markup Language (HTML) was initially developed by Sir Tim Berners-
Lee in late 1991.
▪ It was designed as a standard language for creating and formatting documents on
the World Wide Web.
▪ All the web pages on the internet are made from HTML.
▪ From 1990 to 1995, HTML underwent changes and extensions, initially at CERN and
then at the IETF. The World Wide Web Consortium (W3C) became the new home
for HTML development.
W3C
▪ W3C stands for World Wide Web Consortium.
▪ It is the main international standards organization for the World Wide Web, founded
by Tim Berners-Lee (the inventor of the web) in 1994.
▪ W3C develops and publishes web standards so that websites and web
technologies work consistently across different devices, browsers, and platforms.
▪ W3C is like the rule-book maker of the internet, making sure all web developers
speak the same “language” so the web stays open and consistent.
HTML SYNTAX : ELEMENTS AND
ATTRIBUTES
▪ HTML documents are composed of textual content and HTML elements.
▪ An HTML element is the basic building block of an HTML document.
▪ It usually consists of:
▪ Opening tag → tells the browser where the element starts.
▪ Content → text, images, or other elements inside it.
▪ Closing tag → tells the browser where the element ends.

▪ Syntax:
<opening-tag> Content goes here </closing-tag>
▪ An HTML element is identified in the HTML document by tags.
▪ A tag consists of the element name within angle brackets.
▪ The element name appears in both the beginning tag and the closing tag, which
contains a forward slash followed by element’s name, again all enclosed within angle
brackets.
▪ HTML elements can also contain attributes.

▪ HTML attributes are extra pieces of information you add inside an HTML tag to
control an element’s behavior, appearance, or provide metadata.
▪ They are always written in the opening tag and usually come in name="value" format.

▪ Syntax

<tagname attribute="value">Content</tagname>
▪ Example :

<a href="[Link] target="_blank">Visit Example</a>


▪ An empty HTML element is an element that does not have any content between
an opening and closing tag — in fact, it doesn’t even have a closing tag.
▪ It is also called a void element or self-closing element.
▪ Example :

<br> Line break


<hr> Horizontal line (thematic break)
<img> Image
<input> Form input field
<meta> Metadata (inside <head>)
<link> Links external resources like CSS
<source> Media source for <audio> or <video>
NESTING HTML ELEMENTS
▪ Often an HTML element will contain other HTML elements. In such cases, the
container element is said to be a parent of the contained, or child, element.
▪ An element contained within the child are said to descendants of the parent
element; likewise, any given child element, may have a variety of ancestors.
▪ Example :

<ul>
<li>Cats</li> Cats
<li>Dogs</li> Dogs
<li>Lizards</li> Lizards
</ul>
DOM (DOCUMENT OBJECT MODEL)
▪ The Document Object Model (DOM) is a programming interface for web
documents.
▪ It represents the HTML (or XML) page as a tree-like structure where each part of
the page (elements, attributes, text) is a node that can be accessed, modified, or
deleted using programming languages like JavaScript.
▪ "Document" → the HTML or XML file loaded in the browser.
▪ "Object" → each HTML tag, attribute, or text is represented as an object in memory.
▪ "Model" → the logical, tree-based structure that represents the document.
SEMANTIC MARKUP
▪ Semantic markup is the foundation of modern, accessible, and search-engine-
friendly web development.

▪ By using HTML elements that clearly describe their meaning and purpose,
developers can create web pages that are not only easier to understand for
humans but also more effectively processed by machines, such as search
engines and assistive technologies.

▪ In HTML, some tags are purely structural (like <div> and <span>), but others
are semantic, meaning their names describe their meaning and purpose.

▪ Semantic HTML elements tell both humans and machines what the content is
about.
For example:

<header> → defines the header of a page or section

<nav> → navigation menu

<article> → a standalone piece of content

<footer> → footer section

▪ Structure is a vital way of communicating information in paper and electronic


documents.
▪ Semantic HTML focuses on describing the role and meaning of each part of a web

page (like headings, paragraphs, lists, navigation bars) rather than specifying its
visual style directly.

▪ In HTML, this means using tags that convey meaning-such as headings, list,

paragraphs, images, navigation, menus, and footers – rather than focusing purely
on presentation.
▪ Key advantages of semantic markup :

▪ Maintainability : semantic markup is easier to update and change than presentation-


heavy markup in HTML. When you use HTML tags that describe the meaning of the content
rather than its appearance, changes are simpler.
▪ Faster :semantic web pages are usually quicker to create and loads faster because they
avoid unnecessary styling in the HTML itself.
▪ Accessibility : not all users can view contents in the same way. Users with slight
disabilities may used voice reading software(screen readers).Semantic markup helps
screen readers and other assistive technologies understand the structure of a page, making
it accessible to people with disabilities.
▪ Search Engine Optimization : search engines like google use search engine crawlers to
scan websites for content. The crawlers analyse the text and structure of a site to decide
how relevant it is for certain queries.
STRUCTURE OF HTML DOCUMENTS
▪ Basic Structure of HTML
▪ An HTML document's basic structure consists of5 elements:
▪ <!DOCTYPE>
▪ <html>
▪ <head>
▪ <title>
▪ <body>
DOCTYPE
▪ DOCTYPE(Document Type Definition)element, which tells the browser(or any other
client software that is reading this HTML document) what type of document it is about to
process.
▪ It does not indicate what version of HTML is contained within the document : it only
specifies that it contains HTML.
▪ It is not really a tag/element but rather an instruction to the browser regarding the
document type.
▪ It is a null element that does not have a closing tag and must not contain any content.
<html>
▪ The <html> tag in HTML is used to specify the root of HTML and XHTML pages. The <html>
tag informs the browser that this is an HTML document.
▪ It is the second outer container for everything in an HTML document, followed by the tag.
The <html> tag requires a beginning and ending tag.
<head>
▪ The <head> tag in HTML is used to contain metadata (data about data). It is used between
the<html> and <body> tags.
▪ The head of an HTML document is a section of the document whose content is not displayed
in the browser when the page loads. It only contains HTML document metadata, which
specifies information about the HTML document.
▪ Depending on our needs, an HTML head might contain a lot of metadata information or can
have very little or no metadata information.
▪ The document title, character set, styles, links, scripts, and other meta information are
defined by metadata.
▪ The following is a list of metadata tags:
<title>,<style>,<meta>,<link>,<script>, <base>
<title>
▪ This <title> tag in HTML displays the title of a web page and can help in higher
rankings in search results if appropriate keywords are included.
▪ The most significant meta element to add to our webpage is the <title> element. It
gives a relevant title to the full HTML content.
▪ It appears at the top of the browser window and gives the webpage a fitting name
when saved as a favorite or bookmark. A solid web page title will guarantee a higher
rank in search results. Thus, we must constantly utilize relevant keywords.
▪ The <title> element must be positioned between the <head> element, and there can
only be one title element per document.
<body>
▪ The <body> tag in HTML specifies the main content of an HTML document that
appears on the browser. It can contain headings, text, paragraphs, photos, tables,
links, videos, etc.
▪ The <body> tag must come after the <head> tag, or it must be inserted between
the </head> and </html> tags. This tag is essential for all HTML documents and
should only be used once throughout the document.
HTML ELEMENTS
▪ HTML 5 contains many structural and presentation elements- we shall look into
some of the most common elements like :
▪ Headings
▪ Paragraphs and divisions
▪ Links
▪ URL relative referencing
▪ Inline text Elements
▪ Images
▪ Character Entities
▪ Lists
HEADINGS
▪ HTML provides six levels of heading (h1 through h6). With the higher heading number
indicating a heading of less importance.

▪ Headings are used by the browser to create a document outline for the page.

▪ Every web page has a document outline. This outline is not something you see. Rather, it
is an internal data representation of the control on the page.

▪ This document outline is used by the browser to render the page.

▪ It is also potentially used by the web authors when they write JavaScript to manipulate
elements in the document or when they use CSS to style different HTML elements.
▪ There are variety of web-based tools that can be used to see the document outline.
▪ One such tool is available in [Link]
▪ The browser has its own default styling for each heading level. However these are
easily modified and customized via CSS.
PARAGRAPHS AND DIVISIONS
▪ A block-level element always starts on a new line, and the browsers automatically
add some space (a margin) before and after the element.
▪ A block-level element always takes up the full width available (stretches out to the
left and right as far as it can).
▪ Two commonly used block elements are: <p> and <div>.
▪ The <p> element defines a paragraph in an HTML document.
▪ The <div> element defines a division or a section in an HTML document.
▪ The <p> tag is used to format text into distinct paragraphs. Each paragraph
element is separated by automatic empty line spaces above and below the content,
providing a clear visual separation.
▪ The tag must be closed with its corresponding </p> tag.
Note :

▪ Paragraphs are block-level elements, and notably will automatically close if

another block-level element is parsed before the closing </p> tag.

<p>This is a paragraph <p>This is a paragraph</p>


<div>This is a div inside</div> <div>This is a div inside</div>
▪ The <div> tag in HTML is a container that is used to group other HTML elements
together and apply styles to them as a unit.
▪ It doesn't have any semantic meaning and is used purely for layout purposes.
▪ When you want to group a set of elements together, you can simply wrap them in a
div tag.
▪ The <div> element has no intrinsic presentation; it is frequently used in
contemporary CSS -based layouts to mark out sections.
LINKS
▪ Links are essential feature of all web pages.
▪ Links are created using <a> element (the “a” stands for anchor).
▪ A link has two main important parts : the destination and the label.
URL RELATIVE REFERENCING
▪ Whether we are constructing links with the <a> element, referencing images with
the <img> element, or including the external JavaScript or CSS files, we need to be
able to successfully reference files within our site.
▪ This requires learning the syntax for so-called relative referencing.

An Absolute reference :
▪ It is a complete URL that specifies the location of a resource from the root of the
internet. It includes the protocol (http:// or [Link] domain name, path, and
filename.
▪ For example, an absolute reference to an image might look like this:

<img src=”[Link] [Link]" alt=”My Image”>


A relative reference:
▪ specifies the location of a resource relative to the current document. It is typically
shorter and more flexible than an absolute reference.
▪ Relative references can be used when the resources are located on the same
server or in the same folder as the HTML document. For example, a relative
reference to the same image might look like this:
<img src=”image/[Link]” alt=”My Image”>
▪ In this case, the image file is located in a folder named “images” which is located in
the same folder as the HTML document.
▪ Relative references can also include directory references such as “../” to
move up one directory level, or “./” to indicate the current directory.
▪ Understanding how to use both absolute and relative references is important for
web development, as it can impact the performance and accessibility of a
website.
▪ From [Link], how do you link to [Link]?
<a href="[Link]">Example</a>
▪ From [Link], how do you display [Link]?
<img src="images/[Link]" alt="Logo">
▪ From [Link], how do you reference [Link] in the css/images/ folder?
<a href="images/[Link]">image</a>
▪ From [Link], how do you reference [Link] located in the root images/ folder?
<a href=“../images/[Link]">image</a>
▪ From members/[Link], how do you link to [Link]?
<a href="../[Link]">About</a>
or
<a href="/[Link]">About</a> // root-relative path

▪ From [Link], how do you display [Link] (inside images/ at root)?


<img src="../../images/[Link]" alt="Central Park">
INLINE TEXT ELEMENTS
▪ HTML inline elements keep content within the same line and take up only as much
width as necessary.
▪ Unlike block elements, they do not force a line break before and after them,
allowing content to flow naturally within a paragraph or other text-based
structures.
▪ You can use inline elements to apply formatting, create links, and add interactive
elements within a line of text.
▪ Basic Syntax
<p>This is an <strong>inline element</strong> inside a paragraph.</p>
IMAGES
▪ The HTML <img> tag is used to embed images in a web page.
▪ It is an empty or self-closing tag, meaning it doesn’t have a closing tag.
▪ It allows to display images from various sources, such as files on a website or URLs
from other websites.
CHARACTER ENTITIES
▪ These are special characters for symbols for which there is either no easy way to
type them via a keyboard (such as the copyright symbol or accented character)or
which have reserved meaning in HTML(“<“,”>”).
▪ They can be used in an HTML document by using the entity name or the entity
number.
LISTS
▪ List is a block level element in HTML.

▪ HTML provides three types of lists:

▪ UNORDERED LIST : collections of items in no particular order; these are by default rendered by

the browser as a bulleted list. <ul> along with <li>

▪ ORDERED LISTS: collections of items that have a set order; these are by default rendered by the

browser as a numbered list. <ol> along with <li>

▪ DEFINITION LISTS : collection of name and definition pairs. The definition lists are created by

using the <dl>, <dt>, and <dd> tags. Where the <dl> tag specifies the "definition list", the <dt>
tag specifies the "definition term", and the <dd> tag specifies the "definition description".
HTML5 SEMANTIC STRUCTURE ELEMENTS
▪ Semantic HTML elements are those that clearly describe their meaning in a human-
and machine-readable way.
▪ Elements such as <header>, <footer> and <article> are all considered semantic
because they accurately describe the purpose of the element and the type of
content that is inside them.
WHAT ARE SEMANTIC ELEMENTS?
▪ HTML was originally created as a markup language to describe documents on the early internet.
As the internet grew and was adopted by more people, its needs changed.

▪ Where the internet was originally intended for sharing scientific documents, now people wanted
to share other things as well. Very quickly, people started wanting to make the web look nicer.

▪ Because the web was not initially built to be designed, programmers used different hacks to get
things laid out in different ways. Rather than using the <table></table> to describe information
using a table, programmers would use them to position other elements on a page.

▪ As the use of visually designed layouts progressed, programmers started to use a generic “non-
semantic” tag like <div>. They would often give these elements a class or id attribute to describe
their purpose. For example, instead of <header> this was often written as <div class="header">.

▪ As HTML5 is still relatively new, this use of non-semantic elements is still very common on
websites today.
▪ The semantic elements added in HTML5 are:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
▪ Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act
more or less like <div> elements. They group other elements together into page
sections. However where a <div> tag could contain any type of information, it is easy to
identify what sort of information would go in a semantic <header> region.
SEMANTIC LAYOUT
WHY USE SEMANTIC ELEMENTS?
▪ To look at the benefits of semantic elements, here are two pieces of HTML code.
This first block of code uses semantic elements over second block of code uses
non-semantic elements.
<HEADER> AND <HGROUP>
▪ The <header> element is generally found at the top of a document, a section, or an
article and usually contains the main heading and some navigation and search
tools.
▪ The <hgroup> element should be used where you want a main heading with one or
more subheadings.
▪ The <header> element can contain any content, but the <hgroup> element can

only contain other headers, that is <h1> to <h6> and including <hgroup>.
<FOOTER>
▪ If there is a <header> there must be a <footer>.
▪ A <footer> is generally found at the bottom of a document, a section, or an article.
Just like the <header> the content is generally metainformation, such as author
details, legal information, and/or links to related information.
▪ It is also valid to include <section> elements within a footer.
<SECTION> AND <ARTICLE>
▪ Both these elements are used for sectioning a content, and yes, they can definitely
be used interchangeably.
▪ It’s a matter of in which situation. HTML4 offered only one type of container
element, which is <div>.
▪ While this is still used in HTML5, HTML5 provided us with <section> and <article>
in a way to replace <div>.
▪ The <section> and <article> elements are conceptually similar and
interchangeable. To decide which of these you should choose, take note of the
following:
▪ An article is intended to be independently distributable or reusable.
▪ A section is a thematic grouping of content.
<NAV>
▪ The <nav> element represents a section of a page that contains links to other
pages or to other parts within the same page.
<FIGURE> AND <FIGURECAPTION>
▪ <figure> is for wrapping your image content around it, and <figcaption> is to caption
your image.
<ASIDE>
▪ The <aside> element is intended for content that is not part of the flow of the text in

which it appears, however still related in some way. This of <aside> as a sidebar to
your main content.
CSS
▪ CSS (Cascading Style Sheets) is a stylesheet language developed by the World
Wide Web Consortium (W3C), with major contributions from Håkon Wium Lie
(who proposed it in 1994) and Bert Bos.
▪ CSS is a W3C standard for describing the appearance of HTML elements.
▪ With CSS, you can control how a website looks and feels. You get to choose the
fonts, colors, and how the page is organized.
▪ It is often compared to the design of a house – where HTML is the foundation, CSS
is the style that makes everything look appealing.
BENEFITS OF CSS
1. Improved control over formatting : CSS provides finer and more powrful
control over presentation than HTML alone.
2. Improved site maintainability : all styles can be placed in a single CSS file.
3. Improved accessibility: CSS keeps design separate from content. Screen
readers and accessibility tools can work better, improving the experience for
users and disabilities.
4. Improved Page Download Speed : since styles are centralized in a CSS file,
individual HTML pages are smaller. Browser download CSS once, then apply it
across pages, making the site load faster.
5. Improved Output flexibility : CSS allows responsive design(adapts pages for
different devices and screen sizes). Makes it easier to target different output
media(screen, print, mobile, etc.)
CSS VERSIONS
▪ Early Versions
▪ CSS1 (1996): Introduced basic styling features such as fonts, colors, margins, padding,
and the box model.
▪ CSS2 (1998): Expanded with advanced selectors, positioning, and media types for print
and screen.
▪ CSS 2.1 (2011): Corrected inconsistencies in CSS2 and became the most widely
supported standard across browsers.
▪ CSS3 and Beyond
▪ CSS3 (2000s–2010s): Released in modular form instead of a single specification.
Introduced key features like media queries, Flexbox, Grid layout, animations, and
transformations, which revolutionized responsive and interactive web design.
CSS SYNTAX
▪ CSS is written as a rule set, which consists of a selector and a declaration block. The
basic syntax of CSS is as follows:
▪ The selector is a targeted HTML element or elements to which we have to apply styling.
▪ The Declaration Block or " { } " is a block in which we write our CSS.
▪ Selectors : every CSS rule begins with a selector. The selector identifies which
element or elements in the HTML document will be effected by the declarations in the
rule.
▪ Properties: Properties are the aspects of the selected elements you want to style (like
color, width, height, etc.).
▪ Values : The value can take various forms depending on the property, such as a single
integer, keyword, function, or a combination of different items; some values have units,
while others do not.
▪ These are predefined text values, such as auto, none, inherit, initial, unset, static,
relative, absolute, fixed, sticky, block, inline, flex, grid, red, blue, bold, normal, etc.
▪ There are multiple ways of specifying a unit of measurement. Some are relative
measures and some are absolute.
▪ Relative units are those based on the value of something else, such as the size of parent
element.
▪ Absolute units are the once those have a real-world size.
* Pixels (px) are relative to the viewing
device. For low-dpi devices, 1px is one
device pixel (dot) of the display. For
printers and high resolution screens 1px
implies multiple device pixels.
The em and rem units are
practical in creating
perfectly scalable layout!
* Viewport = the browser
window size. If the viewport
is 50cm wide, 1vw = 0.5cm.
LOCATION OF STYLES
▪ CSS styles can be located in three primary places in relation to an HTML
document:
1. External Stylesheets: This is the most common and recommended method. CSS
rules are written in a separate file with a .css extension (e.g., [Link]). This file
is then linked to the HTML document within the <head> section using the <link>
tag:
<link rel="stylesheet" href="[Link]">
2. Internal or Embedded Stylesheets: CSS rules are embedded directly within the
HTML document inside a <style> tag, typically placed within the <head> section.
This is suitable for single HTML pages with unique styles.
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
▪ Inline Styles: CSS properties are applied directly to individual HTML elements
using the style attribute. This is generally discouraged as it mixes content and
presentation, making maintenance difficult.
<p style="color: blue; font-size: 16px;">This text has inline styles.</p>
SELECTORS
▪ CSS Selectors are used to select the HTML elements you want to style on a web
page. They allow you to target specific elements or groups of elements to apply
styles like colors, fonts, margins, and more.
▪ The element or elements that are selected by the selector are referred to as
subject of the selector.
▪ Different types of selectors are :
1. Element selectors
2. Class selectors
3. Id Selectors
4. Attribute Selectors
5. Pseudo-Element and Pseudo-class Selectors
6. Contextual Selectors
ELEMENT SELECTORS
▪ CSS element selector selects and styles specific HTML elements. The element
selector is defined by simply using the element's name in the stylesheet.
▪ You can select a group of elements by separating the element names with commas.

▪ You can select all elements using the universal element selector, which is
*(asterisk) character.
▪ The syntax for the element selector is as follows:
CLASS SELECTOR
▪ If a series of HTM elements have been labelled with the same class attribute value,
then you can target them for styling using a class selector, which takes the form :
period(.) followed by the class name.
▪ The syntax for the class selector is as follows:
ID SELECTORS
▪ CSS ID selector selects an element with a specific value for its id attribute. It is
denoted by the "#" (hash) symbol.
▪ Id selector should only be used when referencing a single HTML element since an
id attribute can only be assigned to a single HTML element.
▪ The syntax for the ID selector is as follows:
ATTRIBUTE SELECTORS
▪ CSS Attribute Selectors is used to select HTML elements with specific attribute or
value for attribute. Attribute selectors are enclosed in square brackets [ ] and can
take various forms.
▪ As below
▪ you can see how to select an HTML element based on attribute in CSS.
▪ Syntax :
▪ You can also specify the element with an attribute having a specific value.
PSEUDO-CLASS SELECTOR
▪ A pseudo-class is used to define a special state of an element.
▪ It does not create new elements, it just changes style based on conditions or user
interaction.
▪ For example, it can be used to:
▪ Style an element when a user moves the mouse over it
▪ Style visited and unvisited links differently
▪ Style an element when it gets focus
▪ Style valid/invalid/required/optional form elements

▪ The syntax of pseudo-classes:


▪ Anchor Pseudo-classes
▪ Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to

be effective! a:active MUST come after a:hover in the CSS definition in order to be
effective! Pseudo-class names are not case-sensitive.

▪ This is known as the LVHA order.

▪ If you don’t follow this order, some pseudo-classes can override others because of CSS

cascade rules.
Pseudo-classes and HTML Classes
▪ Pseudo-classes can be combined with HTML classes:
▪ When you hover over the link in the example, it will change color:
▪ Hover on div
▪ Simple tooltip hover
The :first-child Pseudo-class
▪ The :first-child pseudo-class matches a specified element that is the first child of
another element.
▪ the selector matches any <p> element that is the first child of any element:
▪ Match the first <i> element in all <p> elements
▪ Match all <i> elements in all first child <p> elements
PSEUDO-ELEMENT SELECTORS
▪ A CSS pseudo-element is used to style specific 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 an element

▪ Style the markers of list items


selector:pseudo-element {
▪ The syntax of pseudo-elements:
property: value;
}
▪ The : first-line pseudo-element is used to add a special style to the first line of a text.
▪ The : first-line pseudo-element can only be applied to block-level elements.
▪ The following properties apply to the ::first-line pseudo-element:
▪ font properties
▪ color properties
▪ background properties
▪ word-spacing
▪ letter-spacing
▪ text-decoration
▪ vertical-align
▪ text-transform
▪ line-height
▪ clear
▪ Note: The ::first-letter pseudo-element can only be applied to block-level
elements.

▪ The following properties apply to the ::first-letter pseudo- element:


▪ font properties
▪ color properties
▪ background properties
▪ margin properties
▪ padding properties
▪ border properties
▪ text-decoration
▪ vertical-align (only if "float" is "none")
▪ text-transform
▪ line-height
▪ float
▪ clear
CONTEXTUAL SELECTORS
▪ A contextual selector( also called combinators) allows you to select elements
based on their ancestors, descendants, or siblings.
▪ It selects elements based on their context or relation to other elements in the
document tree.
▪ A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
▪ There are four different combinators in CSS:
▪ Descendant combinator (space)
▪ Child combinator (>)
▪ Next sibling combinator (+)
▪ Subsequent-sibling combinator (~)
Descendant Combinator :
▪ The descendant combinator matches all elements that are descendants of a specified
element.
▪ Not restricted to direct children — it selects grandchildren, great-grandchildren, etc.
▪ The following example selects all <p> elements inside <div> elements:
Child Combinator (>)
▪ The child combinator selects all elements that are the children of a specified element.
▪ Matches only the direct children.
▪ Does not select deeper nested elements (grandchildren, etc.).
▪ The following example selects all <p> elements that are children of a <div> element:
▪ Next Sibling Combinator (+)
▪ The next sibling combinator is used to select an element that is directly after another
specific element.
▪ Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
▪ The following example selects the first <p> element that are placed immediately after
<div> elements:
Subsequent-sibling Combinator (~):
▪ The subsequent-sibling combinator selects all elements that are next siblings of a
specified element.
▪ The following example selects all <p> elements that are next siblings of <div>
elements:
THE CASCADE: HOW STYLES INTERACT
What is the Cascade in CSS?
▪ The cascade is the decision-making process that determines which CSS rule actually
applies to an element when there are multiple conflicting styles.
Since CSS stands for Cascading Style Sheets, this concept is at the very core of how
styling works.
▪ The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an
HTML element.
Sources of StylesCSS values can come from different origins:
▪ Default browser Styles → Default styles given by the browser (e.g., links are blue, body
has margin, <h1> is bold, <a> is blue and underlined).
▪ User-defined Styles → styles that the end-user (website visitor) can configure in their
browser for accessibility (for example, increasing font size or setting high-contrast
themes).
▪ Author-created Styles → Styles written by the web developer (in your CSS file, <style>,
or inline).
▪ The normal order of precedence is:
Author styles > User styles > Browser defaults
▪ what the web developer writes usually overrides user settings and browser defaults.
▪ The browser uses the cascade algorithm to resolve conflicts.
▪ CSS uses following cascade principles to help deal with conflict : inheritance,
specificity, and location.

Inheritance :
▪ Many CSS properties are inheritable, meaning child elements automatically take the
computed value from their parent.
▪ Examples of inheritable properties : color, font-family, font-size, line-height,
visibility.
▪ Non-inheritable properties include : margin, padding, border, background.
▪ You can force inheritance with the keyword:

p{
border: inherit;
margin: inherit;
}

▪ Important: inheritance only applies when the property supports it.


Specificity:
▪ Specificity is how the browser determines which style rule takes precedence when
more than one style rule could be applied to the same element.
▪ In CSS, the more specific the selector, the more it takes precedence(i.e., override the
previous definition.
▪ Specificity is calculated based on the type of selector:
▪ Inline styles → highest weight (1000).

▪ IDs → strong weight(0100).

▪ Classes, attributes, pseudo-classes → medium weight(0010).

▪ Element selectors, pseudo-elements → lowest weight(0001).


LOCATION :
▪ Finally when inheritance and specificity cannot determine style preference, the
principle of location will be used.
▪ The principle of location is that when rules have the same specificity, then the latest
are given more weight.
▪ If two selectors apply to the same element and their specificity is identical, then
the browser applies the rule that appears later in the cascade (source order).
1. Within the same stylesheet:
p { color: red; }
p { color: blue; }
Both have the same specificity (0,0,0,1) → the second one comes later, so the <p>
will be blue.
2. Between multiple <style> blocks
<style>
p { color: red; }
</style>

<style>
p { color: blue; }
</style>

▪ Same specificity. Since the second <style> block appears later in the HTML, <p>
will be blue.
3. Between multiple external CSS files

<link rel="stylesheet" href="[Link]">


<link rel="stylesheet"href="[Link]">

If [Link] and [Link] both have the same rule:

p { color: red; } /* in [Link] */


p { color: blue; } /* in [Link] */

Then <p> will be blue, because [Link] is loaded after [Link].


4. Inline styles
Inline styles are not “later”, they actually carry a higher specificity:

<p style="color: green;">Hello</p>

This (1,0,0,0) beats all stylesheet rules unless the stylesheet uses !important.

p { color: red !important; }

In this case, the stylesheet wins, because !important overrides the normal inline style.
THE BOX MODEL
▪ Everything in CSS has a box around it, and understanding these boxes is key to being
able to create more complex layouts with CSS, or to align items with other items.
▪ The CSS Box model defines how elements are rendered and how their dimensions are
calculated.
▪ It describes the structure of an element as a rectangular box that has content, padding,
a border, and a margin.
▪ The box model consists of four main components, which are:

Content → The innermost area (text, image, video, etc.)


Padding → Clears space around the content (inside the border).
Border → Wraps around the content + padding.
Margin → Clears space outside the border, separating the element from others.
background:
▪ the background color or image of an element fills an element out of its border.
How background works in the box model:
1. Content + Padding + Border area → covered by background
▪ The background-color or background-image fills the content area and the padding area, and it
extends underneath the border.
▪ But the margin area is always transparent (background does not extend intomargin).

2. Border appearance
▪ Even though the background extends under the border, you will not see it if the border is solid
(the border color overrides it).
▪ If the border is transparent or partially transparent, the background shows through.

3. Margin
▪ Margins never show the element’s background. They are always transparent and show the
parent’s background instead.
Borders:
▪ The border sits between the padding and the margin.
▪ It wraps the content + padding, enclosing the element visually.
▪ It is visible by default only if you set a border style (e.g., solid, dashed, double etc.).
▪ Border thickness contributes to the element’s total size (unless box-sizing: border-box
is used).
MARGINS AND PADDINGS:
▪ Margins and padding are essential properties for adding white space to a web page,
which can help differentiate one element from another.
▪ Properties of Margin
margin-top → space above the element
margin-right → space to the right of the element
margin-bottom → space below the element
margin-left → space to the left of the element
margin (shorthand) → sets all four margins at once

.box
{
margin: 20px; /* All four sides */
margin: 10px 20px; /* top/bottom = 10px, left/right = 20px */
margin: 10px 15px 20px; /* top = 10px, left/right = 15px, bottom = 20px */
margin: 5px 10px 15px 20px;/* top, right, bottom, left */
}
Padding Properties:
▪ CSS provides four individual properties and one shorthand:
▪ padding-top → space between content & top border
▪ padding-right → space between content & right border
▪ padding-bottom → space between content & bottom border
▪ padding-left → space between content & left border
▪ padding (shorthand) → sets padding for all sides in one line

.box1 .box3 {
{ padding: 10px 15px 20px; /* top = 10px,
padding: 20px; /* all 4 sides = 20px */ left/right = 15px, bottom = 20px */
} }

.box2 { .box4 {
padding: 10px 20px; /* top/bottom = 10px, padding: 5px 10px 15px 20px;/* top = 5px, right =
left/right = 20px */ 10px, bottom = 15px, left = 20px */
} }
Collapsing margins:
▪ In CSS, the adjoining margins of two or more boxes(which might or might not be
siblings) can combine to form a single margin. Margins that combine this way
are said to collapse, and the resulting combined margin is called a collapsed
margin.
▪ This only happens with vertical margins, never with horizontal ones.
▪ The largest margin value of the elements will be displayed, while the smaller
margin value will be collapsed to zero.
BOX DIMENSIONS:
▪ In CSS, every element is considered as a box.
▪ The dimensions of the box depend on its content, padding, border, and margin.
▪ These dimensions determine how much space the element will occupy in a webpage
and how it is separated from other elements.
▪ Width and Height
▪ By default, the box size is determined by its content.
▪ CSS allows you to explicitly set:

width: 300px;
height: 200px;

▪ These values control only the content area (not including padding, border, or margin).
▪ Padding:
▪ Adds space inside the box, between content and border.
▪ Increases the total size of the box (unless using box-sizing: border-box).

▪ Border:
▪ Surrounds the padding and content.
▪ Its thickness adds to the total box dimensions.

▪ Margin:
▪ Adds space outside the border, separating the element from its neighbors.
▪ Margins do not affect the element’s size but affect spacing between boxes.

▪ Calculating Total Box Size


▪ The total amount of space an element takes up is:
▪ True element width=width+padding-left+padding-right+border-left+border-right+margin-
left+margin-right
▪ True element height=height+padding-top+padding-bottom+border-top+border-bottom+margin-
top+margin-bottom
p{
border: solid 1px red; • width and height are set by content.
margin: 30px; • padding increases inner spacing.
padding: 30px; • border outlines the box.
} • margin separates the element from others.

▪ By default, width and height apply only to content.


▪ To include border and padding in these values, use:
box-sizing: border-box;
content-box (default) :
• The width and height apply only to the content
area.
• Padding and border are added outside the
given width/height
So the total size =
width + padding + border
height + padding + border

border-box:
• The width and height include content +
padding + border.
• Margin is still added outside as usual.
So the total size =
width (already includes content +
padding + border)
Overflow in One Direction
overflow-x → controls horizontal overflow
(left/right).
overflow-y → controls vertical overflow
(top/bottom).
CSS TEXT STYLING
▪ CSS provides two types of properties that affect text.
1. Font properties : affect the font and its appearance.
2. paragraph properties : affect the alignment, spacing, and structure of the text
block.
▪ Font properties :
Font :
▪ The CSS font property is a shorthand property for:
▪ font-style : font-style: normal|italic|oblique|initial|inherit;
▪ font-variant : font-variant: normal|small-caps|initial|inherit;
▪ font-weight : font-weight: normal|bold|bolder|lighter|number|initial|inherit;
▪ font-stretch: font-stretch: ultra-condensed|extra-condensed|condensed|semi
condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;
▪ font-size: font-size:medium|xx-small|x-small|small|large|x-large|xx-
large|smaller|larger|length|initial|inherit;
▪ line-height : line-height: normal|number|length|initial|inherit;
▪ font-family : font-family: family-name|generic-family|initial|inherit;

▪ Rules for the CSS Font Shorthand Property


▪ The font-size and font-family values are required. If one of the other values is missing, their default
value are used.
▪ If defined, font-style, font-variant and font-weight must precede font-size.
▪ If defined, line-height must immediately follow font-size, preceded by "/", like this: 15px/30px.
▪ font-family must be the last value specified.
▪ Paragraph properties:
▪ letter-spacing: normal|length|initial|inherit;
▪ line-height: normal|number|length|initial|inherit;
▪ list-style-image: none|url()|initial|inherit;
▪ list-style-type: value;
▪ text-align: left|right|center|justify|initial|inherit;
▪ text-decoration: text-decoration-line text-decoration-color text-decoration-style text-
decoration-thickness|initial|inherit;
▪ text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
▪ vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-
bottom|initial|inherit;
▪ text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
End of module 1

You might also like