Scribd
Upload
14 views

(PCO IT) Tut6 CSS

Uploaded by

creatorneon333
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

(PCO IT) Tut6 CSS

Uploaded by

creatorneon333
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

CSS

Hoang Thi Kieu Hoa


Overview

CSS Overview
CSS Selector

Box model

Styling Text and List

7/29/2021 3
Section 1

CSS OVERVIEW

7/29/2021 4
CSS Overview
➢ CSS is a language that describes the style of an HTML
document
▪ CSS stands for Cascading Style Sheets
▪ CSS describes how HTML elements should be rendered on screen,
on paper, in speech, or on other media.
▪ CSS is one of the core languages of the open Web and is
standardized across Web browsers according to the W3C
specification

7/29/2021 5
Apply CSS to HTML
➢ 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

7/29/2021 6
Apply CSS to HTML
➢ Inline style: An inline CSS is used to apply a unique style
to a single HTML element
❖ Syntax

❖ Note: The style attribute will override any style set globally, e.g.
styles specified in the <style> tag or in an external stylesheet.

7/29/2021 7
Apply CSS to HTML
➢ Internal style:
▪ An internal CSS is used to
define a style for a single
HTML page.
▪ It is defined in the <head>
section of an HTML page,
within a <style> element

7/29/2021 8
Apply CSS to HTML
➢ External style:
▪ An external style sheet is used to definethe style for many HTML
pages.
▪ With an external style sheet, you can change the look of anentire
web site, by changing one file.
▪ Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the headsection.

mystyle.css

7/29/2021 9
Apply CSS to HTML
➢ Cascading order: 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:
1. Inline style.
2. External and internal style sheets.
3. Browser default

7/29/2021 10
CSS Syntax

➢ The basic goal of the CSS language is to allow a browser engine to


paint elements of the page with specific features, like colors,
positioning, or decorations.
➢ CSS Syntax includes:
▪ The property which is an identifier, that is ahuman-
readable name, that defines which feature is considered.
▪ The value which describe how the feature must be handled by
• the engine. Each property has a set of valid values, defined by a
formal grammar, as well as a semantic meaning, implemented by
the browser engine.
7/29/2021 11
CSS Syntax
➢ CSS Declarations: A property and value pair is called
a declaration

7/29/2021 12
CSS Syntax
➢ CSS Declarations block: Declarations are grouped
in blocks

7/29/2021 13
Session 2

CSS SELECTORS

7/29/2021 14
CSS selector
➢ CSS selectors are used to "find" (or select) the HTML
elements you want to style.
➢ We can divide CSS selectors into four categories:
1. Simple selector (type, id, class)
2. Combinator selector
3. Pseudo classes & pseudo elements
4. Attribute selectors

7/29/2021 15
Type, id, class selectors
▪ The element selector: Selects HTML
elements based on the element name

▪ Id selectors: Uses the id attributeof an


HTML element to select a specific
element.

▪ Class selectors: Selects HTML


elements with a specific class attribute

7/29/2021 16
Session 3

BOX MODEL

7/29/2021 24
The altenative CSS Box Model

7/29/2021 25
The CSS Box Model
➢ Making up a block box in CSS we have:
▪ Content box: The area where your content is displayed, which canbe
sized using properties like width andheight.
▪ Padding box: The padding sits around the content as white space; its
size can be controlled using padding and related properties.
▪ Border box: The border box wraps the content and any padding. Its
size and style can be controlled using border and related properties.
▪ Margin box: The margin is the outermost layer, wrapping the content,
padding and border as whitespace between this box and other
elements. Its size can be controlled using margin and relatedproperties.

7/29/2021 26
Margins, paddings and borders
➢ Take a look

7/29/2021 27
Margins, paddings and borders
➢ Margin: Is an invisible space around your box. It pushes other
elements away from the box. Margins can have positive or
negative values. Setting a negative margin on one side of your
box can cause it to overlap other things on the page
➢ We can control all margins of an element at once using the
margin property, or each side individually using the equivalent
longhand properties:
▪ margin-top
▪ margin-right
▪ margin-bottom
▪ margin-left

