Scribd
Upload
23 views

CSS Part 1

This document provides an overview of CSS (Cascading Style Sheets) and common CSS properties. CSS is used to style and lay out web pages and allows separation of HTML content from presentation. Key points covered include CSS syntax, selectors like classes and IDs, external and internal style sheets, common properties like background-color, background-image, and the cascading order that determines which styles take precedence.

Uploaded by

michaeldevid7890
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

CSS Part 1

This document provides an overview of CSS (Cascading Style Sheets) and common CSS properties. CSS is used to style and lay out web pages and allows separation of HTML content from presentation. Key points covered include CSS syntax, selectors like classes and IDs, external and internal style sheets, common properties like background-color, background-image, and the cascading order that determines which styles take precedence.

Uploaded by

michaeldevid7890
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

Internet Computing

CSS (Part 1)
Content
2

 CSS
What is CSS?
3

 CSS stands for Cascading Style Sheets


 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
 Styles Solved a Big Problem
What is CSS?
4

 CSS removes the presentation attributes from the


structure allowing reusability, ease of maintainability,
and an interchangeable presentation layer.
 HTML was never meant to be a presentation
language. Proprietary vendors have created tags to add
presentation to structure.
 <font>
 <b>
 <i>
 CSS allows us to make global and instantaneous changes
easily.
CSS Syntax
5

selector/element {
property: value;
}

 Example
p {color:red;text-align:center;}
CSS Comments
6

 Comments are used to explain your code, and may


help you when you edit the source code at a later
date. Comments are ignored by browsers.
 A CSS comment begins with "/*", and ends with "*/",
like this:
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
selector
7

 The selector can


 an identifier,(id)
 class
 single XHTML element (body, div, etc)
 a grouping of elements
Single XHTML element
8

 Specify the style(s) for a single XHTML element.

body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
 Example
https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_elem
ent
Grouping of elements
9

 Allows you to specify a single style for multiple


elements at one time.

h1, h2, h3, h4, h5, h6 {


font-family: “Trebuchet MS”, sans-serif;
}
 Example
https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping
Class Selector
10

 The class selector is used to specify a style for a group


of elements. Unlike the id selector, the class selector is
most often used on several elements.
 This allows you to set a particular style for any HTML
elements with the same class.
 The class selector uses the HTML class attribute, and is
defined with a "."
 Example
https://www.w3schools.com/css/tryit.asp?filename=trycs
s_syntax_class
Id Selector
11

 The id selector is used to specify a style for a single,


unique element.
 The id selector uses the id attribute of the HTML
element, and is defined with a "#"
 Example
https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id
Selectors
12

 Identifier or class? What are the differences?


 An identifier is specified only once on a page and has a higher
inheritance specificity than a class.
 A class is reusable as many times as needed in a page.
 Use identifiers for main sections and class for sub-sections of
your document
Advanced CSS Selectors
13

 Descendant Selector
body h1 { }
#navigation p {}

 Child Selectors
div ol > p {}

 Universal Selector
* {}

