Lesson 11 Styling Elements with CSS

Styling Elements

with CSS

Lesson 11

Unit 2

Computer Science Discoveries

Learning

Target

I can understand how to

use CSS to change non

text elements on a web

site

Career Connection

Associated

Careers

Starting Salary

$60,000

This course is a project-based course that
develops career and communication skills in
Webdesign using Adobe tools. This course is
aligned to the Adobe Dreamweaver
certification. English language arts are
reinforced.

ADOBE Digital DESIGN II 432X0A

Credential Exam: Adobe Dreamweaver

Web Developer, Graphic
Designer, Content
Developer

Styling the Body

EXAMPLE
Results

Exceptions

Any style you see
inside this page will
apply to every
element on the page/website.

If the element has its
own rule set listed on
the page, the
element’s rule set
takes precedence.

body {
text-align: center;
color: blue;
}

This would make all text on the page blue and centered

Multiple Choice

Which elements of a page will the body styles apply to?

• background

• page

• every element that doesn't have it's own rules set listed

• All elements even if they have their own rule set listed

Multiple Choice

Which elements to body styles apply to?

• Text

• All elements (HTML tags) on the page that have no other

• Images

• Headings

background-color

●

Sets the background color of an element

●

Can set the whole page's background color or can highlight text.

●

Examples:
○

body{
background-color: purple;
}

○

p {

background-color: yellow;

}

Multiple Choice

Which tag can the background-color style be used in?

• body

• p

• h2

• ALL elements can have a background color

Border-Style

Results

Important Note

The border-style options are to
the far left. The code that utilizes
these options is to the right of
the results examples.

You MUST set the
border-style before
any other styles can
be applied to the
border

Other Border Styles

EXAMPLE

border-color

border-width

This changes the color
of the border around
the element. In this
case, a paragraph.

This determines how
thick the border will
be around the
element. In this case a
paragraph.

In this example, a blue border that is 25 pixels in
thickness is created around the paragraph.

Multiple Choice

Which style MUST be applied first when using border styles?

• Border width

• Border Color

• Border Styles

• It's not really important which comes first

Other Elements

height: 100;

sets the height of an element. In this

case the height is set to 100px.

width:100;

sets the width of an element. In this

case the width is set to 100px.

float: right;

places an element on a particular

side of the page. In this case, it
places it on the right side of the

page.

​Best Used in rulesets for text elements or images

Multiple Choice

What does the float element do?

• It moves the element around the page very slowly

• It raises the element higher

• The element moves vertically up the page

• It places the element to the left, right, or center of the page

margin

●

generates space around the element

●

Can set the whole pages background color or can highlight text.

●

Examples:
○

p {
margin: 35px;
}

Multiple Choice

What does the margin style do?

• Creates space at the sides and top and bottom of a page

• allows for a certain amount of error in your coding

• creates space around the element

• None of the above

CREDITS

This presentation template is free for

everyone to use thanks to the following:

SLIDESCARNIVAL

PEXELS

for the presentation template

for the photos