7/29/2021 28
Margins, paddings and borders
➢ Padding: Sits between the border and the content area. Unlike
margins you cannot have negative amounts of padding, so the
value must be 0 or a positive value, it is typically used to push
the content away from the border.
➢ We can control all margins of an element at once using the
margin property, or each side individually using the equivalent
longhand properties:
▪ padding-top
▪ padding-right
▪ padding-bottom
▪ padding-left

7/29/2021 29
Margins, paddings and borders
➢ Border: is drawn between the margin and the padding of a
box.
➢ To set the properties of each side individually, you can use:
▪ border-top
▪ border-right
▪ border-bottom
▪ border-left
➢ To set the width, style, or color of all sides, use the following:
▪ border-width
▪ border-style (dotted, dashed, solid , double, groove,inset,
outset,.. )
▪ border-color
7/29/2021 30
Session 4

STYLING TEXT AND LIST

7/29/2021 31
Styling text
➢ The CSS properties used to style text generally fall into
two categories:
▪ Font styles: Properties that affect the font that is applied to the text,
affecting what font is applied, how big it is, whether it is bold, italic,
etc
▪ Text layout styles: Properties that affect the spacing and other
layout features of the text, allowing manipulation of, for example, the
space between lines and letters, and how the text is aligned within
the content box.

7/29/2021 32
Text and font styling
➢ Fonts
▪ Color: The color property sets the color of the foreground content of
the selected elements.

7/29/2021 33
Text and font styling
➢ Fonts
▪ Font families: The font-family property specifies the font for
an element.
o The font-family property can hold several font names as a
"fallback" system. If the browser does not support the first font, it
tries the next font.
o There are two types of font family names:
• family-name - The name of a font-family, like"times",
"courier", "arial", etc.
• generic-family - The name of a generic-family, like "serif",
"sans-serif", "cursive", "fantasy", "monospace".

7/29/2021 34
Text and font styling
➢ Fonts
▪ font-size: The font-size property sets the size of a font.
▪ font-style: The font-style property specifies the font style for a text
▪ font-weight: The font-weight property sets how thick or thin
characters in text should be displayed.
▪ text-transform: The text-transform property controls the
capitalization of text.
▪ text-decoration: The text-decoration property specifies the
decoration added to text.
7/29/2021 35
Text and font styling

▪ Fonts
✓ Font size: The font-size property sets the size of a font.
✓ Font size can take values measured in most of these units (and
others, such as percentages), however the most common units
you'll use to size text are px, rem, em

7/29/2021 36
Text and font styling
➢ Text layout
▪ Text alignment: The text-align property is used to control how text
is aligned within its containing content box (left,right, center, justify).

▪ Light height: The line-height property specifies the height of a line.


▪ Letter and word spacing: The letter-spacing and word-spacing
properties allow you to set the spacing between letters and words in
your text.

7/29/2021 37
Styling list
➢ Bullet styles: The list-style-type property specifies the type of list item
marker.

7/29/2021 38
Styling list
➢ Bullet styles: some value of list-style-type property
▪ disc
▪ circle
▪ square
▪ decimal
▪ decimal-leading-zero
▪ lower-roman
▪ lower-greek
▪ ...

7/29/2021 39
Styling list
➢ Bullet position: The list-style-position property specifies the position of
the list-item markers.

▪ list-style-position: out ▪ list-style-position: inside

7/29/2021 40
Styling list
➢ Using a custom bullet image: The list-style-image
property specifies an image as the list item marker

7/29/2021 41
Styling list
➢ list-style shorthand: The three properties mentioned above can all be
set using a single shorthand property,list-style

Could be replaced by this

7/29/2021 42
Thank you

7/29/2021 43

You might also like