Chapte - 3

Chapter three
Cascading Style Sheet (CSS)
1 03/15/2024 01:33 PM
CSS
 HTML has tags to define content of a document and
there are some tags which are designed for formatting
like <font>.
 But using those tags and formatting the content of web
is very expensive process.
 To minimize such difficult task, CSS has solution, you
can define CSS once and used it many times whenever
you like.
 CSS (Cascading Style Sheets) is a style sheet language
used for describing the presentation of a document
written in a markup language.
2 03/15/2024 01:33 PM
Cont…
 It defines how to display HTML elements. CSS is a style
language that defines layout of HTML documents and makes
your page attractive.
 CSS has lots of advantages on your web like, Saves time, loads
faster, easy to maintain, platform independence, multi device
compatibility and others.
 The Benefits of CSS
 Better type and layout controls.
 Less work. - change the appearance of an entire site by editing one
style sheet.
 Potentially smaller documents and faster downloads.
 More accessible sites. - making it more accessible for non-visual or
mobile devices
3 03/15/2024 01:33 PM
Cont…
 CSS Syntax
 A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in your
document.
 A style rule is made of two parts namely selector,
Declaration(property and value)
 Example: a CSS which applies to <body> part is written as :
4 03/15/2024 01:33 PM
Cont…
 body {
background-color: #71ec90;
font-family: arial;
color: #000000;
}
 P{
 color:#cc2400;
}
 On this code,
 Body and p are selectors.
 Background-color, font-family, and color are properties and
 #71ec90,arial,#000000 and #cc2400 are values.
 Selector and property must separate with { and you have to close this at the end.
 Property and value must separate with :
5 03/15/2024 01:33 PM
Cont…
 And you have to put ; at the end of each line (property :
value;).
 Property has a value that will be interpreted by the browser
to be applied on the html in which the selector is called.
 In the above code the selector is p, which is paragraph tag,
means that in the html code every text which is enclosed by
<p> will have a color.
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations
separated by semicolons. Each declaration includes a
property name and a value, separated by a colon.
6 03/15/2024 01:33 PM
Cont…
Don't forget a CSS declaration always ends with
a semicolon, and declaration groups are
surrounded by curly brackets.
Example:
P
{
color: red;
text-align: center;
}
In this case every text enclosed by <p> will have red font color
and it will align to center.
7 03/15/2024 01:33 PM
Cont…
 CSS Comments
 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 starts with /* and ends with */. Comments can
also address multiple lines:
 Example:
/*This is a multiple lines comment*/
p
{
color:red;
/*This is another comment*/
text-align:center;
}
8 03/15/2024 01:33 PM
Cont…
 Ways to attach the styles to the html document
 There are three ways of inserting a style sheet:
 Inline style
 Internal style sheet
 External style sheet
 Inline style:
 apply properties and values to a single element using the
style attribute in the element itself .
 Example:
 <h1 style="color: red">Introduction</h1>
9 03/15/2024 01:33 PM
Cont…
 Internal(Embedded) style sheet
 This type of CSS is defined within the page itself, so no need
of linking.
 An internal style sheet should be used when a single document has a
unique style.
 You define internal styles in the head section of an HTML page, by using
the <style> tag, like this:
 Syntax:
<head>
<style type=“text/css”>
hr{color: purple;}
p{margin-left:20px;}
</style>
</head>
10 03/15/2024 01:33 PM
Cont…
 Example: Internal css style
<html>
<head> <style type="text/css">
h1 {
color: green;
}
p{
font-size: small;
font-family: sans-serif;
color : red;
}
</style>
</head>
<body>
<h1> The title is green </h1>
<p> The content should be Red</p>
</body></html>
11 03/15/2024 01:33 PM
Cont…
 External style sheet
 In this case CSS code will be saved as a file with file
extension of .css.
 An external style sheet is ideal when the style is applied to
many pages. With an external style sheet, you can change
the look of an entire Web site by changing one file.
 Each page must link to the style sheet using the <link> tag .
12 03/15/2024 01:33 PM
Cont…
 The <link> tag goes inside the head section:
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 Example: file name: externalstyle.css <html>
<head>
h1 { <link rel=“stylesheet”
color: green; type=“text/css”
href=“externalstyle.css”>
}
p{ </head>
<body>
font-size: small; <h1> The title is green </h1>
font-family: sans-serif; <p> The content should be Red</p>
color : red; </body>
</html>
}
13 03/15/2024 01:33 PM
Cont…
 After writing this code on your editor, just save it with file
extension .css, then it becomes external css and you can
link it with any page using the <link> tag.
Do not add a space between the property value and the unit
(such as margin-left:20 px). The correct way is: margin-
left:20px tag.
14 03/15/2024 01:33 PM
Cont…
 Introduction to CSS Selectors

As already mentioned above, a selector encapsulates one
or several properties, which dictates behavior and look for
a certain element.
 The cool thing about selectors is that they allow you to
target an element in different ways, in different states, in
various hierarchies and even several elements at the same
time.
 Naming your selectors
 Basically, a selector name must begin with an underscore
(_), a hyphen (-), or a letter (a–z) and then be followed by
any number of hyphens, underscores, letters, or numbers.
15 03/15/2024 01:33 PM
Cont…
 The Element selector
 The most basic type of selector is probably the one that simply targets an
existing HTML element.
 For instance, you can target all paragraph elements (<p>) simply by
writing the name of it in your style sheet:
p{
color: Red;
}
 With this simple rule, we have just changed the text color of all paragraphs
to red - the element selector is very strong!
 For most of the time, your element selectors targets your everyday HTML
tag. For instance, you may decide that decide that bold-tags should no
longer cause text to be bold:
b{
font-weight: normal;
}
16 03/15/2024 01:33 PM
Cont…
 The Class selector
 We previously looked at elements selectors, which targets all
elements (which normally translates to HTML tags) on a page.
 If we want to be more specific, class selectors is the next step.
 Instead of targeting all elements with a specific name, they target
all elements that has a specific class name specified.
 While this normally makes the list of targets narrower, it does give
you the opportunity to target elements of various types (e.g. both
bold and italic tags) at the same time - with a class selector,
 A class selector looks just like an element selector, but instead of
using names that are tied to the names of HTML elements, you
make up the name and then you prefix it with a dot (.).
17 03/15/2024 01:33 PM
Cont…
 For instance:
 .red { }
 .myElements { }
 .navigation { }
 Only elements that uses one or several of these class names are targeted.
 Example:
 <style type="text/css">
.red {
color: Red;
}
.beautiful {
font-weight: bold;
color: Blue;
font-style: italic;
}
</style>
<p class="red"> Here's some text - <span class="beautiful">this part is especially
pretty!</span>
</p>
18 03/15/2024 01:33 PM
Cont…
 Element specific classes
 In our first example, all element types could use our classes but in some
situations, you may want to limit the use to a specific element type.
 This is usually done to indicate how the class is supposed to be used, to
allow for more than one class with the same name and avoid conflicts.
 Element specific classes are used simply by appending the class name to
the element name in your selector, like this:
 <style type="text/css">
span.beautiful {
font-weight: bold;
color: Blue;
font-style: italic;
}
</style>
<p> Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is

especially pretty!</span>
</p>
19 03/15/2024 01:33 PM
Cont…
 Multiple classes
 Classes are not unique and the class property of an
HTML tag allows you to specify more than one class.
 The cool thing about this is that it allows you to
combine the rules for several selectors and use them for
the same tag however you want to.
 This also means that instead of writing selectors with
many rules and then only targeting few elements, you
can write less specific selectors and simply combine
them when it is appropriate.
 This allows for greater re-usability, which is really what
CSS is all about.
20 03/15/2024 01:33 PM
Cont…
Example:
.status {
padding: 5px;
margin: 5px;
border-width: 1px;
border-style: solid;
}
.error {
color: Red;
border-color: Maroon;
}
.information {
color: Blue;
border-color: Navy;
}
</style>
<div class="status error">This is an error!
</div>
<div class="status information">This is information!
</div>
21 03/15/2024 01:33 PM
Cont…
 The ID selector
 The ID selector is actually so specific that it only targets a single
element on the page!
 Just as we saw with the class selector, the ID selector uses a specific
attribute found on all HTML tags to figure out whether the specific
rule applies to the element or not, and that's the ID attribute.
 The value of the ID attribute should be unique, according to the
HTML specification, meaning that it can only be used on a single
element per page.
 As a consequence of that, a CSS ID selector should also be used only
when you need to target one, specific and unique element on a page.
 ID's are unique
 Each element can have only one ID
 Each page can have only one element with that ID
22 03/15/2024 01:33 PM
Cont…
 An ID selector looks just like a class selector, but instead of
having a dot as the prefix, it uses the hash sign (#). Let's see
how it works:
#main-header {
color: GreenYellow;
}
</style>
<h1 id="main-header">Hello, CSS!</h1>

 As you can see, it works just like classes, but instead of using a
dot, we use a hash character, and instead of using the class
attribute, we use the id attribute - the difference lies in the fact
that the ID should be unique
23 03/15/2024 01:33 PM
Cont…
 Grouping selectors
 So far, all of our selectors have only targeted one class, one
ID or one element.
 However, CSS makes it ridiculously easy to target more
than one element at the same time, allowing you to
specify the same properties and rules for more than one
element at the same time - just separate the selector names
with a comma and you're good to go.
 This is another one of those features of CSS which allows
for greater code re-usability - there's no reason to specify
the same properties for several elements/classes, if you can
re-use them.
24 03/15/2024 01:33 PM
Cont…
 Here's a nifty example:
h1, h2, h3 {
color: Maroon;
}
</style>
<h1>Main header</h1>
<h2>Header level 2</h2>
 As you can see, we can now target h1, h2 and h3 elements with one, single rule,
instead of having to specify it for each of them. You can mix and match with class
and ID selectors too, if you want to
 h1#main, h2.sub, h3, .someClass, #anID
{
color: Maroon;
}
25 03/15/2024 01:33 PM
Cont…
 Now the really cool thing is that thanks to CSS and its cascading nature, you can still
add rules specific to one or several of elements and the browser will apply it according
to precedence. Check out this example:
h1, h2, h3 {
color: Maroon;
text-align: center;
}
h1 {
background-color: Silver;
padding: 10px;
text-align: left;
}
h2, h3 {
background-color: Gray;
padding: 5px;
}
</style>
<h1>Main header</h1>
26 03/15/2024 01:33 PM
Cont…
 The Descendant Selector
 It allows you to limit the targeted elements to the ones who are
descendants of another element. The syntax is very simple - you
simply write the parent(s), separate with a space, and then the
actual element you want to target.
 Here's an example:
pb{
color: Blue;
}
</style>
<p>Hello, <b>world</b> - what a <b>beautiful</b> day!

</p>
Hello, <b>world</b> - what a <b>beautiful</b> day!
27 03/15/2024 01:33 PM
Cont…
 In the above example, I want all bold elements to be blue, but
only if they are inside a paragraph tag.
 If you try the example, you will see that while the bold tag is
used four times, only the first two of them are blue - that's
because they are inside a paragraph, which our descendant
selector requires!
 Margin:
 It is an outer, invisible border around your element.
 You can specify the margin(s) for an element by using one or several
of the four margin-* properties,
 named margin-top, margin-right, margin-bottom and
margin-left.
28 03/15/2024 01:33 PM
Cont…
 Example:
.box {
background-image: url (“HTML/photo/wood.jpg”);
width: 100px;
height: 100px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
</style>
<div class="box">
Box
</div>
29 03/15/2024 01:33 PM
Cont…
 Borders
 By default, most HTML elements doesn't have a border, but CSS gives
you plenty of options to define one, with a range of border related
properties.
 In fact, the border can be adjusted using so many properties.
 Example:
.box {
width: 100px;
height: 100px;
border-color: CornflowerBlue;
border-width: 2px;
border-style: solid/dotted/dashed/double/groove/inset/ outset.;
}
</style>
<div class="box">
Hello, world!
</div>
30 03/15/2024 01:33 PM
Cont…
 Fixed position
 <html>
<head>
<style type="text/css">
.fixed {
position: fixed;
background-color: #eeefff;
padding: 10px 10px;
}
</style>
<div class="fixed" style="top:0;left:100px;">Top</div>
<div class="fixed" style="top:100px;right:0;">Right</div>
<div class="fixed" style="bottom:80px;left:100px;">Bottom</div>
<div class="fixed" style="top:100px;left:0;">Left</div>
<p style="margin-bottom:12000px;">Filler text</p>
</head>
</html>
31 03/15/2024 01:33 PM
Cont…
 Floating Element:
 A very powerful positioning technique is floating. It allows you to take a block
level element out of the normal order and let other elements float around it.
 For instance, this can be used to place an image to the left or right , while letting
text float around it.
 <html>
<head>
<style type="text/css">
.container {
width: 100px;
background-color: #eeefff;
padding: 10px 10px;
text-align: justify;
}
</style></head>
<div class=“container”><img src=“HTML/photo/wood.jpg”>Sample</div></html>
32 03/15/2024 01:33 PM
Cont…
 Text Color
The color property is used to set the color of the text.
 With CSS, a color is most often specified by:
 a HEX value - like "#ff0000“
 an RGB value - like "rgb(255,0,0)“
 a color name - like "red"
 The default color for a page is defined in the body selector.
 Example
body {
 color:blue;
}
h1 {
 color:#00ff00;
}
h2 {
 color:rgb(255,0,0);
}
33 03/15/2024 01:33 PM
Cont…
 Text Alignment
 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;
}
34 03/15/2024 01:33 PM
Cont…
 Text Transformation
 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;
}
35 03/15/2024 01:33 PM
Cont…
 Text Indentation
 The text-indent property is used to specify the indentation of the first line of
