CSS in Web Designing
History of CSS
CSS, which stands for Cascading Style It was created to separate the Prior to CSS, web designers had to
Sheets, was first introduced in 1996 by presentation layer (layout, colors, use HTML attributes and inline styles
the World Wide Web Consortium fonts) from the structure and content to control the appearance of web
(W3C). of a web page. pages, which made code
maintenance and updates
challenging.
Importance of CSS in Web Designing
CSS plays a crucial role in web It enables consistency across CSS makes websites more
design, allowing designers to different pages of a website by responsive and adaptable to
control the visual appearance and applying the same styles to different screen sizes and devices,
layout of a website. multiple elements. ensuring a seamless user
experience.
Inline CSS
Inline CSS is a method of adding CSS styles directly to HTML
elements using the "style" attribute.
It is typically used for small- scale styles that are specific to
individual elements.
Inline CSS can be effective for quick styling changes, but it can
become difficult to maintain and update for larger projects.
Internal CSS
Internal CSS is defined within the It allows developers to apply CSS Internal CSS is useful for styling
<style> tags in the <head> section styles to a specific HTML individual pages or sections within
of an HTML document. document without affecting other a website.
pages.
External CSS
External CSS is a separate file that This method promotes code External CSS files can be cached by
contains CSS styles and is linked to reusability and allows for web browsers, leading to faster
HTML documents using the <link> consistent styles across multiple page loading times and improved
tag. pages. performance.
Introduction to CSS Selectors
Universal SelectorSelects all Type SelectorSelects elements Class SelectorSelects Attribute SelectorSelects
elements in the document. based on their element type elements based on their class elements based on their
(e.g., h1, p, div). attribute (e.g., .classname). attributes (e.g.,
[attribute=value]).
Types of CSS Selectors
Specificity in CSS
Importance of Specificity in CSS Calculation of Specificity
Specificity determines which CSS rule is applied to an
element when multiple rules target the same element. Specificity is calculated based on the number and types
It helps resolve conflicts and avoid unexpected styling. of selectors used in a CSS rule.
Understanding specificity is crucial for maintaining Inline styles have the highest specificity, followed by IDs,
consistency and organization in CSS code. classes, and type selectors.
Specificity values are determined using a four- digit
notation (e.g., 0,0,0,1), where each digit represents the
specificity of a selector type.
Content
01. The "content" component of the box model refers to the actual content of an
element, such as text, images, or other media.
02. It is the innermost layer of the box and is affected by the padding, border,
and margin of the element.
03. The size and positioning of the content can be adjusted using CSS properties
like width, height, and overflow.
Padding
01 02 03
Padding refers to the space between the It provides visual spacing around the Padding can be adjusted using CSS
content and the border of an element. content, separating it from the borders and properties like padding- top, padding- right,
other elements nearby. padding- bottom, and padding- left.
Border
01 02
The border component of the box model defines the It surrounds the content and padding and can be
edge of an element. given different styles, colors, and widths.
03
Borders can also be adjusted using CSS properties like
border- style, border- color, and border- width.
• An inline CSS is used to
apply a unique style to a
Inline single HTML element.
• Managing a website may
difficult if we use only
CSS inline CSS.
• So, Whenever our
requirements are very
small we can use inline
CSS. •
• Example: – <p style="color :
red;">This is In-line CSS
.</p>
• An internal CSS is used to
define a style for a single
HTML page.
Internal • The CSS rule set should be
within the HTML file in the
CSS head section i.e the CSS is
embedded within the HTML
file.
• Example: – <style> body
{background-color: yellow;} h1
{color: blue;} p {color: red;}
</style>
• An external style sheet is
used to define the style for
many HTML pages.
External • In External CSS we create a
.css file and use it in our
CSS HTML page as per our
requirements.
• The CSS is more efficient
method for styling a website.
By editing the .css file, we can
change the whole site at once.
HTML file-new.htm
<html>
<head> <link rel="stylesheet"
href=“styles.css">
External </head>
<body> <h1>This is a
CSS heading</h1> <p>This is a
paragraph.</p> </body>
</html>
CSS FILE-styles.css
body { background-color:
yellow; } h1 { color: blue; } p {
color: red; }
Example
Inline styles are defined within the "style"
attribute of the relevant element:
<html>
<body>
<h1 style="color:blue; text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Internal CSS
Example
Internal styles are defined within the <style> element,
inside the <head> section of an HTML page:
<html>
<head>
<style>
body { background-color: linen;}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
External CSS
External styles are defined within
the <link> element, inside the "mystyle.css"
<head> section of an HTML page: body
{
<html> background-
<head> color: lightblue;
<link rel="stylesheet" href="mys }
tyle.css">
</head> h1
<body> {
color: navy;
<h1>This is a heading</h1> margin-left: 20px;
<p>This is a paragraph.</p> }
</body>
</html>
CSS FOR STYLING
CS380 19
THE GOOD, THE BAD AND THE… UGLY!
<p>
<font face="Arial">Shashdot.</font>
News for <b>nerds!!</b> You will <i>never</i>, <u>EVER</u>
be
<font size="+4" color="red">BORED</font> here!
</p> HTML
Slashdot. News for nerds!! You will never, EVER be BORED
here!
output
• Tags such as b, i, u, and font are discouraged in strict XHTML
• Why is this bad?
CS380 20
CASCADING STYLE SHEETS (CSS)
• Describes the appearance, layout, and presentation of information on a web page
• HTML describes the content of the page
• Describes how information is to be displayed, not what is being displayed
• Can be embedded in HTML document or placed into separate .css file
CS380 21
BASIC CSS RULE SYNTAX
selector {
property: value;
property: value;
...
property: value;
} CSS
p {
font-family: sans-serif;
color: red;
} CSS
• A CSS file consists of one or more rules
• Each rule starts with a selector
• A selector specifies an HTML element(s) and then applies style properties to them
• a selector of * selects all elements
22
ATTACHING A CSS FILE <LINK>
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
• A page can link to multiple style sheet files
• In case of a conflict (two sheets define a style for the same
HTML element), the latter sheet's properties will be used
CS380 23
EMBEDDING STYLE SHEETS: <STYLE>
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
• CSS code can be embedded within the head of an
HTML page
• Bad style and should be avoided when possible (why?)
CS380 24
INLINE STYLES: THE STYLE ATTRIBUTE
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML
This is a paragraph
output
• Higher precedence than embedded or linked styles
• Used for one-time overrides and styling a particular element
• Bad style and should be avoided when possible (why?)
CS380 25
CSS PROPERTIES FOR COLORS
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above output
property description
color color of the element's text
color that will appear behind the
background-color
element
CS380 26
SPECIFYING COLORS
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
• color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
• RGB codes: red, green, and blue values from 0 (none) to 255 (full) 27
• hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
GROUPING STYLES
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
This h2 uses the above styles.
output
• A style can select multiple elements separated by
commas
CS380 28
• The individual elements can also have their own styles
CSS COMMENTS /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
• CSS (like HTML) is usually not commented as rigorously as
programming languages such as Java
• The // single-line comment style is NOT supported in CSS
• The <!-- ... --> HTML comment style is also NOT supported in CSS
CS380 29
CSS PROPERTIES FOR FONTS
property description
font-family which font will be used
how large the letters will be
font-size
drawn
used to enable/disable italic
font-style
style
used to enable/disable bold
font-weight
style
CS380 30
FONT-FAMILY
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
• Enclose multi-word font names in quotes
CS380 31
MORE ABOUT FONT-FAMILY
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
• We can specify multiple fonts from highest to lowest priority
• Generic font names:
• serif, sans-serif, cursive, fantasy, monospace
• If the first font is not found on the user's computer, the next is tried
• Placing a generic font name at the end of your font-family value, ensures that every computer will use a valid font
CS380 32
FONT-SIZE
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
• units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
• vague font sizes: xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger
33
• percentage font sizes, e.g.: 90%, 120%
FONT-SIZE
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
• pt specifies number of point, where a point is 1/72 of an inch onscreen
• px specifies a number of pixels on the screen
• em specifies number of m-widths, where 1 em is equal to the font's current size
CS380 34
FONT-WEIGHT, FONT-STYLE
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
• Either of the above can be set to normal to turn them
off (e.g. headings)
CS380 35
CSS PROPERTIES FOR TEXT
property description
alignment of text within its
text-align
element
text-decoration decorations such as underlining
line-height,
gaps between the various
word-spacing,
portions of the text
letter-spacing
indents the first letter of each
text-indent
paragraph
Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)
CS380 36
TEXT-ALIGN
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
The Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
• text-align can be left, right, center, or
justify
CS380 37
TEXT-DECORATION
p {
text-decoration: underline;
} CSS
This paragraph uses the style above.
output
• can also be overline, line-through, blink, or none
• effects can be combined:
text-decoration: overline underline;
CS380 38
THE LIST-STYLE-TYPE PROPERTY
ol { list-style-type: lower-roman; }
CSS
• Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
CS380 x. lower-greek: alpha, beta, gamma, etc. 39
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
BODY STYLES
body {
font-size: 16px;
}
CSS
• Applies a style to the entire body of your page
• Saves you from manually applying a style to each
element
CS380 40
CASCADING STYLE SHEETS
• Properties of an element cascade together in this order:
• browser's default styles
• external style sheet files (in a <link> tag)
• internal style sheets (inside a <style> tag in the page's header)
• inline style (the style attribute of the HTML element)
CS380 41
INHERITING STYLES
body { font-family: sans-serif; background-color: yellow;
}
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS
This is a heading
A styled paragraph. Previous slides are available on the website.
• A bulleted list output
• when multiple styles apply to an element, they are inherited
CS380
• a more tightly matching rule can override a more general 42
inherited rule
STYLES THAT CONFLICT
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above.
This heading uses both styles above.
output
• when two styles set conflicting values for the same
property, the latter style takes precedence
CS380 43
W3C CSS VALIDATOR
<p>
<a href="http://jigsaw.w3.org/css-
validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS
output
• jigsaw.w3.org/css-validator/
• checks your CSS to make sure it meets the official CSS
CS380
specifications 44
CSS PROPERTIES FOR BACKGROUNDS
property description
background-color color to fill background
background-image image to place in background
placement of bg image within
background-position
element
whether/how bg image should
background-repeat
be repeated
whether bg image scrolls with
background-attachment
page
shorthand to set all background
background
properties
CS380 45
BACKGROUND-IMAGE
body {
background-image: url("images/draft.jpg");
}
CSS
• background image/color fills the element's content
area
CS380 46
BACKGROUND-REPEAT
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
• can be repeat (default), repeat-x, repeat-y, or no-repeat
CS380 47
BACKGROUND-POSITION
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
• value consists of two tokens, each of which can be top, left, right,
bottom, center, a percentage, or a length value in px, pt, etc.
• value can be negative to shift left/up by a given amount
CS380 48
ASIDE: FAVORITES ICON ("FAVICON")
<link href="filename" type="MIME type" rel="shortcut icon"
/> HTML
<link href="yahoo.gif" type="image/gif" rel="shortcut
icon" />
HTML
• The link tag, placed in the HTML page's head section, can
specify an icon
CS380
• this icon will be placed in the browser title bar and 49
bookmark/favorite
