Scribd
Upload
20 views68 pages

ITaS Lect02

Uploaded by

knqqqdbihedwwurkwp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views68 pages

ITaS Lect02

Uploaded by

knqqqdbihedwwurkwp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 68

Internet Technologies

and Services

CSS basics
PhD, DSc Eng. Remigiusz Rajewski

April 11, 2024


Outline
●
What is CSS?
●
Ruleset
●
Fonts and text
●
Boxes
●
Applying CSS to HTML
●
Functions

2
CSS – introduction
●
Cascading Style Sheets (CSS) is a stylesheet language used
to describe the presentation of a document written in HTML or
XML (including XML dialects such as SVG, MathML or XHTML).
●
CSS describes how elements should be rendered on screen, on
paper, in speech, or on other media.
●
CSS is among the core languages of the open web and is
standardized across Web browsers according to W3C
specifications.
●
Previously, the development of various parts of CSS
specification was done synchronously, which allowed the
versioning of the latest recommendations. 3
CSS – introduction
●
Previously, the development of various parts of CSS
specification was done synchronously, which allowed the
versioning of the latest recommendations.
●
You might have heard about CSS1, CSS2.1, or even CSS3.
There will never be a CSS3 or a CSS4; rather, everything is
now CSS without a version number.

4
CSS – introduction
●
After CSS 2.1, the scope of the specification increased
significantly and the progress on different CSS modules started
to differ so much, that it became more effective to develop and
release recommendations separately per module.
●
Instead of versioning the CSS specification, W3C now
periodically takes a snapshot of the latest stable state of the
CSS specification and individual modules progress.
●
CSS modules now have version numbers, or levels, such as
CSS Color Module Level 5.

5
What is CSS?
●
Like HTML, CSS is not a programming language.
●
CSS is not a markup language either.
●
CSS is a style sheet language.
●
CSS is what you use to selectively style HTML elements. For
example, this CSS selects paragraph text, setting the color to
red:
p{
color: red;
}

6
What is CSS?
p{
color: red;
}
●
Let's try it out! Using a text editor, let’s paste the above lines of
CSS into a new file. Save the file as style.css in a directory
named styles.
●
To make the code work, we still need to apply this CSS example
to the HTML document. Otherwise, the styling won't change the
appearance of the HTML.

7
What is CSS?
●
Open your index.html file. Paste the following line in the head
(between the <head> and </head> tags):

<link href="styles/style.css" rel="stylesheet" />

●
Save index.html and load it in your browser.

8
What is CSS?
●
Example 1 – creating a new CSS file

9
Anatomy of a CSS ruleset
●
The whole structure is called a ruleset.
●
The term ruleset is often referred to as just rule.
●
Note the names of the individual parts in a ruleset:
●
selector
●
declaration
●
properties
●
property value

10
Anatomy of a CSS ruleset
selector
property
property value
p{
color: red;
}
declaration

11
Anatomy of a CSS ruleset
●
Selector
●
This is the HTML element name at the start of the ruleset.
●
It defines the element(s) to be styled (in previous example, <p>
elements).
●
To style a different element, change the selector.
●
Declaration
● This is a single rule like color: red;.
●
It specifies which of the element's properties you want to style.

12
Anatomy of a CSS ruleset
●
Properties
●
These are ways in which you can style an HTML element. (In this
example, color is a property of the <p> elements.)
●
In CSS, you choose which properties you want to affect in the rule.
●
Property value
●
To the right of the property (after the colon) there is the property
value.
●
This chooses one out of many possible appearances for a given
property. (For example, there are many color values in addition to
red.)

13
Anatomy of a CSS ruleset
●
Note the other important parts of the syntax:
●
Apart from the selector, each ruleset must be wrapped in curly
braces. ( { } )
●
Within each declaration, you must use a colon ( : ) to separate the
property from its value or values.
●
Within each ruleset, you must use a semicolon ( ; ) to separate each
declaration from the next one.
●
To modify multiple property values in one ruleset, write them
separated by semicolons.

14
What is CSS?
●
Example 2

p{
color: red;
width: 500px;
border: 1px solid black;
}

15
Selecting multiple elements
●
You can also select multiple elements and apply a single ruleset
to all of them. Separate multiple selectors by commas. For
example:

p,
li,
h1 {
color: red;
}

16
Different types of selectors
●
There are many different types of selectors.
●
The previous examples use element selectors, which select all
elements of a given type. But we can make more specific
selections as well.
●
On next slide there are some of the most common types of
selectors.

