TLE 7 - 4Q L11 L2

LESSON 1: Cascading Stylesheets & Defining Styles

​ (a)   are a stylesheet language used to define how HTML elements are presented in the page.​

CSS discourages the use of ​ (b)   including those you learned in your previous topics.

The ​ (c)   used in the web today is CSS Level 3. ​

​ (d)   may be defined in three ways: inline, internal, and external.

The style definition is also called a ​ (e)  

• CSS
• formatting tags
• current version
• Styles
• style rule.

A style defined inside a tag using the ​style attribute .​ ​ - ​ (a)  

Example:

<p style=“font-family: verdana;”>The font used in this text is Verdana</p>​

A style defined in the head of the ​HTML document . - ​ (b)  

A style sheet defined in a separate file. - ​ (c)  

The extension name that is used in ​ (d)  

• inline style
• internal stylesheet
• external stylesheet
• .css

EXTERNAL STYLESHEET

(1) tag is omitted in HTML document. Instead, the (2) tag is used.

Comments in a CSS file starts with (3) and ends with (4).

• 1

• 
• 3

• 
• 2

• 
• 4

• 

The <link> tag has the following attributes:

​ (a)   - defines the relationship of the linked file.

​ (b)   - defines the content type of the data in the file.

​ (c)   - defines the URL of the CSS file.

• rel
• type
• href

LESSON 2: CSS-SELECTORS

​ (a)   are used in CSS to indicate which HTML element, attribute, or value is “selected” to apply a design with.

There are ways of choosing or indication which and how elements are to be styled. The example below is called a ​ (b)   .

p { color: red; }​

You may also set a multiple style definitions for an element using the ​ (c)   class and id.

A ​ (d)   is created by adding a period and a name of your choice to name a class. 

An​ (e)   is created the same way except that it uses the number sign (#) instead of a period.

• Selectors
• type selector
• global attributes
• class selector
• id selector

A ​ (a)   may be also be created by omitting the tag. This way, you may use the class or id selector in any element that you ​ (b)   .

Moreover, two or more classes may be specified in a​ (c)   .

A universal selector uses ​ (d)   that serves as a wildcard.

​ (e)   - This is used to refer to elements based on the attribute. Use the bracket characters for it.

• generic class or id
• choose
• class attribute
• *(asterisk)
• attribute selector

​ (a)   Are used to set additional effects to selectors and always start with a colon (:).

Using the global attribute ​ (b)   you may also set a multiple style definitions for an element.

A ​ (c)   may be also be created by omitting the tag. This way you may use the class or id selector in any element that you choose.

A ​ (d)   uses *(asterisk) that serves as a wildcard.​

An ​ (e)   is used to refer to elements based on the attribute. Use the bracket characters for it

• Pseudo-Classes selector
• class and id
• generic class or id
• universal selector
• attribute selector

Match the following CSS-SELCTOR

• Pseudo-Classes

• 
• universal

• 
• class and id

• 
• attribute

• 

Match the following

• created the same way except that it uses the number sign (#) instead of a period.

• Pseudo-Classes

• Use the bracket characters for it

• class selector

• created the same way except that it uses the number sign (#) instead of a period.

• id selector

• uses *(asterisk) that serves as a wildcard

• universal selector

• always start with a colon (:)

• attribute selector

• adding a period

  ( . ) and a name of your choice to name a class

Where can we find the link for the css file?

• 
  On the selector of the css file itself

• 
  On Social Media Pages

• On the header tag in our html file

• On the Digital Footprint