2.02-cascading-style

Web Technologies

Beginning Cascading Style Sheets (CSS)

Copyright © Texas Education Agency, 2013. All rights reserved.

1

What are Style Sheets?

 The purpose of HTML is to define content







What the level 1 heading is

What the paragraph is

Sections of the document

 HTML can format the content, but it is restrictive


2

What are Style Sheets?

 Style sheets allow the designer to separate the content and structure from the document’s style and layout

 The HTML document would just define which block of text is a level 2 heading

 The style sheet can

 define what the level 2 heading looks like, the color of the text, etc.

 define where the level 2 heading is placed on the web page


3

The Style Sheet

 The style rule is a single style definition that is applied to one or more elements on your web page

 A style sheet consists of one or more style rules

 A designer can



 create a print style sheet that controls how the web page looks when it’s printed create an additional style sheet that determines how to display the page in a presentation


4

The Style Sheet

 Style sheets can be applied to an entire web site, to a single web page, or an individual element on a web page

 External – Applied to an entire website





Embedded – Applied to a single web page

Inline – Applied to a single page element

 Style sheets are referred to as Cascading

Style Sheets because of their ability to be applied at the three different levels


5

The Style Rule

 External & Embedded Style Sheet





All style rules are going to follow the same basic structure

 selector {property: value; property :value}

Selector – The element in which the style rule is to be applied





Property -- What characteristic you are adding to, or modifying, on the element

Value – What you are changing the property to


6

The Style Rule

 Sample style rule applied to a level 2 heading: h2 {color: #009900; text-align: center}

 If applied as an external style sheet, every level 2 heading in the website would take on this style

 If applied as an embedded style sheet, every level 2 heading on the page would take on this style


7

The Style Rule

 Inline Style Sheet

 Style rules are applied as an attribute to an individual tag

<h2 style=“color: 009900; text-align: center” >





The style would only be applied to the one with the style rule

Can be used to add additional styles or to override an existing style


8

External Style Sheet

 The external style sheet is used to create general styles that are used throughout the entire web site









Background colors

Heading styles

Paragraph styles

Content positioning & layout


9


 The external style sheet is nothing more than a list of style rules to be applied

 There should not be any HTML tags on the external style sheet

 The external style sheet should be saved with the .css

file extension

 Example: myStyle.css


10

External Style Sheet body {background-color: #ff6699} h1 {font-family: Arial; text-align: center} h2 {color: #009900; text-align: center} p {text-align: justify}


11


 Attaching the External Style Sheet

 Your web pages will not automatically know that the style rules on the external style sheet should be applied





You will need to attach the style sheet

The following code should be placed in the heading of your HTML document

<link rel =“stylesheet” href=“myStyle.css” />


12

Embedded Style Sheet

 The embedded style sheet is defined within the heading of a web page

 The styles are only applied to the page containing the style rules

 The style rules are placed in the heading of the document between <style> and </style>


13

Embedded Style Sheet

<html>

<head>

<style> body {background-color: #ff6699} h1 {font-family: Arial; text-align: center} h2 {color: #009900; text-align: center} p {text-align: justify}

</style>


14

Style Properties

 There are specific properties that are used by style sheets

 For the most part, any property can be applied to any tag

 There are exceptions if the tag does not use the property; for example, a font style would have no affect on the img tag

 Look at the property reference guide

 The styles can be grouped by category


15

Font Properties

Property font-family font-variant font-weight font-size

Description

Sets the font of the text, i.e. Arial,

Script, etc.

Allows the text to be set to small-caps or normal

Defines the level of bold that is applied to the text

Specifies the size of the font


16

Background Properties

Property

Background-image

Background-repeat

Background-attachment

Background-position

Description

Imports an image as the background to an object

Will repeat the background along a row or column

Specifies whether a background image scrolls or is fixed

Specifies where the background image is placed on the screen


17

Background Properties background-image: url(backgrnd.gif);

• Used to add a background image to an element

• Will tile the image to fill the entire background background-repeat: repeat-x;

• Specifies how a background image should be repeated

• repeat-x Repeats along a single row

• repeat-y Repeats along a single column

• norepeat Places a background image once

• repeat Repeats as tiles to fill the element background background-position: top;

• Specifies where the background image should be positioned


18

Units of Measure

Percent

Pixels

Inches

50% – Relative size of its parent

10px – Smallest unit of measure

2in, 2.5in

Centimeters 1cm, 1.5cm

Point 12pt – Used by word processors

Millimeters 5mm

Picas 1pc – 1 pica is equivalent to 12pt


19

Content Containers

 The HTML <div></div> tag creates a virtual container onto your webpage







Content can be placed inside the containers

The containers are very easy to manipulate using style sheets

With style sheets, you can

 give the container a specific height & width

 position the container in a specific location on your page


20


 IDs





Each container will be assigned a specific identification style (id)

Each “id” will have a specific style defined in the style sheet

 Example: #myBox1 { }

 Notice instead of a tag name, we are starting with the

# sign and assigning an id name of myBox1

 The style of the myBox1 id will be defined within the curly braces


21


 Assigning the id to a div tag





The ids are assigned to the <div> tag as an attribute

Example: <div id=“myBox1”> </div>

 Notice that the # sign is NOT used when assigning the id

 The # sign is only used when defining the id, so your browser understands that you are defining an id and not a style for a specific HTML tag


22


 Positioning Properties



 position:

Possible Values



 absolute – Specifies that the container should be positioned starting from the screen edge, and other objects should ignore it relative – Specifies that the container should be positioned starting from its natural position, and other objects should act as if it is still in its original location


23


 position: relative;

 Notice only the green box moved from its original position. The red and blue boxes are in their original location.


24


 position: absolute;

 With absolute, the blue box should be repositioned based on the edges of the screen, and the red and blue box should move to the green box’s original position as if it’s not there.


25


 Positioning Properties







 top : how far from the top starting point the container should be placed left : how far from the left starting point the container should be placed width : specifies the width of the container height : specifies the height of the container


26


}

#myBox1 { position: absolute: top: 50px; left: 50px; width: 100px; height: 100px; background-color: #009900;


27


<html>

<head>

<style>

# myBox1 { position: absolute: top: 50px; left: 50px; width: 100px; height: 100px; background-color: #009900;

}

</style>

<head>

<body>

<div id=“ myBox1 ”> </div>

</body>

</html>


28

2.02-cascading-style

Web Technologies

Beginning Cascading Style Sheets (CSS)

Related documents

Products

Support

2.02-cascading-style

Web Technologies

Beginning Cascading Style Sheets (CSS)

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib