Scribd
Upload
48 views

Chapter 2 CSS

CSS (Cascading Style Sheets) is used to style and lay out web pages. CSS separates the presentation of HTML elements from the HTML content itself. It allows styling to be applied to multiple pages at once. CSS rules consist of selectors, properties, and values to style HTML elements. Styles can be applied via inline, internal, or external CSS. Common CSS properties control elements like color, background, border, margin, padding, font, and layout.

Uploaded by

Majdouline Znaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Chapter 2 CSS

CSS (Cascading Style Sheets) is used to style and lay out web pages. CSS separates the presentation of HTML elements from the HTML content itself. It allows styling to be applied to multiple pages at once. CSS rules consist of selectors, properties, and values to style HTML elements. Styles can be applied via inline, internal, or external CSS. Common CSS properties control elements like color, background, border, margin, padding, font, and layout.

Uploaded by

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

CSS Basics

TBS/2018-2019
Introduction
2

 HTML : Hyper Text Markup Language

 Was NEVER intended to contain tags for formatting a web page

 Describes the content of a web page

 CSS: Cascading Style Sheets


 Describes HOW HTML elements are to be displayed on screen, paper, or in
other media
 Separates content (the data ) from (the styling)
 Saves a lot of work.
 It can control the layout of multiple web pages all at once.
The beauty of CSS
3

HTML (no CSS) HTML + CSS

The same page (with and without CSS) Source: www.zengarden.com


CSS versions
(developped by W3C)
4

 CSS Level 1 (CSS1): 1996  CSS level 3 (CSS3):1999


 font properties (e.g.: color  presentation-style
of text, backgrounds), properties,
 text attributes (e.g.:  modularization of CSS
spacing between words, documents
letters, and lines of text).
 No CSS4 standard or
 CSS level 2 (CSS2): 1998
specification
 page layout,  but a few level 4 modules
 styles for other media exist e.g.: image values,
types, backgrounds & borders, etc.,
 more sophisticated  builds on the functionality of
methods for selecting a preceding level 3 module.
elements for styling.
How to Insert CSS? (1/5)
5

 Styling can be added to HTML elements in 3 ways:


 Inside the HTML page
 Inline  inside of each HTML tag to style
 To avoid: the worst way to do styling
 Internal  inside the header <head> of the HTML page
 If you need to style only one page, or if you want different pages
to have different styles

 Outside the HTML page


 External  in a separate style file
 The most recommended method
How to Insert CSS? (2/5)
Inline CSS
6
One file:

page.html

Result
How to Insert CSS? (3/5)
Internal CSS
7

One file:

page.html Result
How to Insert CSS? (4/5)
External stylesheet
8

Two files: page.html style.css

Result
How to Insert CSS? (5/5)
External stylesheet
9

 Advantages
 Specify the style once for every instance of each class.
 Example: Specify the font once for all text on the HTML page
that you’ve identified as a “header”.

 All the HTML pages of the entire website can link to the same
stylesheet file: a separate file.

 Can change the style of the entire site by editing only ONE
FILE: the CSS file.

 Reusibilty of the same stylesheet file in several websites


CSS Syntax (1/2)
10

 A simple CSS rule-set consists of:


 a Selector
 the HTML element (tag) it will affect
 a Property
 the attribute of the HTML element that will be affected
 a Value
 the change that will be made to that attribute
Declaration
Selector { Property : Value ; }
Declaration block
CSS Syntax (2/2)
11

 A CSS declaration block can contain one or more


declarations.
 Declaration blocks are surrounded by curly braces.
 A CSS declaration always ends with a semicolon.
 Each declaration includes a CSS property name and a value,
separated by a colon.

Declaration block
CSS comments
12

 Written between /* and */


 Allows you to enter notes into CSS that will not be
interpreted
 Will not be visible in the browser
CSS Selectors (1/2)
13

 Element Selector: selects elements based on the element name.

p { h1, h2, p {
color: red; color: red;
text-align: center; text-align: center;
} }

 Id Selector: uses a unique id attribute of an HTML element to select a specific