17
Different types of selectors
Selector name What does it select Example
Element selector All HTML elements of the p
(sometimes called specified type. selects <p>
a tag or type
selector)
ID selector The element on the page with #my-id
the specified ID. On a given selects <p id="my-id">
HTML page, each id value
or <a id="my-id">
should be unique.
Class selector The element(s) on the page .my-class
with the specified class. selects <p class="my-class">
Multiple instances of the same
and <a class="my-class">
class can appear on a page.

18
Different types of selectors
Selector name What does it select Example
Attribute selector The element(s) on the img[src]
page with the specified selects <img src="myimage.png">
attribute.
but not <img>
Pseudo-class The specified element(s), a:hover
selector but only when in the selects <a>, but only when the
specified state. (For mouse pointer is hovering over the
example, when a cursor link.
hovers over a link.)

19
Fonts and text
●
Example 3 – now that we've explored some CSS
fundamentals, let's improve the appearance of the example by
adding more rules and information to the style.css file.
●
Step 1: First, add the <link> element somewhere inside your
index.html's head (anywhere between the <head> and </head>
tags). It looks something like this:
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet" />
This code links a page to a style sheet that loads the Open
Sans font family with your webpage. 20
Fonts and text
●
Step2: Next, delete the existing rule you have in your style.css
file. It was a good test, but let's not continue with lots of red text.
●
Step 3: Add the following lines (shown on next slide), replacing
the font-family assignment with your font-family selection.
The property font-family refers to the font(s) you want to use
for text. This rule defines a global base font and font size for the
whole page. Since <html> is the parent element of the whole
page, all elements inside it inherit the same font-size and
font-family.

21
Fonts and text
html {
font-size: 10px; /* px means "pixels": the base font size is now
10 pixels high */
font-family: "Open Sans", sans-serif; /* this should be the rest
of the output you got from Google Fonts */
}
Note: Anything in CSS between /* and */ is a CSS comment.
The browser ignores comments as it renders the code. CSS
comments are a way for you to write helpful notes about your
code or logic.
22
Fonts and text
●
Step 4: Now let's set font sizes for elements that will have text
inside the HTML body (<h1>, <li>, and <p>).
We'll also center the heading.
Finally, let's expand the second ruleset (given below) with
settings for line height and letter spacing to make body content
more readable.

23
Fonts and text
h1 {
font-size: 60px;
text-align: center;
}

p,
li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
24
}
Boxes
●
Something you'll notice about writing CSS: a lot of it is about
boxes. This includes setting size, color, and position.
●
Most HTML elements on your page can be thought of as boxes
sitting on top of other boxes.
●
CSS layout is mostly based on the box model. Each box taking
up space on your page has properties like:
●
padding – the space around the content. In the next example, it is the
space around the paragraph text.
●
border – the solid line that is just outside the padding.
●
margin – the space around the outside of the border.
25
Boxes

26
Boxes
●
We can also use:
●
width (of an element)
●
background-color – the color behind an element's content and
padding
●
color – the color of an element's content (usually text)
●
text-shadow – sets a drop shadow on the text inside an element
●
display – sets the display mode of an element.
●
Let's add more CSS new rules at the bottom of style.css.
●
The best practice is to experiment with changing values to see
what happens :) 27
Changing the page color
●
Example 4
html {
background-color: #00539f;
}
●
This rule sets a background color for the entire page.

28
Styling the body
●
Example 5
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}

29
Styling the body
width: 600px;
●
This forces the body to always be 600 pixels wide.
margin: 0 auto;
●
When we set two values on a property like margin or padding,
the first value affects the element's top and bottom side (setting
it to 0 in this case); the second value affects the left and right
side.
●
Here, auto is a special value that divides the available
horizontal space evenly between left and right.
●
We can also use one, two, three, or four values.
30
Styling the body
background-color: #FF9500;
●
This sets the element's background color. This project uses
a reddish orange for the body background color, as opposed to
dark blue for the <html> element. Feel free to experiment!!! ;)
padding: 0 20px 20px 20px;
●
This sets four values for padding. The goal is to put some space
around the content. In this example, there is no padding on the
top of the body, and 20 pixels on the right, bottom and left.
●
The values set top, right, bottom, left, in that order.
●
As with margin, we can use one, two, three, or four values.
31
Styling the body
border: 5px solid black;
●
This sets values for the width, style and color of the border.
●
In this case, it's a five-pixel–wide, solid black border, on all
sides of the body.

32
Styling the body
●
Example 5
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}

33
Positioning and styling
the main page title
●
We may have noticed there's a horrible gap at the top of the
body.
●
That happens because browsers apply default styling to the h1
element (among others). That might seem like a bad idea, but
the intent is to provide basic readability for unstyled pages.
●
To eliminate the gap, we overwrite the browser's default styling
with the setting margin: 0;.
●
Next, we set the heading's top and bottom padding to 20 pixels.
●
Following that, we set the heading text to be the same color as
the HTML background color.
34
Positioning and styling
the main page title
●
Finally, text-shadow applies a shadow to the text content of the
element. Its four values are:
●
The first pixel value sets the horizontal offset of the shadow from the
text: how far it moves across.
●
The second pixel value sets the vertical offset of the shadow from the
text: how far it moves down.
●
The third pixel value sets the blur radius of the shadow. A larger value
produces a more fuzzy-looking shadow.
●
The fourth value sets the base color of the shadow.

35
Positioning and styling
the main page title
●
Example 6
h1 {
margin: 0;
padding: 20px 0;
color: #00539f;
text-shadow: 3px 3px 1px black;
}

36
Centering the image
●
Next, we center the image to make it look better. We could use
the margin: 0 auto trick again as we did for the body. But
there are differences that require an additional setting to make
the CSS work.
●
The <body> is a block element, meaning it takes up space on
the page. The margin applied to a block element will be
respected by other elements on the page.
●
In contrast, images are inline elements, for the auto margin
trick to work on this image, we must give it block-level behavior
using display: block;.
37
Centering the image
●
Example 7
img {
display: block;
margin: 0 auto;
}

38
Applying CSS to HTML
●
There are three methods of applying CSS to a document:
●
with an external stylesheet,
●
with an internal stylesheet,
●
and with inline styles.

39
Applying CSS to HTML
(external stylesheet)
●
An external stylesheet contains CSS in a separate file with
a .css extension.
●
This is the most common and useful method of bringing CSS to
a document.
●
We can link a single CSS file to multiple web pages, styling
all of them with the same CSS stylesheet.

40
Applying CSS to HTML
(external stylesheet)
●
We reference an external CSS
stylesheet from an HTML <link>
element
<!doctype html> <body>
<html lang="en-US"> <h1>Hello World!</h1>
<head> <p>This is my first CSS
example</p>
<meta charset="utf-8" />
</body>
<title>My CSS experiment</title>
</html>
<link rel="stylesheet"
href="styles.css" />
</head> 41
Applying CSS to HTML
(external stylesheet)
●
The CSS stylesheet file might look like this:
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p{
color: red;
}
42
Applying CSS to HTML
(external stylesheet)
●
The href attribute of the <link> element needs to reference a file
on your file system.
●
In the last example (previous slide), the CSS file is in the same
folder as the HTML document, but we could place it somewhere
else and adjust the path. On next slide there are three
examples.

43
Applying CSS to HTML
(external stylesheet)
<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- Inside a subdirectory called general, which is in a subdirectory called


styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />

44
Applying CSS to HTML
(internal stylesheet)
●
An internal stylesheet resides within an HTML document.
●
To create an internal stylesheet, you place CSS inside a <style>
element contained inside the HTML <head>.

45
Applying CSS to HTML
(internal stylesheet)
<!doctype html> p{
<html lang="en-US"> color: red;
<head> }
<meta charset="utf-8" /> </style>
<title>My CSS experiment</title> </head>
<style> <body>
h1 { <h1>Hello World!</h1>
color: blue; <p>This is my first CSS example</p>
background-color: yellow; </body>
border: 1px solid black; </html>
} 46
Applying CSS to HTML
(internal stylesheet)
●
In some circumstances, internal stylesheets can be useful. For
example, we're working with a content management system
where we are blocked from modifying external CSS files.
●
But for sites with more than one page, an internal stylesheet
becomes a less efficient way of working.
●
To apply uniform CSS styling to multiple pages using internal
stylesheets, we must have an internal stylesheet in every web
page that will use the styling. The efficiency penalty carries over
to site maintenance too.
●
With CSS in internal stylesheets, there is the risk that even one
simple styling change may require edits to multiple web pages!!!
47
Applying CSS to HTML
(inline stylesheet)
●
Inline styles are CSS declarations that affect a single HTML
element, contained within a style attribute.
●
The implementation of an inline style in an HTML document
might look like it is given in the next slide.

48
Applying CSS to HTML
(inline stylesheet)
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World! </h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html> 49
Applying CSS to HTML
(inline stylesheet)
●
Avoid using CSS in this way, when possible!!! It is the
opposite of a best practice.
●
First, it is the least efficient implementation of CSS for
maintenance. One styling change might require multiple
edits within a single web page.
●
Second, inline CSS also mixes (CSS) presentational code with
HTML and content, making everything more difficult to read and
understand.
●
Separating code and content makes maintenance easier for all
who work on the website!!!
50
Applying CSS to HTML
(inline stylesheet)
●
There are a few circumstances where inline styles are more
common.
●
You might have to resort to using inline styles if your working
environment is very restrictive.
●
For example, perhaps your CMS only allows you to edit the
HTML body (as shown in the eKursy platform during exercises).
●
You may also see a lot of inline styles in HTML e-mail to
achieve compatibility with as many e-mail clients as possible.

