Introduction to CSS

(1)

Introduction to CSS

Jes´us Arias Fisteus

Web Applications (2022/23)

Web Applications (2022/23) Introduction to CSS 1

(2)

Part I

Introduction to CSS

(3)

Hello World!

1

body {

2

color : rgb(200, 200, 200);

3

background =color: rgb(0, 0, 128);

4

font =family: arial , verdana, sans=serif ;

5

}

(4)

Hello World!

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset=”UTF=8”>

5 <title>My first HTML page with CSS</title>

6 <link rel=”stylesheet” href=”helloworld. css” type=”text/css”>

7 </head>

8 <body>

9 Hello World, with CSS!

10 </body>

11 </html>

(5)

Where to define CSS properties

CSS properties for an HTML document can defined:

I

At its head element:

I As the content of astyleelement.

I As an external resource, referenced from alinkelement.

I

At its body:

I With thestyle attribute of the element the properties apply to.

(6)

Example: CSS at the document header and body

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="UTF-8">

5 <title>CSS definitions within the document</title>

6 <style type="text/css">

7 body {

8 color: rgb(200, 200, 200);

9 background-color: rgb(0, 0, 128);

10 font-family: arial, verdana, sans-serif;

11 }

12 </style>

13 </head>

14 <body>

15

16 A paragraph.

17

18

(7)

Where to define CSS properties

Defining CSS rules as an external resource has some advantages:

I

A single CSS document can be applied to many HTML pages (coherent style across the website with a single point of change).

I

Better use of HTTP caching (CSS resources change less frequently and usually apply to many pages).

I

A CSS stylesheet can import other CSS stylesheets (modularity).

(8)

Part II

CSS selectors

(9)

Selectors

Selectors are used to define to which elements of an HTML page properties apply.

(10)

Element identifiers and classes

In order to selectively apply CSS properties to some HTML elements, the following HTML attributes are frequently used:

I

The id attribute:

I Its value identifies one element in the HTML document. Each identifier must be unique within the document.

I

The class attribute:

I Its value is formed as one or more class names (the classes the element belongs to) separated by a white space.

I Many elements in the same page can belong to the same class.

(11)

Example

1

2 Your order has been confirmed!

3

4

5 Total amount to be billed : 300 euros.

6

7

8 Remember to check the balance of your bank account

9 before the amount is charged.

10

(12)

The div and span elements

Sometimes content (HTML elements and/or text) needs to be grouped in order to apply some CSS properties to the group as a whole:

I

The div element: the group acts as a block element.

I

The span element: the group acts as an inline element.

(13)

Example

1

<div id=”summary”>

2

...

3

...

4

<ol>...</ol>

5

</div>

6

7

8

This is an

9

important remark.

10

(14)

Selectors

Example Meaning

* All the elements.

p All thepelements.

p, div All thepanddivelements.

.myclass All the elements belonging to class myclass.

p.myclass All thepelements belonging to class myclass.

#myid The element whoseid attribute is myid.

p > a All the elementsa that are children of anypelement.

p a All the elementsa that are descendants of anyp element.

h1 + p All thepelements that are the next sibling of anyh1element.

h1 ∼ p All the elementsp that are siblings of anyh1element.

(15)

Example

1

p {

2

color : black ;

3

border =style: none;

4

}

5

.warning {

6

border : 1px solid ;

7

border =color: red;

8

}

9

.important {

10

border =width: 3px;

11

background: silver ;

12

}

13

#total {

14

font =weight: bold;

15

}

(16)

Example

1

#summary {

2

border : 1px solid ;

3

padding: 5px;

4

text=align: justify ;

5

width: 400px;

6

margin =left: auto;

7

margin=right: auto;

8

}

9

10

#summary > h2 {

11

text =align: center ;

(17)

Selectors

Example Meaning

input[name] All the input elements with a name attribute, regardless its value.

input[name="color"] All the input elements with a name attribute whose value is color.

p[class∼="hello"] All the elements with a class attribute whose value is a space-separated word list, with one of those words being hello.

input[name^="test"] All the input elements with a name attribute whose value begins with test.

input[name$="test"] All the input elements with a name attribute whose value ends with test.

input[name*="test"] All the input elements with a name attribute whose value contains the text test (at the beginning, in the middle or at the end).

(18)

Pseudoclases

Example Meaning

a:link a hyperlinks not previously visited by the user.

a:visited a hyperlinks previously visited by the user.

p:hover Elementpon top of which the cursor is placed.

p:active Elementpwhich has been clicked.

p:first-child Elementpthat is the first child of its parent.

p:first-letter First letter of every pelement.

p:first-line First line of everyp element.

p:lang(es) Elementpwhoselangattribute has value es.

p:empty Element p without content (neither text nor elements).

p:only-child Elementpwhich is the only child of its parent.

(19)

Example

1

p.warning:hover {

2

background: red ;

3

}

(20)

Part III

Properties

(21)

Lengths in CSS

I

The values of many properties are expressed as lengths.

I

They can be specified as:

I Relative units: pixel (p.e. 10px),em(height of the higher letters of the current font, which is also usually the width of the “m” letter, e.g. 2em),ex(height of the lower letters of the current font, such as the “x” letter, e.g. 3ex).

I Absolute units: points(1/72 of an inch, e.g. 5pt),picas(12 points, e.g. 3pc),inches(e.g. 5in), centimeters(e.g. 2cm), millimeters(e.g. 6mm).

I Apercentagewith respect to another length (e.g. 50%).

(22)

Colors in CSS

There are several ways of specifying color values:

I

Color keywords (as defined in the CSS standards): aqua , black , blue , purple , transparent , etc.

I

RGB coordinates (red, green and blue channels) or RGBA (with an extra alpha channel for the transparency level).

I

HSL coordinates (hue, saturation and lightness channels) or

HSLA (again, with an extra alpha channel).

(23)

Colors in CSS: examples

1

body { color : black ; background: white }

2

h1 { color : maroon }

3

h2 { color : olive }

4

5

em { color : #f00 } / * #rgb */

6

em { color : #ff0000 } / * #rrggbb */

7

em { color : rgb (255,0,0) }

8

em { color : rgb(100%, 0%, 0%) }

9

10

em { color : rgba (255,0,0,0.5)

(24)

Fonts

Property Example values

font-family arial, times, serif, sans-serif, monospace, cursive, fantasy

font-size small, 12pt, larger, 200%

font-weight normal, bold, bolder, 300, 900 font-style normal, italic, oblique font-variant normal, small-caps

(25)

Text formatting

color #ff0080, rgb(256,0,128), white, navy text-align left, right, center, justify

vertical-align baseline, sub, super, top, middle, bottom, text-top, text-bottom, 10px, 20%

text-decoration underline, overline, line-through, none text-indent 36pt

text-shadow rgb(0,0,0) 10px 10px 3px

text-transform none, capitalize, uppercase, lowercase

(26)

Example

1

p {

2

font=family: times serif ;

3

font =style: italic ;

4

color : navy;

5

text=indent: 5em;

6

}

(27)

CSS box model

margin-top

margin-bottom padding-top

padding-bottom

margin-left padding-left padding-right margin-right

border-top

border-right

border-left

border-bottom

(28)

Border properties

border-color #ff0080, rgb(256,0,128), white, navy

border-style none, solid, dotted, dashed, double, groove, ridge, inset, outset

border-width thin, medium, thick, 1px border 4px solid red

Each property above can also be applied to a specific border. For example: border-top-color , border-left-style ,

border-bottom-width , border-right , etc.

(29)

Padding properties

They control the distance between contents and border:

I

Their value is just a length.

I

Five properties: padding , padding-left , padding-right , padding-top , padding-bottom .

(30)

Margin properties

They control the distance between border and other elements of the page:

I

Their value is just a length or the auto special values.

I

Five properties: margin, margin-left, margin-right, margin-top , margin-bottom .

I

Vertical margins: the vertical distance between two block elements its the maximum between the bottom margin of the first element and the top margin of the second element.

I

Horizontal margins are always, on the contrary, added (right

margin of the first element plus left margin of the second

(31)

Example

1

#summary {

2

float : right ;

3

border : 1px dashed black ;

4

padding =left: 5px;

5

padding =right: 5px;

6

width: 600px;

7

margin: 0px 50px;

8

background: silver ;

9

text =align: justify ;

10

}

11

#summary > h2 {

12

text =align: center ;

13

}

(32)

Content size properties

Property Example values height auto, 200px width auto, 100px line-height auto, 3em max-width 500px min-width 300px max-height 500px min-height 300px

overflow hidden, visible, scroll, auto, inherit

(33)

Example

1

p {

2

max=width: 500px;

3

max =height: 100px;

4

border : 1px solid ;

5

overflow : auto;

6

}

(34)

Background properties

background-color white

background-image url("background.jpg")

background-repeat repeat, repeat-x, repeat-y, no-repeat

background-position left, center, right, top, bottom, 20%

50%, 200 300 background-attachment fixed, scroll

background white url("background.jpg") fixed no-repeat center

(35)

Example

1

p {

2

background =image: url(”background.jpg”);

3

background =repeat: repeat;

4

}

(36)

Visibility properties

Property Example values display none, block, inline visibility visible, hidden

(37)

Other CSS features

I

Content layout: floating elements, flexible boxes (flexbox), grids, etc.

I

Table formatting properties

I

List formatting properties.

I

Rounded corners.

I

2D transforms (move, rotate, scale and skew content).

I

Transitions and animations.

I

Conditional selectors according to the client device (screen size, etc.).

I

Web fonts.

(38)

Laying out content

Placing every content block at its proper place isn’t trivial, and neither is adapting content to smaller screens such as

those in mobile phones.

There are frameworks such as Bootstrap that greatly simplify

that without needing to be a CSS expert.

(39)

References

I

Rob Larsen, Beginning HTML and CSS. Wrox (2013).

I Access at O’Reilly through UC3M Library I Chapters 7 and 8.

I

MDN Web Docs, “CSS: Cascading Style Sheets”

I

CSS 2.1 specification at W3C (now outdated, but easier to follow for the basics):

I http://www.w3.org/TR/CSS2/

I

CSS website at W3C:

I http://www.w3.org/Style/CSS/

Introduction to CSS

Introduction to CSS

Web Applications (2022/23)

Part I

Introduction to CSS

Hello World!

body {

color : rgb(200, 200, 200);

background =color: rgb(0, 0, 128);

font =family: arial , verdana, sans=serif ;

}

Hello World!

Where to define CSS properties

CSS properties for an HTML document can defined:

At its head element:

At its body:

Example: CSS at the document header and body

Where to define CSS properties

Defining CSS rules as an external resource has some advantages:

A single CSS document can be applied to many HTML pages (coherent style across the website with a single point of change).

Better use of HTTP caching (CSS resources change less frequently and usually apply to many pages).

A CSS stylesheet can import other CSS stylesheets (modularity).

Part II

CSS selectors

Selectors

Selectors are used to define to which elements of an HTML page properties apply.

Element identifiers and classes

In order to selectively apply CSS properties to some HTML elements, the following HTML attributes are frequently used:

The id attribute:

The class attribute:

Example

The div and span elements

Sometimes content (HTML elements and/or text) needs to be grouped in order to apply some CSS properties to the group as a whole:

The div element: the group acts as a block element.

The span element: the group acts as an inline element.

Example

<div id=”summary”>

<p>...</p>

<p>...</p>

<ol>...</ol>

</div>

<p>

This is <span class=”important”>an

<em>important</em> remark</span>.

</p>

Selectors

Example

p {

color : black ;

border =style: none;

}

.warning {

border : 1px solid ;

border =color: red;

}

.important {

border =width: 3px;

background: silver ;

}

#total {

font =weight: bold;

}

Example

#summary {

border : 1px solid ;

padding: 5px;

text=align: justify ;

width: 400px;

margin =left: auto;

margin=right: auto;

}

#summary > h2 {

text =align: center ;

Selectors

Pseudoclases

Example

p.warning:hover {

background: red ;

}

Part III