Scribd
Upload
94 views

02.2 CSS

CSS allows you to control the style and layout of multiple web pages. It describes how HTML elements are displayed on screen and can save a lot of work. CSS can be added inline, internally, or externally. The most common method is to keep styles in separate CSS files. CSS rules contain selectors and declaration blocks that change properties like color, font, size, border, padding, and margin to style elements.

Uploaded by

Tamerlan Jabrayilov
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
94 views

02.2 CSS

CSS allows you to control the style and layout of multiple web pages. It describes how HTML elements are displayed on screen and can save a lot of work. CSS can be added inline, internally, or externally. The most common method is to keep styles in separate CSS files. CSS rules contain selectors and declaration blocks that change properties like color, font, size, border, padding, and margin to style elements.

Uploaded by

Tamerlan Jabrayilov
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 43

CSS

HTML ir CSS evolution

2 lessons 2
Web Technology Time Zone
1991 HTML 1999 CSS 3

1994 HTML 2 1999 HTML 4.01

1995 JavaScript 2000 XHTML 1.0

1996 CSS 1 2005 AJAX

1997 HTML 3.2 2006 XHTML 2.0

1998 CSS 2 2009 HTML 5

2 lessons 3
Cascading Style Sheets
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
• CSS can be added to HTML elements in 3 ways:
– Inline - by using the style attribute in HTML elements
– Internal - by using a <style> element in the <head> section
– External - by using an external CSS file
• The most common way to add CSS, is to keep the styles in separate
CSS files. However, here we will use inline and internal styling,
because this is easier to demonstrate, and easier for you to try it
yourself.
2 lessons 4
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block:

• 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 CSS property name and a value,
separated by a colon.
• A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.

2 lessons 5
Example

•color is a property, and red is the property value


•text-align is a property, and center is the property value
•p is a selector in CSS (it points to the HTML element you want to style: <p>).

2 lessons 6
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML
element.
• An inline CSS uses the style attribute of an HTML element.
• This example sets the text color of the <h1> element to blue:

2 lessons 7
Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page,
within a <style> element:

2 lessons 8
External CSS
• An external style sheet is used to define the style for many HTML
pages.
• With an external style sheet, you can change the look of an entire
web site, by changing one file!
• To use an external style sheet, add a link to it in the <head> section of
the HTML page:

2 lessons 9
External CSS
• An external style sheet can be written in any
text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
• Here is how the "styles.css" looks:

2 lessons 10
Multiple Style Sheets
• If some properties have been defined for the same
selector (element) in different style sheets, the value from
the last read style sheet will be used. 
• Assume that an external style sheet has the following
style for the <h1> element:
• h1 {
  color: navy;
}
• Then, assume that an internal style sheet also has the
following style for the <h1> element:
• h1 {
  color: orange;   
}
2 lessons 11
Example
• If the internal style is defined after the link to the external
style sheet, the <h1> elements will be "orange":

2 lessons 12
Example
• However, if the internal style is defined before the link to
the external style sheet, the <h1> elements will be "navy": 

2 lessons 13
Cascading Order
• What style will be used when there is more than one
style specified for an HTML element?
• All the styles in a page will "cascade" into a new
"virtual" style sheet by the following rules, where
number one has the highest priority:
• Inline style (inside an HTML element)
• External and internal style sheets (in the head section)
• Browser default
• So, an inline style has the highest priority, and will
override external and internal styles and browser
defaults.
2 lessons 14
CSS Selectors
• CSS selectors are used to "find" (or select) the HTML elements
you want to style.
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an
element)
• Attribute selectors (select elements based on an attribute or
attribute value)
• This page will explain the most basic CSS selectors.

2 lessons 15
The CSS element Selector
• The element selector selects HTML elements
based on the element name.

2 lessons 16
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a specific
element.
• The id of an element is unique within a page, so the id selector is used to select
one unique element!
• To select an element with a specific id, write a hash (#) character, followed by the
id of the element.
• Note: An id name cannot start with a number!

2 lessons 17
The CSS class Selector
• The class selector selects HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.)
character, followed by the class name.

2 lessons 18
Example

• You can also specify that only specific HTML elements


should be affected by a class.
• In this example only <p> elements with class="center"
will be center-aligned: 

Note: A class name cannot


start with a number!

2 lessons 19
Example
• HTML elements can also refer to more than one class.
• In this example the <p> element will be styled according to
class="center" and to class="large": 

