Scribd
Upload
4 views

Lec 3-CSS_1.5m

The document provides an overview of Cascading Style Sheets (CSS), detailing its basic and advanced features, including the distinction between content and presentation, and the application of inline, document, and external style sheets. It covers various CSS properties such as border-radius, selectors, colors, transitions, backgrounds, and transformations. The document emphasizes the importance of modularity in CSS for consistent styling across web pages.

Uploaded by

Mạnh Kiên Dương
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Lec 3-CSS_1.5m

The document provides an overview of Cascading Style Sheets (CSS), detailing its basic and advanced features, including the distinction between content and presentation, and the application of inline, document, and external style sheets. It covers various CSS properties such as border-radius, selectors, colors, transitions, backgrounds, and transformations. The document emphasizes the importance of modularity in CSS for consistent styling across web pages.

Uploaded by

Mạnh Kiên Dương
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Cascading Style Sheets (CSS)

Content

Basic CSS
Advanced CSS

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

2
Basic CSS

3
Content vs. Presentation

• Most HTML tags define content


type, independence of presentation.
• exceptions?

• e.g. <b> …… </b> for bold text


and <i> ….. </i> for italicized text
• Style sheets associate presentation
formats with HTML elements.
• CSS1: published in 1996

• CSS2: published in 1998


• CSS3: published in 1999

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

4
Content vs. Presentation (cont.)

• Style sheets can be used to specify how tables should be


rendered, how lists should be presented, etc.

• HTML style sheets are known as Cascading Style Sheets,


since can be defined at three different levels
1. inline style sheets apply to the content of a single
HTML element
2. document style sheets apply to the whole BODY of a
document
3. external style sheets can be linked and applied to
numerous documents

• lower-level style sheets can override higher-level style


sheets
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

5
Inline Style Sheets

• Using the style attribute, you can specify presentation style for a single
HTML element
• within tag, list sequence of property:value pairs separated by semi-colons
<html>
<!–- CS443 page17.html 17.10.14 -->
font-family:Courier,monospace
font-style:italic <head>
<title>Inline Style Sheets</title>
font-weight:bold </head>
font-size:12pt font-size:large font-size:larger
<body>
<p style="font-family:Arial,sans-serif;
color:red color:#000080 text-align:right">This is a
right-justified paragraph in a sans serif
background-color:white font (preferably Arial), with some
<span style="color:green">green text</span>.
</p>
text-decoration:underline
<p>And <a style="color:red;
text-decoration:none text-decoration:none;
text-align:left text-align:center font-size:larger;"
href="page01.html">here</a>
text-align:right text-align:justify is a formatted link.
</p>
vertical-align:top vertical-align:middle </body>
vertical-align:bottom </html>

text-indent:5em text-indent:0.2in view page

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

6
Inline Style Sheets (cont.)
margin-left:0.1in margin-right:5%
margin:3em
padding-top:0.1in padding-bottom:5% <html>
<!–- CS443 page18.html 17.09.09 -->
padding:3em
<head>
<title>Inline Style Sheets</title>
border-width:thin border-width:thick </head>

border-width:5 <body>
border-color:red <p>Here is an image
<img src="VictoriaBldg.jpeg"
border-style:dashed border-style:dotted alt="image of Victoria Building"
style="margin-left:0.3in;
border-style:double border-style:none margin-right:0.3in;
vertical-align:middle;
border-style:double;
whitespace:pre border-color:blue" />
embedded in text.
</p>
list-style-type:square <ol style="list-style-type:upper-alpha">
list-style-type:decimal <li> one thing</li>
<li> or another</li>
list-style-type:lower-alpha <ul style="list-style-type:square;
list-style-type:upper-roman whitespace:pre">
<li> with this</li>
<li> or that</li>
</ul>
</ol>
</body>
</html>

view page

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

7
Inline Style Sheets (cont.)

<html>
<!–- CS443 page19.html 17.10.14 -->

• style sheets can be applied to


<head>
<title> Inline Style Sheets </title>
</head>

tables for interesting effects <body>


<table style="font-family:Arial,sans-serif">
<caption style="color:red;
font-style:italic;
text-decoration:underline">
Student data. </caption>
<tr style="background-color:red">
<th> name </th> <th> age </th>
</tr>
<tr>
<td> Chris Smith </td> <td> 19 </td>
</tr>
<tr>
<td> Pat Jones </td> <td> 20 </td>
</tr>
<tr>
<td> Doogie Howser </td> <td> 9 </td>
</tr>
</table>
</body>
</html>

view page

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

8
Document Style Sheets

• Inline style sheets apply to individual elements in the


page.
• using inline style directives can lead to
inconsistencies, as similar elements are formatted
differently
• inline definitions mix content & presentation
• As a general rule, inline style sheet directives should be
used as sparingly as posible
• Alternatively, document style sheets allow for a cleaner
separation of content and presentation.
• style definitions are placed in the <head> of the page
(within STYLE tags)
• can apply to all elements, or a subclass of elements,
throughout the page.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

9
Document Style Sheets

• Document style sheets ensure


that similar elements are
formatted similarly <html>
<!–- CS443 page20.html 17.10.14 -->

• can even define subclasses of <head>


<title>Document Style Sheets</title>

elements and specify formatting <style type="text/css">


h1 {color:blue;
text-align:center}

p.indented defines subclass of p.indented {text-indent:0.2in}


</style>

paragraphs
</head>

<body>

• inherits all defaults of <p>


<h1> Centered Title </h1>

<p class="indented">This paragraph will have

• adds new features


the first line indented, but subsequent lines
will be flush. </p>

<p>This paragraph will not be indented.


</p>

to specify this newly defined <h1> The End </h1>