51
Selectors
●
A selector targets HTML to apply styles to content.
●
However, if CSS is not applying to content as expected, your
selector may not match the way you think it should match.
●
Each CSS rule starts with a selector (or a list of selectors) in
order to tell the browser which element or elements the rules
should apply to.

52
Selectors
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

53
Selectors – specificity
●
We may encounter scenarios where two selectors select the
same HTML element.
●
Consider the stylesheet below, with a p selector that sets
paragraph text to blue. However, there is also a class that sets
the text of selected elements to red.
.special {
color: red;
}
p{
color: blue;
} 54
Selectors – specificity
●
Suppose that in our HTML document, we have a paragraph with
a class of special. Both rules apply.
●
Which selector prevails?
●
Do you expect to see blue or red paragraph text?

<p class="special">What color am I?</p

55
Selectors – specificity
●
The CSS language has rules to control which selector is
stronger in the event of a conflict. These rules are called
cascade and specificity.
●
In the code block below, we define two rules for the p selector,
but the paragraph text will be blue. This is because the
declaration that sets the paragraph text to blue appears later in
the stylesheet. Later styles replace conflicting styles that
appear earlier in the stylesheet. This is the cascade rule.
p { color: red; }
p { color: blue; }

56
Selectors – specificity
●
However, in the case of our earlier example with the conflict
between the class selector and the element selector, the class
prevails, rendering the paragraph text red.
●
How can this happen even though a conflicting style appears
later in the stylesheet?
●
A class is rated as being more specific, as in having more
specificity than the element selector, so it cancels the other
conflicting style declaration.
●
Try this experiment for yourself! Add HTML, then add the two p
{ } rules to your stylesheet. Next, change the first p selector
to .special to see how it changes the styling. 57
Selectors – specificity
●
The rules of specificity and the cascade can seem complicated
at first. These rules are easier to understand as you become
more familiar with CSS.
●
For now, remember that specificity exists. Sometimes, CSS
might not apply as you expected because something else in the
stylesheet has more specificity. Recognizing that more than one
rule could apply to an element is the first step in fixing these
kinds of issues.

58
Functions
●
While most values are relatively simple keywords or numeric
values, there are some values that take the form of a function.
●
Example functions:
●
the calc() function
●
transform functions

59
Functions – calc()
●
The calc() function can do simple math within CSS

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

.outer { border: 5px solid black; }


.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
} 60
Functions – calc()
●
A function consists of the function name, and parentheses to
enclose the values for the function.
●
In the case of the calc() example, the values define the width of
this box to be 90% of the containing block width, minus 30
pixels. The result of the calculation isn't something that can be
computed in advance and entered as a static value.

61
Functions – transform
●
Another example would be the various values for transform,
such as rotate().
<div class="box"></div>

.box {
margin: 30px;
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn);
} 62
Shorthands
●
Some properties like font, background, padding, border, and
margin are called shorthand properties. This is because
shorthand properties set several values in a single line.
/* In 4-value shorthands like padding and margin, the values are applied in the order
top, right, bottom, left (clockwise from the top). There are also other shorthand types,
for example 2-value shorthands, which set padding/margin for top/bottom, then
left/right */
padding: 10px 15px 15px 5px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px; 63
Shorthands
●
This one line:
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

●
Is equivalent to these five lines:
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

64
White space
●
White space means actual spaces, tabs and new lines.
●
Just as browsers ignore white space in HTML, browsers ignore
white space inside CSS.
●
The value of white space is how it can improve readability.
●
In the example below, each declaration (and rule start/end) has
its own line. This is arguably a good way to write CSS. It makes
it easier to maintain and understand CSS.

65
White space
body { @media (min-width: 70em) { div p,
font: body { #id:first-line {
1em/150% Helvetica, font-size: 130%; background-color: red;
Arial, } border-radius: 3px;
sans-serif; }
h1 { div p {
padding: 1em;
font-size: 1.5em; margin: 0;
margin: 0 auto;
} padding: 1em;
max-width: 33em;
}
}
div p + p {
padding-top: 0;
} 66
White space
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0
auto; max-width: 33em;}
@media (min-width: 70em) { body { font-size: 130%;}}

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}


div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

67
White space
●
Warning: Though white space separates values in CSS
declarations, property names never have white space.
●
For example, these declarations are valid CSS:
margin: 0 auto;
padding-left: 10px;

●
But these declarations are invalid:
margin: 0auto;
padding- left: 10px;

68

You might also like