CSS – Units of measurement – Formatting text with css3 – Colors and backgrounds – Padding –

Borders – Margins – Floating and positioning – CSS layout with flexbox and grid – CSS
Animations and Transitions – Responsive Design with Media Queries.

INTRODUCING CASCADING STYLE SHEETS

CSS is a separate language with its own syntax.
THE BENEFITS OF CSS
Precise type and layout controls. You can achieve print-like precision using CSS. There is even a
set of properties aimed specifically at the printed page
Less work. You can change the appearance of an entire site by editing one style sheet. This also
ensures consistency of formatting throughout the site.
More accessible sites. When all matters of presentation are handled by CSS, you can mark up your
content meaningfully, making it more accessible for non-visual or mobile devices.
1. Marking Up the Document
You also heard me say that the markup creates the structure of the document, sometimes called
the structural layer, upon which the presentation layer can be applied.
2. Writing the Rules
A style sheet is made up of one or more style instructions (called style rules) that describe
how an element or group of elements should be displayed. The first step in learning CSS is to get
familiar with the parts of a rule.
Each rule selects an element and declares how it should look.
The following example contains two rules. The first makes all the h1 elements in the
document green; the second specifies that the paragraphs should be in a large, sans-serif font.
h1 { color: green; }
p { font-size: large; font-family: sans-serif; }
In CSS terminology, the two main sections of a rule are the selector that identifies the
element or elements to be affected, and the declaration that provides the rendering instructions.
The declaration, in turn, is made up of a property (such as color) and its value (green), separated
by a colon and a space. One or more declarations are placed inside curly brackets, as shown in
FIGURE 11-3.
Selectors
In the previous small style sheet example, the h1 and p elements are used as selectors. This
is called an element type selector, and it is the most basic type of selector. The properties defined
for each rule will apply to every h1 and p element in the document, respectively.
Another type of selector is an ID selector, which selects an element based on the value of
an element’s id attribute. It is indicated with the # symbol. For example, the selector #recipe
targets an element with id="recipe".

Declarations
The declaration is made up of a property/value pair. There can be more than one
declaration in a single rule; for example, the rule for the p element shown earlier in the code
example has both the font-size and font-family properties.
Each declaration must end with a semicolon to keep it separate from the following
declaration. If you omit the semicolon, the declaration and the one following it will be ignored.
The curly brackets and the declarations they contain are often referred to as the declaration
block.
p{
font-size: large;
font-family: sans-serif;
}

Complete task: Refer page 264

3. Attaching the Styles to the Document
External style sheets
 An external style sheet is a separate, text-only document that contains a number of style
rules. It must be named with the .css suffix. The .css document is then linked to (via the link
element) or imported (via an @import rule in a style sheet) into one or more HTML documents. In
this way, all the files in a website may share the same style sheet. This is the most powerful and
preferred method for attaching style sheets to content.
Embedded style sheets
This is the type of style sheet we worked with in the exercise. It is placed in a document via the
style element, and its rules apply only to that document. The style element must be placed in the
head of the document. This example also includes a comment (see the “Comments in Style
Sheets” sidebar).
Inline styles
You can apply properties and values to a single element by using the style attribute in the element
itself, as shown here:

Inline styles apply only to the particular element in which they appear. Inline styles should be
avoided, unless it is absolutely necessary to override styles from an embedded or external style
sheet. Inline styles are problematic in that they intersperse presentation information into the
structural markup.
CSS (Cascading Style Sheets) is a vital tool for web developers and designers to enhance the
appearance and visual aesthetics of their web pages. CSS allows developers to control the layout,
styling, and formatting of HTML elements. There are three primary types of CSS: inline, internal,
and external CSS. In this article, we will learn about these different types of CSS with examples.
Let’s start!!!
Types of CSS
1. Inline CSS
Inline CSS is the simplest form of CSS, and it is embedded within the HTML tags. It is useful when a
single element requires some styling. However, it is not recommended for use on larger projects
because it can become difficult to manage the styles as the project grows. Here’s an example of
inline CSS:
<p style="color: blue; font-size: 20px;">Dataflair: This text is blue and 20px in size.</p>
Advantages of Inline CSS:
 Quick and easy to use.
 Specific styles can be applied to individual elements.
 Overrides external and internal CSS styles.
