Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Lecture7_CSS_Layout

The document is a lecture on CSS layout, covering essential topics such as colors, text formatting, background properties, and the box model. It explains how to use color names, hex codes, and RGB values, as well as how to manipulate text properties like font size and spacing. Additionally, it discusses layout techniques including the use of floats and CSS frameworks for creating multi-column designs.

Uploaded by

gado zangana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Lecture7_CSS_Layout

The document is a lecture on CSS layout, covering essential topics such as colors, text formatting, background properties, and the box model. It explains how to use color names, hex codes, and RGB values, as well as how to manipulate text properties like font size and spacing. Additionally, it discusses layout techniques including the use of floats and CSS frameworks for creating multi-column designs.

Uploaded by

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

WEB Design

Lecture 7

CSS (Layout )
College of Informatics
SPU

Brwa Jalal
brwa.xzr@spu.edu.iq
Previous Lecture
Ø What is CSS
Ø Why use CSS
Ø CSS Syntax(Sectors)

Overview
Ø CSS – Colors
Ø Css - Text
Ø CSS – Background
Ø Box Model
Ø Display
Ø Layout
HTML Colors
Ø Colors are very important to give a good look and feel to your website.
Ø The <body> tag has following attributes which can be used to set different
colors:
• bgcolor - sets a color for the background of the page.
• text - sets a color for the body text.
• alink - sets a color for active links or selected links.
• link - sets a color for linked text.
• vlink - sets a color for visited links

Ø There are following three different methods to set colors in your web
page:
• Color names - You can specify color names directly like green, blue or red.
• Hex codes - A six-digit code representing the amount of red, green, and blue that makes
up the color.
• Color decimal or percentage values - This value is specified using the rgb( ) property.
Color Names
Ø You can specify direct a color name to set text or background color.
Ø The following table shows the 16 color names that were introduced and
validated in HTML
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

Ø There are other colors which are not part


ivory
of HTML or XHTML but they are supported
khaki
by most of the versions of major browsers. lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
Hex Codes
Ø A hexadecimal is a 6 digit representation of a color.
Ø The first two digits(RR) represent a red value, the next two are a green
value(GG), and the last are the blue value(BB).
Ø A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, illustrator or InDesign.
Ø Each hexadecimal code will be preceded by #000000

a hash sign #. #FF0000


#00FF00
Ø Following is a list of few colors using
#0000FF
hexadecimal notation. #FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
RGB Values
Ø This color value is specified using the rgb( ) property.
Ø This property takes three values, one each for red, green, and blue.
Ø The value can be an integer between 0 and 255 or a percentage.
Ø Note: All the browsers does not support rgb() property of color so it is
recommended not to use it.

rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,19
2)
rgb(255,255,25
CSS3 – rgba Colors
The following example shows rgba color property
Text
Font-Family:

■ To change the font type, you can use the font-family property.
■ Note:
1. The specified font must be installed on a user's computer in order for that font to display
when a user visit the web page.
2. The default typeface for all HTML elements is Times New Roman.
3. When the name of a typeface consists of more than one word, it must be enclosed in double
quotes (otherwise it will not be recognized), like so:
4. Capitalize the first letter of the font name.

8
Text
Fallback Fonts:

■ The CSS rule above says: "Use the Garamond font for all <h1> elements on the
web page.
■ If that font is not available, use the Times font.
■ If both of those fonts are not available, use any serif font pre-installed on the
user's computer."

9
Text
External Fonts:

■ You can use the new font just as you would use any other font:

■ This avoids having to determine whether or not that font is


installed on a user's computer.
■ You now have access to thousands of new, modern, free-to-use
fonts

10
Text
Font Size:
■ Pixels: Pixels are commonly used because they
allow web designers very precise control over
how much space their text takes up

■ percentages: The default size of text in


browsers is 16px. So a size of 75% would be the
equivalent of 12px, and 200% would be 32px.
■ What if you set a rule for body to be 12px and
then set a rule for an element to be 75%?

■ EMS: An em is equivalent to the width of a letter


“m”

11
Text
Word Spacing:
■ To change the spacing between words
■ The default amount of space between words is
usually 0.25em.

Letter Spacing:
■ To change the spacing between letters.

.
Font weight:
■ Values are: bold and normal
■ Font weights can also be set to:
Ø 100 (thin),
Ø 200, 300, 400 (normal weight)
Ø 500, 600, 700, 800, or 900 (bold).
12
font-style:
Text
■ Values are: italic, normal and oblique
■ Italic fonts were traditionally stylized
versions of the font based on
calligraphy, whereas an oblique
version would take the normal
version and put it on an angle.
Text Transformation:

■ It is used the change case.


Values are:
■ Lowercase: all letters are in
small.
■ Uppercase: all letters are in
capital.
■ Capitalize: first letter in each
word is in capital.
13
Text
Text Decoration:

■ Underline: to draw a line under


the text.

■ None: removes the line

■ Overline: to draw a line above the


text

■ Line-through: to draw a line on


the text

14
CSS - Background
You can set the following background properties of an element
Ø The background-color property is used
to set the background color of an element.
Ø The background-image property is used
to set the background image of an element.
Ø The background-repeat property is used to
control the repetition of an image in the background.
Ø The background-position property is used to control the position of an
image in the background.
Ø The background-attachment property is used to control the scrolling of
an image in the background.
Ø The background property is used as a shorthand to specify a number of
other background properties.
CSS-Background Color
Set the Background Color
Ø Following is the example which demonstrates how to set the
background color for an element.
CSS-Background Image
Set the Background Image
Ø We can set the background image by calling local stored images as shown
below
CSS-Repeat the Background Image
Repeat the Background Image
Ø The following example demonstrates how to repeat the
background image if an image is small.
Ø You can use no-repeat value for background-repeat property if
you don't want to repeat an image, in this case image will
display only once.

Ø Repeat-x and Repeat-y


CSS- Background Image Position
Ø The following example demonstrates how to set the background
image position 100 pixels away from the left side and 200 pixels
down from the top.
CSS- Background Attachment
Set the Background Attachment
Ø Background attachment determines whether a background
image is fixed or scrolls with the rest of the page.
Ø The following example demonstrates how to set the fixed
background image.
Boxes
What is a box model:
■ Every HTML element is sitting inside a box.
■ In order to view it:
■ We can give it a background color
■ or we can give it a border and color it.

HTML
result
CSS

21
Boxes
■ Box models consist of: margins, borders, padding, and the actual content.

1.Content - The content of the box, where text and Margin


images appear

2.Padding - Clears an area around the content. The


padding is transparent
Border
3.Border - A border that goes around the padding and Padding
content

4.Margin - Clears an area outside the border. The margin


is transparent

22
Border
Width & Height:
■ default dimensions are automatically set to hold the raw contents of the box.
■ To modify the default dimensions an element's box in CSS, you can use
the width and height properties.
■ units of measurement:
1. Pixels
2. Ems
3. Percentages

23
Border
Important Note:
■ Percentage unit sets the dimensions of the box relative to the size of the box that it is
encased in.
■ For example, consider an element (a box) of class blue set to a height of 200 pixels and a
width of 200 pixels. Inside of blue, consider another box of class red, set to a height of 50%
and a width of 50%.
■ The resulting dimensions of the red box would be a height of 74 pixels and a width of 90
pixels.

24
Boxes
Overflow:
■ When the value of the max-height property is set too low, the contents will spill outside of the
box.
■ The overflow property controls what happens to content when it spills, or overflows, outside of
its box. It can be set to one of the following values:
1. Hidden: any content that overflows be hidden from view.
2. Scroll: a scrollbar will be added to the element's box so that the rest of the content can be
viewed by scrolling.

25
Border

Box Borders:
■ The standard way to create HTML borders is to use CSS.
■ Using CSS, you can create a border around any HTML element.

26
Border
■ It's not possible to view a box's border if
the border's style has not been set.
■ border-style property has the following values:
1. solid - border is a solid line.
2. dashed - border is a series of lines or dashes.
3. dotted - border is a series of square dots.
4. double - border is two solid black lines.
5. groove - border is a groove (or carving).
6. inset - border appears to cut into the screen.
7. outset - border appears to pop out of the screen.
8. ridge - border appears as a picture frame.
9. hidden or none - no border.

27
Border
Border Width III:
■ If you'd like to be even more specific about the width of different sides of the
border, you can use the following properties:
1. border-top-width
2. border-right-width
3. border-bottom-width
4. border-left-width

28
Border
Border Color:
■ The color of a border can also be customized with the border-color property.

■ The border-color property accepts colors in the various formats you learned about
earlier: named colors, RGB(a) colors, and hex colors.

29
Boxes
Border Radius:
■ The corners of an element's border box can be modified with the border-
radius property.

■ To create a perfect circled border:

30
Padding
■ The space between the contents of a box and the borders of a box is known
as padding. In CSS, you can modify this space with the padding property.

31
Padding
■ You can also specify exactly how much padding there should be on each side of the
content.

■ In the example above, the four values 5px 10px 5px 10px refer to the amount of
padding in a clockwise rotation.
■ In order, it specifies the amount of padding on the top (5 pixels), right (10 pixels),
bottom (5 pixels), and left (10 pixels)sides of the content.

32
Padding
■ If you want to be even more specific about the amount of padding on each side
of a box's content, you can use the following properties:
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

33
Margin
■ The margin refers to the space directly outside of the box. You can adjust this
spacing with the margin property.

34
Margin
■ if you don't want equal margin on all four sides of the box:

■ Shortcut:

■ more flexibility in customization:

35
Display
■ As mentioned earlier, All HTML elements can be classified as one of the following:
1. Inline elements
2. Block-level elements

You learnt that:


■ You can control how much space each box takes up by setting the width of the
boxes (and sometimes the height, too).
■ To separate boxes, you can use borders, margins, padding, and background colors.

36
Display
■ The display property can take on one of four
values:
1. Inline: causes block-level elements (like a div) to
behave like an inline element (like a link).
2. Block: causes inline elements (like a link) to
behave like a block element (like a div).
3. inline-block: causes block-level elements to
behave like an inline element, but retain the other
features of a block-level element.
4. None: removes an element from view. The rest
of the web page will act as if the element does
not exist.

37
Display
■ Elements can be hidden from view with the visibility property.
■ The visibility property can be set to one of the following values:
1. hidden - hides an element.
2. visible - displays an element.

38
Float
■ If you're simply interested in moving an element as far left or as far right as possible
on the page, you can use the float property

■ The float property can be set to one of two values:


1. Left: this value will move, or float, elements as far left as possible.
2. Right: this value will move elements as far right as possible.

39
example

■ In the example above, we float


the div.b element to the right.
■ This works for static and
relative positioned elements.
■ Floated elements must have a
width specified, as in the
example above. Otherwise, the
element will assume the full
width of its containing element,
and changing the float value
will not yield any visible results.

40
example

result
CSS

HTML

41
Layout
There are four different ways to create multicolumn layouts:

1. HTML tables: do not use tables for your page layout! They will bring a mess into your
code

2. CSS float property: we will discussed in the next slides

3. CSS framework: if you want to create your layout fast, you can use a framework,
like W3.CSS or Bootstrap.

4. CSS flexbox: it is a new layout mode in CSS3. it is easy to use but only supported by the
new version of browsers. For example: Does not work in IE10 and earlier

42
Layout
Creating Multi-Column Layouts with Floats:
■ Many web pages use multiple columns in their design. This is achieved by using a <div>
element to represent each column.
■ The following three CSS properties are used to position the columns next to each other:

1. Width: This sets the width of the columns.


2. Float: This positions the columns next to each other.
3. Margin: This creates a gap between the columns.

43
Layout
■ Similarly, a three column layout could be created by floating
three elements next to each other.

44

You might also like