a text.
 Example
p{
text-indent:50px;
}
 Font Family
 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.
 Note: If the name of a font family is more than one word, it must be in quotation
marks, like: "Times New Roman".
 More than one font family is specified in a comma-separated list:
36 03/15/2024 01:33 PM
Cont…
 Example
 p{font-family:"Times New Roman", Times, serif;}
 Font Style
 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;}
p.oblique {font-style: oblique;}
 Font Size
 The font-size property sets the size of the text.
 Example
h1 { font-size:40px;}
37 03/15/2024 01:33 PM
Cont…
 Styling Links
 Links can be styled with any CSS property (e.g. color,
font-family, background, etc.).
 In addition, links 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 mouse's over it
 a:active - a link the moment it is clicked
38 03/15/2024 01:33 PM
Cont…
 Example
a:link { /* unvisited link */
color:#FF0000;
}
a:visited { /* visited link */
color:#00FF00;
}
a:hover { /* mouse over link */
color:#FF00FF;
}
a:active { /* selected link */
color:#0000FF;
}
39 03/15/2024 01:33 PM

Chapte - 3

Uploaded by

Copyright:

Available Formats

Chapte - 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapte - 3

Uploaded by

Copyright:

Available Formats

Chapter three

Cascading Style Sheet (CSS)

<p> Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is

<h1 id="main-header">Hello, CSS!</h1>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!

Hello, <b>world</b> - what a <b>beautiful</b> day!

You might also like