Disadvantages of Inline CSS:
  Difficult to maintain and update.
 Increases the size of the HTML file, which can slow down page load times.
 Repeated use of inline styles can lead to inconsistent styling across a website.
2. Internal CSS
Internal CSS is used to apply styles to a single HTML document, and it is placed within the head
section of an HTML document. It is useful when working on smaller projects or making changes to
a single HTML document. Here’s an example of internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
p{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This text is blue and 20px in size.</p>
</body>
</html>
Output

Advantages of Internal CSS:

 Provides more control over styling compared to inline CSS.
 Separates content and presentation, making it easier to maintain and update styles for a
specific page or section.
 Overrides external styles for specific elements or sections.
Disadvantages of Internal CSS
 Increases the size of the HTML file, which can slow down page load times.
  Repeated use of internal styles can lead to inconsistent styling across a website.
 Can be difficult to maintain for larger projects.
3. External CSS
External CSS is the most commonly used form of CSS. It involves linking an external style sheet file
to the HTML document. External CSS is ideal for larger projects with multiple HTML documents
because it allows developers to maintain a consistent look and feel across multiple pages. Here’s
an example of external CSS:
In the example above, the CSS code is stored in a separate file called “style.css.” The HTML code
links to this file using the <link> tag in the head section. This is the recommended approach for
larger projects because it allows developers to make changes to the CSS file without affecting the
HTML code.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This text is blue and 20px in size.</p>
</body>
</html>
CSS:
p{
color: blue;
font-size: 20px;
}

Advantages of External CSS

 Separates content and presentation, making it easier to maintain and update styles across
multiple pages.
 Promotes consistency in styling across the website.
  Can be cached by the browser, leading to faster page load times.
 Can be reused across multiple pages and websites.
Disadvantages of External CSS
 Requires a separate file, which can add complexity to the project structure.
 Can increase the number of HTTP requests to the server, which can slow down page load
times.
Style Rule Hierarchy
Style information can come from various origins, listed here from highest priority to lowest. In
other
words, items higher in the list override items below.
• Any style rule marked !important by the reader (user)
• Any style rule marked !important by the author
• Style sheets written by the author
• Style sheets created by the reader (user)
• Browser’s default style rules (“user agent style sheet”)

Rule order
The cascade follows a “last one wins” rule. Whichever rule appears last has the last word.
The Box Model
As long as we’re talking about Big CSS Concepts, it is only appropriate to introduce the
cornerstone of the CSS visual formatting system: the box model. The easiest way to think of the
box model is that browsers see every element on the page (both block and inline) as being
contained in a little rectangular box. You can apply properties such as borders, margins, padding,
and backgrounds to these boxes, and even reposition them on the page.

Grouped Selectors
Hey! This is a good opportunity to show you a handy style rule shortcut. If you ever need to apply
the same style property to a number of elements, you can group the selectors into one rule by
separating them with commas. This one rule has the same effect as the five rules listed
previously. Grouping them makes future edits more efficient and results in a smaller file size:

A Quick History of CSS

 The first official version of CSS (the CSS Level 1 Recommendation, a.k.a CSS1) was released
in 1996, and included properties for adding font, color, and spacing instructions to page elements.
Unfortunately, lack of browser support prevented the widespread adoption of CSS for several
years.
CSS Level 2 (CSS2), released in 1998, most notably added properties for positioning that
allowed CSS to be used for page layout. It also introduced styles for other media types (such as
print and handheld) and more sophisticated methods for selecting elements. CSS Level 2, Revision
1 (CSS2.1) made some minor adjustments to CSS2 and became a Recommendation in 2011.
CSS Level 3 (CSS3) is different from prior versions in that it is divided into individual
modules,
each addressing a feature such as animation, multiple column layouts, or borders. While some
modules are being standardized, others remain experimental. In that way, browser developers can
begin implementing (and we can begin using!) one feature at a time instead of waiting for an
entire specification to be “ready.”
Now that each CSS module is on its own track, modules have their own Level numbers. No
more big, all encompassing CSS versions. Newly introduced modules, such as the Grid Layout
Module, start out at Level 1. Modules that have been around a while may have already reached
Level 4.
You won’t believe how many individual specifications are in the works! For an overview of
the
specifications in their various states of “doneness,” see the W3C’s CSS current work page at
ww.w3.org/Style/CSS/ current-work.
CSS UNITS OF MEASUREMENT
Absolute Units
Absolute units have predefined meanings or real-world equivalents. They are always the same
size, regardless of the context in which they appear. The most popular absolute unit for web
design is the pixel, which CSS3 defines as 1/96 inch. Pixels are right at home on a pixel-based
screen and offer precise control over the size of the text and elements on the page.
Relative Units
The rem unit
CSS3 introduced a relative measurement called a rem (for root em) that is based on the font size
of the root (html) element, whatever that happens to be. In modern browsers, the default root
font size is 16 pixels; therefore, a rem is equivalent to a 16-pixel unit (unless you set it explicitly to
another value). An element sized to 10rem would measure 160 pixels.
The em unit
An em is a relative unit of measurement that, in traditional typography, is based on the width of
the capital letter M (thus the name “em”).
Viewport percentage lengths (vw/vh)
The viewport width (vw) and viewport height (vh) units are relative to the size of the viewport
(browser window). A vw is equal to 1/100 the width of the viewport. Similarly, a vh is equal to
1/100 the height of the viewport. Viewport-based units are useful for making images and text
elements stay the full width or height of the viewport:

FORMATTING TEXT
BASIC FONT PROPERTIES
In CSS, fonts are specified using a set of font-related properties for typeface, size, weight, font
style, and special characters. There are also shortcut properties that let you specify multiple font
attributes in a single rule.

Specifying the Font Name

Basic Font Properties
Choosing a typeface, or font family as it is called in CSS, for your text is a good place to start. Let’s
begin with the font-family property and its values.
Font Style (Italics)

The font-style property affects the posture of the text—that is, whether the letter shapes are vertical
(normal) or slanted (italic and oblique).

Font Variant in CSS2.1 (Small Caps)

Some typefaces come in a “small caps” variant. This is a separate font design that uses small uppercase-
style letters in place of lowercase letters. Small caps characters are designed to match the size and density
of lowercase text so they blend in.

Compare NASA and USA in the standard font to nasa and usa in small caps.

The Shortcut font Property

Specifying multiple font properties for each text element can get repetitive and lengthy, so the creators of
CSS provided the shorthand font property, which compiles all the font-related properties into one rule.

order is imporatnt

{ font: style weight stretch variant size/line-height font-family; }

CHANGING TEXT COLOR

Using the color property is very straightforward. The value of the color property can be a predefined color
name (see the “Color Names” sidebar) or a numeric value describing a specific RGB color.

h1 { color: gray; }

h1 { color: #666666; }

h1 { color: #666; }

h1 { color: rgb(102,102,102); }

Color is inherited, so you can change the color of all the text in a document by applying the color property
to the body element, as shown here:

body { color: fuchsia; }

Element selector

Grouped selectors

p { color: navy; }

p, ul, td, th { color: navy; }

Descendant Selectors

A descendant selector targets elements that are contained within (and there fore are descendants of)
another element. It is an example of a contextual selector because it selects the element based on its
context or relation to another element.

li em { color: olive; }

ID Selectors
#sleestak { color: olive; }

TEXT LINE ADJUSTMENTS

p#1 { text-indent: 2em; }

p#2 { text-indent: 25%; }

p#3 { text-indent: -35px; }

UNDERLINES AND OTHER “DECORATIONS”
CHANGING CAPITALIZATION
TEXT SHADOW

Text Shadow The text-shadow property adds a “shadow” below your text that makes it seem to hover or
pop out above the page.

CHANGING LIST BULLETS AND NUMBERS

COLORS AND BACKGROUNDS