element.
<body>
#para1 {
<p id="para1">Hello World!</p>
text-align: center;
<p>This paragraph is not affected by the
color: red;
style.</p>
</body> } CSS
HTML code
code
CSS Selectors (2/2)
14

 Class Selector: selects elements with a specific class attribute.

<body>
<h1 class="center">Red and center-aligned .center {
all HTML
heading</h1> color: red;
elements with
<p class="center">Red and center-aligned text-align: center; class="center"
paragraph.</p> } will be red and
center-aligned
</body>

 In the example below, only <p> elements with class="center" will be center-aligned:

p.center {
color: red;
text-align: center;
}
CSS Elements
15

 CSS can control many elements of our web pages:

 Backgrounds,
 Borders,
 Margins,
 Padding,
 Height/Width,
 Division,
 Combinators,
 Font,
 Text,
 Lists,
 Tables,
 Counters,
 Position,
 and much more..
Color
16

Can be specified using

a color name an RGB value a HEX value

Color Name RGB HEX


red rgb(255,0,0) #FF0000

yellow rgb(255,255,0) #FFFF00

green rgb(0,255,0) #00FF00

cyan rgb(0,255,255) #00FFFF

blue rgb(0,0,255) #0000FF


Background (1/2)
17
 background-color: set the background color of an element.

p, h1 { background-color: lightblue; }

 background-image: set an image as the background.

body { background-image: url(flowers.jpg);


}

 background-repeat: repeat a background image horizontally or vertically.


body { background-repeat: value; }

Values:
no-repeat
repeat
repeat-x
repeat-y
Background (2/2)
18
 background-attachment: If you are using an image as a background. You can
set whether the background scrolls with the page or is fixed when the user
scrolls down the page with the background-attachment property.

body { background-attachment: scroll; } body { background-attachment: fixed; }

 background-position:
Values:
body { background-position: value; } top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Border (1/2)
19
 The CSS border properties allow you to specify the style, width, and color of an
element's border:
 border-style:
Values:
border-style: value; dashed, dotted
double, groove
hidden, inset
none, outset
ridge, solid

 border-color:

border-color: red green blue yellow;

 border-width:
border-width: 2px 10px 4px 20px;
Border (2/2)
20
 In CSS, there is properties for specifying each of the borders (top, right, bottom,
and left):
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

 You can set the color, style and width of the borders around an element in one
declaration by using the shorthand property border :

p{
border: 5px solid red;
}
Margin & padding
21

 Padding: inner area of an element (inside the border)


 Margin: inner area of an element (outside the border)

1
margin-top
padding-Left

padding-right
padding-top

margin-right
Margin-Left

2
4
padding-bottom

margin-bottom

3
Margin
22
 The margin property declares the margin between an HTML element and the
elements around it. The margin property can be set for the top, left, right and
bottom of an element.

p{ Or with the shorthand property margin


margin-top: 100px;
margin-right: 150px; p{
margin-bottom: 100px; margin: 100px 150px 100px 80px;
margin-left: 80px; }
}

 All the margin properties can have the following values:


 auto - the browser calculates the margin.
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element.
 inherit- specifies that the margin should be inherited from the parent
element
Padding
23
 Padding is the distance between the border of an HTML element and the
content within it.

p{ Or with the shorthand property padding


padding-top: 50px;
padding-right: 30px; p{
padding-bottom: 50px; padding: 50px 30px 50px 80px;
padding-left: 80px; }
}

 All the padding properties can have the following values:


 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element.
 inherit -specifies that the padding should be inherited from the parent
element
Height & Width
24

 The height and width can be set to auto (this is default. Means that the browser
calculates the height and width), or be specified in length values, like px, cm,
etc., or in percent (%) of the containing block:

div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}

 You can control the minimum/maximum width or the minimum/maximum


height of an element:
div {
max-width: 70%;
min-height: 30cm;
border: 3px dashed green;
}
Division
25

 Divisions are a block level HTML element used to define sections of an HTML
file. A division can contain all the parts that make up your website. Including
additional divisions, images, text and so on.
<body> <body>
<div > <div id=”container”>
Site contents go here. Site contents go here.
</div> </div>
</body> </body>

 The CSS file will contain:

div { #container {
width: 70%; width: 70%;
margin: auto; margin: auto;
padding: 20px; padding: 20px;
border: 1px solid #666; border: 1px solid #666;
} }
Combinators
26

 There are four different combinators in CSS:

 descendant selector (space): The following example selects all <p> elements inside
<div> elements:
div p { background-color: yellow; }

 child selector (>): The following example selects all <p> elements that are immediate
children of a <div> element:
div > p { background-color: yellow; }

 adjacent sibling selector (+): The following example selects all <p> elements that are
placed immediately after <div> elements:

div + p { background-color: yellow; }

 general sibling selector (~): The following example selects all <p> elements that are not
in <div> elements:
div ~ p { background-color: yellow; }
Font
27
 The font property can set the style, weight, variant, size, line height and font:
 font-family:

p { font-family: "Times New Roman", Times, serif; }

 font-style:
font-style: value; Values: normal, italic, oblique
1em is equal to the
 font-size: current font size.
The default text size
in browsers is 16px.
font-size: 100%; font-size: 40px; font-size: 2.5em; So, the default size
of 1em is 16px.
 font-weight:

font-weight: lighter font-weight: 300; font-weight: bold;

 font-variant:

font-variant: normal; font-variant: small-caps;


Text (1/2)
28

 color: you can set the color and align a text with the color and text align attributes.
h1 { color: rgb(255,0,0);
text-align: justify; }

 text-decoration:
Values:
None, underline, Overline,
h1 { text-decoration: value; }
line through, blink

 text-transformation:
Values:
text-transform: values;
none, capitalize, lowercase, uppercase

 text-indent: specify the indentation of the first line of a text


p { text-indent: 50px;}
Text (2/2)
29

 letter-spacing: specify the space between the characters in a text.


h1 { letter-spacing: 3px; }

 line-height: specify the space between lines.

p.small { line-height: 0.8; }

 text-direction: right to left


direction: rtl;

 word-spacing: specify the space between the words in a text

h1 { word-spacing: 10px;}
Lists
30
 The CSS list properties allow you to:

 Set different list item markers for ordered and unordered lists:

Values:
list-style-type: value; disc, circle, square, decimal, lower-roman
upper-roman, lower-alpha, upper-alpha, none
 Set an image as the list item marker:

list-style-image: url(path_to_image.gif, jpg or png);

 Set the position of the list item markers: specifies whether the list-item markers should
appear inside or outside the content flow:

list-style-position: inside; list-style-position: outside;

 Add background colors to lists and list items

ol { background: #ff9999; }
Tables
31

 border:
table, th, td {
border: 1px solid black;
}

 border-collapse: set whether the table borders should be collapsed into a single border.

table {
border-collapse: collapse;
}

 height, width, color, background-color, padding, etc.


table { width: 100%; }
th { height: 50px;
background-color: #4CAF50;
color: white;
border-bottom: 1px solid #ddd;
padding: 15px;
text-align: left;
}
Counters
32

 CSS counters are like "variables". The variable values can be incremented by
CSS rules (which will track how many times they are used):

 counter-reset - Creates or resets a counter


 counter-increment - Increments a counter value
 content - Inserts generated content
 counter() or counters() function - Adds the value of a counter to an element

body { counter-reset: c1 c2 c3; }

h1:before { content: counter(c1) " "; counter-increment: c1; }


h2:before { content: counter(c1) "." counter(c2) " "; counter-increment: c2; }
h3:before { content: counter(c1) "." counter(c2) "." counter(c3) " "; counter-increment: c3; }
Position
33

 The position property changes how elements are positioned on your webpage.
position: value;

Values:
static: An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:

relative: places the element in the normal flow of your HTML file and then offsets it by
some amount using the properties left, right, top and bottom.

absolute: removes the element from the normal flow of your HTML file, and positions it
to the top left of its nearest parent element that has a position declared other than static.

Fixed: An element that is positioned with a fixed value, will not scroll with the
document. It will remain in its position regardless of the scroll position of the page.

 When positioning elements with relative, absolute or fixed values the following
properties are used to offset the element: Top, left, right, bottom.

You might also like