Cascading Style Sheet Flashcards
used to control the style of a web document in a simple and easy way.
CSS (Cascading Style Sheet)
CSS is the acronym for?
Cascading Style Sheet
Enumerate the key advantages of learning css:
- Create stunning website
- Become a web designer
- Control Web
- Learn Other Languages
- CSS handles the look and feel part of a web page.
- Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used and others
Create Stunning Website
If you want to start a career as a professional web designer, HTML and CSS designing is a must skill
Become a web designer
- CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document.
- Most commonly, CSS is combined with the markup languages HTML or XHTML.
Control web
Once you understands the basic of HTML and CSS then other related technologies like javascript, php, or angular are become easier to understand.
Learn other languages
What is the output of this?
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
h1 {
color: red;
}
</style></head>
<body>
<h1>Hello World!</h1>
</body>
</html>
” Hello World! “ ( the text color is red)
Enumerate the application of css:
- CSS saves time
- Easy Maintenance
- Pages load faster
- Superior styles to HTML
- Multiple Device Compatibility
- Global web standards
You can write CSS once and then reuse same sheet in multiple HTML pages.
CSS saves time
To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
Easy maintenance
If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
Pages load faster
- CSS has a much wider array of attributes than HTML,
- Give a far better look to your HTML page in comparison to HTML attributes.
Superior styles to HTML
Style sheets allow content to be optimized for more than one type of device.
Multiple Device Compatibility
- HTML attributes are being deprecated and it is being recommended to use CSS.
- start using CSS in all the HTML pages to make them compatible to future browsers.
Global web standards
an HTML tag at which a style will be applied.
selector
A type of attribute of HTML tag which cover all the HTML attributes are converted into CSS properties.
Property
assigned to properties. An example is color property can have value either red
Values
syntax of CSS rules:
selector { property: value }
syntax that selects all the elements in a document
*{ color:red;}
selects all the elements in a document
Universal Selector
syntax that selects all elements that match selector
ul {color:red; }
Selects all elements that match selector
Type selector
syntax selects elements whose id attribute’s value matches the selector
intro { color=red; }
Selects elements whose id attribute’s value matches the selector
ID selector
Selects elements whose class attribute’s value matches the selector.
Class selector
syntax that applies to all elements whose class attribute’s value is “side”
.side { color-red; }
syntax that applies to all <p> elements whose class attribute’s value is “side.”
p.side { }
selector Selects elements whose class attribute’s values match the selector.
Multiple class
syntax that applies to all elements whose class attribute values are “side front back.“
.side,.front,.back { }
Selects an element that is a descendant of another specified element.
Descendant selector
syntax that selects an element that is a descendant of another specified element.
div p { color-red; }
Selects an element that is a direct child of another specified element
Child Selector
Syntax that applies to only <p> elements that are direct children of a <div> element.
div> p{color-red}
Selects an element that is the next sibling of another element.
Adjacent sibling selector
syntax that applies to only the first <p> element after an <h3> element.
h3+p { color-red; }
Selects an element that is a sibling of another element.
General sibling selector
syntax that applies to all <p>elements that are siblings of an <h3> element.
h3~p { color-red; }
Selects an element that has a specified attribute or an attribute-value pair.
Attribute selector
syntax that applies to all <em> elements with a “lang” attribute.</em>
em(lang) { color-red; }
select elements based on name, id, class
Simple Selectors
select and style a part of an element
Pseudo-elements selectors
select elements based on a certain state
Pseudo-class selectors
select elements based on an attribute or attribute value
Attribute selectors
select elements based on a specific relationship between them
Combinator selectors
TRUE OR FALSE
- The element selector selects HTML elements based on the element name.
-Here, all <p> elements on the page will be center-aligned, with a red text color:
True
the id attribute of an HTML element to select a specific element.
CSS id selector
The id of an element is unique within a page, so the id selector is used to select one unique
element!
ID SELECTOR
To select an element with a specific id, write a _________ character, followed by the id of the
element.
hash (#)
selects HTML elements with a specific class attribute.
Class selector
select elements with a specific class, write a period (.) character, followed by the class name.
Class Selector
selects all the HTML elements with the same style definitions.
CSS grouping selector
what is the comment for CSS
/* and ends with */
True or False
- You can add comments to your HTML source by
using the <!--...--> - a combination of HTML and CSS comments:
True
- are coded in the body of the web page as an attribute of an HTML tag.
- The style applies only to the specific element that contains it as an attribute
Inline Styles
- Theses are coded in a separate text file.
- This text file is associated with the web page by configuring a link element in the head section.
External Styles
- also referred to as internal styles) are defined within a style element in the head section of a web page.
- These style instructions apply to the entire web page document.
Embedded styles
What kind of configuring cascading styles sheets is this?:
<!DOCTYPE html>
<html>
<body>
<p>CSNHS Web Programming</p>
<p>Senior High School</p>
</body>
</html>
Inline Styles
Enumerate the configuring cascading styles sheets
- Inline styles
- External styles
- Embedded styles
- Imported
second {
What kind of configuring css is this?
HTML :
«!DOCTYPE html>
<html>
<link></link>
<body>
<p>CSNHS Web Programming</p>
<p>Senior High School</p>
</body>
</html>
CSS:
#first {
font-size: 40px;
color: green;
text-align: center;
}
font-size: 30px; color: red; }
External Styles
CSS properties are saved in a separate text file with an extension of .css and is referenced from an HTML document using the <link></link> tag inside the head section.
External css
syntax for external css link?
<link></link>
the value of the rel attribute is?
stylesheet
The value of the href attribute is the _______ of the style sheet file.
name
The value of the type attribute is __________, which is the MIME type for CSS.
“text/css”
What is the cascade (rules of precedence) ?
Browser defaults
|
external styles
|
embedded styles
|
inline styles
|
HTML attributes
colors can also be specified using the _____________.
RGB values
- The formula is rgb(regreen, blue).
- The parameter – red, green and blue has values from 0 to 255 which defines theintensity of the color.
RGB value
- this is an extension of the RGB color values.
- A stands for alpha channel is used to specify the opacity for a color.
- The value of A ranges from 0.0 (fully transparent) and 1.0 (not transparent at all)
RGBA value
- The color value can also be specified using a hexadecimal value with the form #RRGGBB. RR, GG and BB stands for red, green and blue respectively.
- It is expressed in hexadecimal values from 00 to ff.
HEX value
- color can be specified using hue, saturation, and lightness (HSL). The formula for this is hsl(hue, saturation, lightness).
- Hue value is from 0 to 360 which is the degree on the color wheel. Saturation and lightness are
HSL value
TRUE OR FALSE
CSS RGB Color
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255)
and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255)
TRUE
- an extension of RGB color values with an alpha channel – which specifies the opacity for a color.
- color value is specified with: rgba(red, green, blue, alpha)
-The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
RGBA value
- a color can be specified using a hexadecimal value in the form:
- # rrggbb where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
- For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and theothers are set to the lowest value (00).
HEX value
- a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness) - Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
- Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
- Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
HSL colors
- can be described as the intensity of a color.
- 100% is pure color, no shades of gray
- 50% is 50% gray, but you can still see the color.0% is completely gray, you can no longer see the color.
Saturation
this property specifies the background color of the element
background-color
syntax for background-color?
h1 {
background-color:green;
}
this property specifies an image to use as background of an element. When used, the image is repeated by default to cover an entire element
background-image
Syntax for background-image?
body {
background-image:url(“sample.jpg”);
}
a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white)
Lightness
By default, the background-image property will repeat a background image to fill up the space allotted to the element.
background-repeat
To prevent or control how the image will be repeated, background-repeat property is used.
background-repeat
Repeat the image horizontally only
repeat-x
Repeat the image vertically only
repeat-y
Disable repetition of image both horizontal and vertical.
no-repeat
this property specifies the position of the background image. By default, an image s positioned at the top left corner of the page.
background-position
syntax for background-position?
body {
background-image: url(“paper.jpg”);
background-repeat: no-repeat;
background-position: right top;
}
Changing this position using the possible values such as left center, left bottom, right center, right top, right bottom, center center, center top and center bottom
background-position
this property specifies the background image if it should be scrolled or fixed. The values for this property could either be scroll or fixed.
background-attachment
True or False
CSS provides a shorthand notation in specifying the background. The shorthand property will follow an order of property values. The order would be color, image, repeat, attachment and lastly, position
True
this property specifies the color of the text.
color
- this property specifies the horizontal alignment of a text. Its valid values are right, left, center and justify.
- By default, the value of this property is left aligned when text direction is left-to-right, and right aligned when text direction is right-to-left. For a justified text, each line is stretched to have an equal width for each line.
text-align
To change the vertical alignment of the element, this property is used. Its valid values could be top, middle or bottom.
vertical-align
-this property specifies the text decoration of the text.
text-decoration
A link, by default, has an underline in the text. To remove it, ________________________ is used
text-decoration:none;
This property is used to set the indention of the first line of the text.
text-indent
True or False
The value of text-indent can be negative. If it is negative, then the first line will be indented to the left.
True
The space between the character of the text can be set using this property.
letter-spacing
This property will set the space between the line of text.
line-height
The space between the words in a text can be set by this property.
word-spacing
This property adds shadow to text. It can be used by specifying the horizontal shadow and the vertical shadow. The color and blur effect can also be added. This values are specified in order: horizontal shadow, vertical shadow, blur effect and color.
text-shadow
This property sets the font family.
font-style
True or False
It is recommended to have several font names in the font-family property. This is in the case that the first declared font family is not supported by the user’s browser, the second font will be used.
True
True or False
To have more than one font family, each font will be separated by a comma. You can start specifying the font you want, and end with a generic family, in case there are no other fonts available.
True
To specify an italic text, this property is used.
font-style
enumerate the 3 values of font-style
- normal which is the default
- italic for italicized text,
- oblique which is very similar to italic, but less supported.
This property sets the weight of a font. Some valid values are normal, bold, bolder and lighter.
font-weight
This property sets the size of the text.
font-size
What is the difference between the absolute length and relative length?
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size while the Relative length units specify a length relative to another length property.
Common units of the font size include px, em, %, in, cm, mm and pt. The px, in, cm, mm and pt are ____________ _______units.
absolute length
On the other hand, em and % are _______ _________ units which specify its length depending on another length property.
relative length
a font that is identified by name, such as Times New Roman or Helvetica, and based on a font definition file that is stored on the user’s computer or accessible on the web.
Specific font
describes the general appearance of
the characters in the text but does not specify any particular font definition file.
Generic font
a typeface in which a small ornamentation appears at the tail end of each character
Serif
- xx-small, x-small, small, medium (default), large, x-large, xx-large
-Scales well when text is resized in browser; limited options for text size
Text Value
-Numeric value with unit, such as 10 px
- Pixel-perfect display depends on screen resolution; may not scale in every brow-ser when text is resized
Pixel Unit (px)
-Numeric value with unit, such as 10 pt
-Use to configure print version of web page; may not scale in every browser when text is resized
Point Unit (pt)
-Numeric value with unit, such as .75 em
-Recommended by W3C; scales well when text is resized in browser; many options for text size
Em Unit (em)
-Numeric value with percentage, such as 75%
-Recommended by W3C; scales well when text is resized in browser; many options for text size
Percentage Value
-it is used to specify the color of the border.
-It is also possible to change the individual color of the border (top, bottom, left and right).
- To do this, the property border-bottom-color, border-top-color, border-leftcolor and border-right-color are used.
-Like other border properties, it has longhand versions for specifying colors of individual edges, which are border-top-color, border- right-color, border-bottom-color, and border-leftcolor
borfer-style
the style of border can also be changed. Normally, the value solid is used since it creates a single solid line border.
border-color
True or False
But there are a lot of values that can be used for border-style. It could be none (no border), dotted (series of dots), dashed (series of short lines), double (two solid lines) and many more. Just like border-color, it is also possible to change the style of each side of the border
True
- it specifies the width of an element border. The value of this property can be set in using length (px, pt or cm) or set to thin, medium or thick.
- The longhand properties are border-top-width, border-right-width, border-bottom-width, and border-left-width
border-width
Application of Value: Value is assigned to all four edges.
Number of Value: 1
Application of Value: First value is assigned to top and bottom, and second value is assigned to right and left.
Number of Value: 2
Application of Value: First value is assigned to top, second to right and left, and third to bottom.
Number of Value: 3
Application of Value: First value is assigned to top, second to right, third to bottom, and fourth to left.
Number of Value: 4
The space between the content of the element and its border is the ________
Padding
set how much this space should appear in the page. The shorthand property works the same as the shorthand property of margin. It is also possible to change the padding individually.
Padding
Values of the Shorthand border-six
defines the top padding of an element.
padding-top
Values of the Shorthand border-six
defines the left padding of an element.
padding-left
Values of the Shorthand border-six
defines the top padding of an element.
padding-top
Values of the Shorthand border-six
defines the bottom padding of an element.
padding-bottom
sets the space around an HTML element. This property can have a negative value which will result in overlapping of content.
margin
True or False
Margin will not be inherited by the child element. A shorthand property of margin can be used to set in one declaration the top, right, bottom and left margin, in this particular order. The auto value of this property will automatically set the margin left and right of the element equally.
True
True or False
The auto keyword leaves it to the browser to determine margin values as it sees fit.
True
defines the top padding of an element.
margin -top
defines the left padding of an element.
margin -left
defines the top padding of an element.
margin-top
a container that wraps around an HTML element. It contains the properties such as borders, margin, padding and the content of the element itself.
CSS box model
True or False
Every element in an HTML document is rendered by a web browser as a rectangular box based on the CSS box model. The CSS box model is a container that wraps around an HTML element. It contains the properties such as borders, margin, padding and the content of the element itself. This model is used to customize the layout of each element
true