• Attribute Selectors
a[href=“http://home.org”]

 Pseudo-Class Selectors
a:active {}
#nav:hover {}
Using Style Sheets
14

 External Style Sheet


<link rel=“stylesheet” type=“text/css” href=“location.css” />

 Embedded/Internal Styles
<style type=“text/css”>
body {}
</style>
 Inline Styles
<p style=“font-size: 12px”>Lorem ipsum</p>

multiple external style sheets can be referenced inside


a single HTML document
External Style Sheet Example
15

 CSS Code
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
 HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with
CSS! </p>
</body>
</html>
Embedded/Internal Styles Example
16

 CSS Code
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
Inline Styles Example
17

 CSS Code
<html>
<head>
</head>
<body>
<p style="background: blue; color: white;">A new background
and font color with inline CSS</p>
</body>
</html>
Common Inline CSS Mistakes
18

 When using CSS inline, you must be sure not to use


quotations within your inline CSS. If you use
quotations the browser will interpret this as the end of
your style value.
 CSS Code
<p style="background: url("yellow_rock.gif");">
This is broken</p>
<p style="background: url(yellow_rock.gif);">
This is workin'</p>
Multiple Style Sheets
19

 If some properties have been set for the same selector


in different style sheets, the values will be inherited
from the more specific style sheet.
 For example, an external style sheet has these
properties for the h3 selector:
H3 { color:red; text-align:left; font-size:8pt; }
 an internal style sheet has these properties for the h3
selector
H3 { text-align:right; font-size:20pt; }
 internal style sheet also links to the external style sheet
the properties for h3:
color:red; text-align:right; font-size:20pt;
Cascading order
20

 What style will be used when there is more than one


style specified for an HTML element?
 Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest
priority:
 Browser default
 External style sheet
 Internal style sheet (in the head section)
 Inline style (inside an HTML element)
CSS Background
21

 The background of your website is very important.


 CSS background properties are used to define the
background effects of an element.
 CSS properties used for background effects:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
Background Color
22

 Specifies the background color of an element


<html>
<head>
<style type="text/css">
body { background-color:#b0c4de; }
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
Background Color
23

 The background color can be specified by -


 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

 CSS Code
 h4 { background-color: white; }

 p { background-color: #1078E1; }

 ul { background-color: rgb( 149, 206, 145); }


Background Image
24

 Specifies an image to use as the background of an element.


 By default, the image is repeated so it covers the entire
element.
<html>
<head>
<style type="text/css">
body {background-image:url(‘abc.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
background-repeat
25

 By default, the background-image property repeats


an image both horizontally and vertically.
 Some images should be repeated only horizontally or
vertically, or they will look strange
 Possible values are
 repeat-x : repeated only horizontally
 repeat-y : repeated only vertically
 no-repeat : not repeated horizontally or vertically
background-position
26

 The position of the image is specified by the


background-position property

background-position:right top;
background-attachment
27

 You may choose to have your background scroll


naturally, or to have it in a fixed position.
 The background-attachment property allows you to
set fixed and scrolling background images
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;
}
Background - Shorthand property
28

 It is also possible to specify all the properties in one


single property. This is called a shorthand property.
 The shorthand property for background is simply
"background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
 order of the property values are:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 It does not matter if one of the property values are missing, as long as the ones
that are present are in this order.
summary
29

Property Values

background-attachment Scroll/ fixed/ inherit


color-rgb/ color-hex/ color-name/ transparent/
background-color
inherit
background-image url(URL)/ none/ inherit
left top/ left center/ left bottom/ right top/
right center/ right bottom/ center top/
background-position
center center/center bottom/ x% y%/
xpos ypos/inherit
background-repeat repeat/repeat-x/repeat-y/no-repeat/inherit
30

CSS Font
CSS Font
31

 CSS font properties define the font family, boldness,


size, and the style of a text
 CSS Font Families
 two types of font family names
 generic family - a group of font families with a similar look (like
"Serif" or "Monospace")
 font family - a specific font family (like "Times New Roman" or
"Arial")
Generic Family Font Family Description

Serif Times New Roman Serif fonts have small lines at the ends on some characters
Georgia
Sans-serif Arial "Sans" means without - these fonts do not have the lines at the
Verdana ends of characters

Monospace Courier New All monospace characters have the same width
Lucida Console
Font Family
32

 The font family of a text is set with the font-family


property.
 The font-family property should hold several font
names as a "fallback" system.
 If the browser does not support the first font, it tries
the next font.
 Start with the font you want, and end with a generic
family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
 If the name of a font family is more than one word, it
must be in quotation marks, like font-family: "Times
New Roman".
Example
33

<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman
font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Font Style
34

 The font-style property is mostly used to specify


italic text.
 This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic,
but less supported)
 Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
Font Size
35

 The font-size property sets the size of the text.


 The font-size value can be an absolute, or relative size
 Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad
for accessibility reasons)
 Absolute size is useful when the physical size of the output is
known
 Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
 If you do not specify a font size, the default size for normal text, like
paragraphs, is 16px (16px=1em).
Set Font Size with Pixels
36

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

The example above allows Firefox, Chrome, and


Safari to resize the text, but not Internet Explorer.
Set Font Size With Em
37

 To avoid the resizing problem with Internet Explorer,


many developers use em instead of pixels.
 The em size unit is recommended by the W3C.
 1em is equal to the current font size.
 The default text size in browsers is 16px. So, the default
size of 1em is 16px.
 Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Font Weight
38

 If you want to control the weight of your font (its


thickness), using font weight is the best way to go
about it.
 It is recommended that you only use font-weight in
multiples of 100 (e.g. 200, 300, etc) because any less
and you probably will not see any difference.
 The values range from 100 (thin)-900 (thick).
 Example
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Font Variant
39

 CSS Font Variant allows you to convert your font to


all small caps.
 Example
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
CSS Text
40

 While CSS Font covers most of the traditional ways


to format your text, CSS Text allows you to control
the spacing, decoration, and alignment of your text.
Text Color
41

 The color property is used to set the color of the text.


The color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
 The default color for a page is defined in the body
selector.
 Example
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
Text Decoration
42

 The text-decoration property is used to set or remove


decorations from text.
 The text-decoration property is mostly used to remove
underlines from links for design purposes:
a {text-decoration:none;}
 text-decoration allows you to add horizontal lines
above, below, or through your text.
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Text Indent
43

 CSS text-indent is a great way to indent your


paragraphs without having to use preformatted HTML
tags, (<pre>), or inserting spaces manually (&nbsp;).
 You may define your indentation with exact values or
percentages.
 Example
p { text-indent: 20px; }
h5 { text-indent: 30%; }
Text Alignment
44

 The text-align property is used to set the horizontal


alignment of a text.
 Text can be centered, or aligned to the left or right, or
justified.
 When text-align is set to "justify", each line is stretched
so that every line has equal width, and the left and
right margins are straight.
 Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Transformation
45

 The text-transform property is used to specify


uppercase and lowercase letters in a text.
 It can be used to turn everything into uppercase or
lowercase letters, or capitalize the first letter of each
word.
 Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
White Space
46

 The white-space attribute allows you to prevent text


from wrapping until you place a break <br /> into your
text.
 Example
p { white-space: nowrap; }
Word spacing
47

 With the CSS attribute word-spacing you are able to


specify the exact value of the spacing between your
words.
 Word-spacing should be defined with exact values
 Example
p { word-spacing: 10px; }
Letter spacing
48

 With the CSS attribute letter-spacing you are able to


specify the exact value of the spacing between your
letters.
 Letter-spacing should be defined with exact values.
 Example
p { letter-spacing: 3px; }
49

CSS Links
Links
50

 Links can be style with any CSS property (e.g. color, font-
family, background-color).
 Special for links are that they can be styled differently
depending on what state they are in.
 The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
 When setting the style for several link states, there are
some order rules:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover
Example
51
<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp.html" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
52

CSS Lists
CSS Lists
53

 Lists come in two basic flavors: unordered and


ordered.
 However, CSS allows for more list customization than
HTML -- to the extent that even images can be used as
bullet points for unordered lists!
 The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Different List Item Markers
Example
54

 ul.a {list-style-type:circle;}
 ul.b {list-style-type:square;}
 ol.c {list-style-type:upper-roman;}
 ol.d {list-style-type:lower-alpha;}
Values for Unordered Lists
55

Value Description
None No marker
Disc Default. The marker is a filled circle
Circle The marker is a circle
Square The marker is a square
Values for Ordered Lists
56

Value Description
Armenian The marker is traditional Armenian numbering
Decimal The marker is a number
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
The marker is traditional Georgian numbering (an, ban, gan,
Georgian
etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
CSS Lists with Images
57

 To specify an image as the list item marker, use the list-


style-image property:
 Example
ul
{
list-style-image: url('sqpurple.gif');
}

 Sample:
http://www.w3schools.com/css/tryit.asp?filename=try
css_list-style-image
CSS List Position
58

 With CSS, it is possible to alter the indentation that


takes place with your list items.
 Example
ul { list-style-position: inside; }
ol { list-style-position: outside; }
 Sample:
http://www.w3schools.com/css/tryit.asp?filename=t
rycss_list-style-position
List - Shorthand property
59

 When using the shorthand property, the order of the


values are:
 list-style-type
 list-style-position (for a description, see the CSS properties table
below)
 list-style-image
 Example
ul { list-style: decimal inside url(“notHere.gif");}
 Sample:
http://www.w3schools.com/css/tryit.asp?filename=trycss_l
ist-style
End
60

You might also like