class, place class="ID" attribute </body>


</html>

in tag view page

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

10
Document Style Sheets (cont.)

<html>
<!–- CS443 page21.html 17.10.14 -->

• Document style sheets are <head>


<title> Inline Style Sheets </title>
especially useful in formatting <style type="text/css">

tables
table {font-family:Arial,sans-serif}
caption {color:red;
font-style:italic;
text-decoration:underline}
th {background-color:red}

• Effectively separates content


</style>
</head>
from presentation <body>
<table>
<caption> Student data. </caption>
<tr><th> name </th> <th> age</th></tr>
<tr><td> Chris Smith </td> <td> 19 </td></tr>
<tr><td> Pat Jones </td> <td> 20 </td></tr>
<tr><td> Doogie Howser </td> <td> 9 </td></tr>
</table>
</body>
</html>

view page

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

11
External Style Sheets

• modularity is key to the development and reuse of


software
• package and make available for reuse
• central libraries make it possible to make a single
change and propagate the changes
• external style sheets place the style definitions in
separate files
• multiple pages can link to the same style sheet,
consistent look across a site
• possible to make a single change and propagate
automatically
• represents the ultimate in content/representation
separation

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

12
Modularity & Style Sheets

•Ideally, the developer(s) of a Web


/* myStyle.css CS443 02.09.05 */
h1 {color : blue; text-align : center}

site would place all formatting


p.indented {text-indent:0.2in}

<html>
options in an external style sheet. <!–- CS443 page26.html 17.10.14 -->

<head>

•All Web pages link to that same <title>Title for Page</title>


<link rel="stylesheet"
type="text/css"

style sheet for a uniform look. </head>


href="myStyle.css"
title="myStyle“ />

• simplifies Web pages since only <body>


<h1>Centered Title</h1>
need to specify <p class="indented">This paragraph will have

structure/content tags
the first line indented, but subsequent lines
will be flush.</p>

<p>This paragraph will not be indented.


• Note: no <style> tags are used </p>

in the external style sheet


<h1>The End</h1>

</body>
</html>

view page

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

13
Advaned CSS

14
Rounded Corners

• With the CSS border-radius property, you can give any


element “rounded corners”.
ØRounded corners for an element with a border:

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

15
Rounded Corners

• With the CSS border-radius property, you can give any


element “rounded corners”.
ØRounded corners for an element with a specified
background color:

#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

16
Universal, Child, and Adjacent Selectors

• Universal selectors: set global styles for a page, or as a


descendant of a selector to set styles of everything
within something.

* {
margin: 0;
padding: 0;
Example: set the margin and padding
} on everything in a page to zero and
#contact * {
display: block; everything within an element with the
} ID “contact” to be displayed as a block

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

17
Universal, Child, and Adjacent Selectors

• Child selectors: A greater-than symbol (“>”) can be used


to specify something that is a child of something else,
that is, something immediately nested within
something.

#genus_examples > li { border: 1px solid red }

Example: set the border for all <li> child of element has
id=“genus_examples”

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

18
Universal, Child, and Adjacent Selectors

• Adjacent selectors: A plus sign (“+”) is used to target an


adjacent sibling of an element, essentially, something
immediately following something.

<h1>Clouded leopards</h1>
<p>Clouded leopards are cats that belong
to the genus Neofelis.</p>
<p>There are two extant species: Neofelis
nebulosa and Neofelis diardi.</p>

h1 + p { font-weight: bold }

Only the first paragraph, that following the heading, will be made bold.

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

19
Advanced Colors

• We already know that colors can be defined by name, RGB, or


hex values
• CSS 3 also allows you to paint away with HSL — hue, saturation,
and lightness
• An HSL color value is specified with: hsl(hue, saturation,
lightness).
• Hue is a degree on the color wheel (from 0 to 360):
• 0 (or 360) is red
• 120 is green
• 240 is blue
• Saturation is a percentage value: 100% is the full color.
• Lightness is also a percentage; 0% is dark (black) and 100% is white.

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

20
CSS Transitions

• Transitions allow you to easily animate parts of your design


without the need for the likes of JavaScript
• transition-property: which property (or properties) will
transition.
• transition-duration: how long the transition takes.
• transition-timing-function: if the transition takes place at a
constant speed or if it accelerates and decelerates.
• transition-delay: how long to wait until the transition takes
place.

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

21
Backgrounds: Multiples, Size, and Origin

• Multiples background: CSS3 allows you to apply


multiple background images to a single box by simply
putting image locations in a comma-separated list

background-image: url(this.jpg), url(that.gif),


url(theother.png);

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

22
Transformations

• CSS transforms allow you to move, rotate, scale, and skew


elements.
• The translate() method moves an element from its current position
(according to the parameters given for the X-axis and the Y-axis).
• The rotate() method rotates an element clockwise or counter-
clockwise according to a given degree.
• The scale() method increases or decreases the size of an element
(according to the parameters given for the width and height).
• The skew() method skews an element along the X and Y-axis by the
given angles.
• The matrix() method combines all the 2D transform methods into one.

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

23
Position

• specifies the type of positioning


method used for an element
• static: is not affected by the top,
bottom, left, and right
properties.
• relative: is positioned relative to
its normal position.
• fixed: always stays in the same
place even if the page is
scrolled
• absolute: is positioned relative
to the nearest positioned
ancestor (or document body if
no ancestor exists)
• sticky: is positioned based on
the user's scroll position.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

24
Exercises

• https://www.w3schools.com/css/default.asp
• https://www.w3schools.com/css/css_exercises
.asp
• https://www.freecodecamp.org/learn/2022/re
sponsive-web-design/
• Build your personal page

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

25
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

26

You might also like