2 lessons 20
The CSS Universal Selector
• The universal selector (*) selects all HTML ele
• The CSS rule below will affect every HTML
element on the page: ments on the page.

2 lessons 21
The CSS Grouping Selector
• The grouping selector selects all the HTML elements with
the same style definitions.
• Look at the following CSS code (the h1, h2, and p
elements have the same style definitions):

2 lessons 22
CSS Fonts
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.

2 lessons 23
All CSS Simple Selectors

2 lessons 24
2 lessons 25
CSS Border
• The CSS border property defines a border around
an HTML element:

2 lessons 26
CSS Padding
• The CSS padding property defines a padding
(space) between the text and the border:

2 lessons 27
CSS Margin
• The CSS margin property defines a margin
(space) outside the border:

2 lessons 28
The id Attribute
• To define a specific style for one special element, add
an id attribute to the element:
<p id="p01">I am different</p>
• then define a style for the element with the specific id:

2 lessons 29
The class Attribute
• To define a style for special types of elements, add a class attribute to
the element:
<p class="error">I am different</p>
• then define a style for the elements with the specific class:

2 lessons 30
External References
• External style sheets can be referenced with a full
URL or with a path relative to the current web page.
• This example uses a full URL to link to a style sheet:

2 lessons 31
• This example links to a style sheet located in the
html folder on the current web site:

2 lessons 32
• This example links to a style sheet located in
the same folder as the current page:

You can read more about file paths in the chapter HTML File Paths.

2 lessons 33
Chapter Summary
• Use the HTML style attribute for inline styling
• Use the HTML <style> element to define internal CSS
• Use the HTML <link> element to refer to an external CSS
file
• Use the HTML <head> element to store <style> and <link>
elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border
2 lessons 34
Grouping of selectors
The selectors can be grouped by separating
them with commas:
• h1,h2,h3,h4,h5,h6
{
color:green
}

2 lessons 35
Original classes
Different styles can be given to the same type of HTML
elements. A selector is used for this „class“:
p.right {text-align:right}
p.center {text-align:center}
p.bold {font-weight:bold}
and
<p class="right">This paragraph is aligned to the
right.</p>
<p class="center"> This paragraph is centered.</p>
<p class="center bold">Multiple Class Application.</p>
2 lessons 36
Class without contextual selector
• .center {text-align:center}
Nenurodant elemento rūšies, galima taikyti klasę
įvairiems elementams
Without specifying the element type, a class can
be applied to various elements :
• <h1 class="center">
Centers the header </h1>
• <p class="center">
Centers the paragraph.</p>
2 lessons 37
Pseudoclasses
Pseudoclasses are for those guidelines that do not fall
into one specific category. For example, such a link
guideline that has multiple states. It can be
considered a group of states rather than a guideline.
Its selector is written using a colon, for example :
Pseudoklasės skirtos toms gairėms,
• a:link { color : blue } kurios nepatenka į vieną konkrečią
kategoriją. Pavyzdžiui, tokia saito
• a:hover { color : lime } gairė, kuri turi keletą būsenų. Ją
galima laikyti būsenų grupe, o ne
• a:active { color : red } gaire. Jos selektorius užrašomas
• a:visited { color : pink } naudojant dvitaškį

2 lessons 38
Pseudo-Elements
• selector:pseudo-element {property:value}
or
• selector.class:pseudo-element {property:value}
example: example:
p:first-line { h1:before {
color:#ff0000; content:url(smiley.gif);
font-variant:small-caps; }
}

2 lessons 39
Reliatyvūs dydžiai/ Relative sizes
Unit The title What is it Example
em Em Santykis su naudojamo šrifto 3em
aukščiu
Relative to the height of the font
used

ex x-height The ratio of the lowercase height of 5ex


the font used
Santykis su naudojamo šrifto mažųjų
raidžių aukščiu

px dot Corresponds to the pixels of the 125px


monitor screen
Atitinka monitoriaus ekrano taškus
2 lessons 40
Absoliutūs dydžiai
Unity Title What is it Example
pt Point punktas 72pt = 1 colis 12pt
pc pika 1pc = 12pt 3pc
mm Millimeter 1mm = 0,24pc 25mm
milimetras
cm Centimeter 1cm = 10mm 5.1cm
centimetras
in Inch colis 1in = 2,54cm 8.25in

2 lessons 41
Checking cascading styles
http://www.css-validator.org/

2 lessons 42
 You can learn much more about CSS in  
CSS Tutorial.
https://www.w3schools.com/css/default.asp

2 lessons 43

You might also like