Scribd
Upload
21 views

Another 1 CSS Reviewer

CSS (Cascading Style Sheets) is a language used to describe the presentation and formatting of HTML documents. It allows for improved website presentation, easier updates, faster page loading, and increased accessibility. CSS uses selectors to target HTML elements and applies declarations in the form of property-value pairs to style those elements. Common CSS concepts include the cascade, specificity, inheritance, and media queries.

Uploaded by

Jana Rubenecia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

Another 1 CSS Reviewer

CSS (Cascading Style Sheets) is a language used to describe the presentation and formatting of HTML documents. It allows for improved website presentation, easier updates, faster page loading, and increased accessibility. CSS uses selectors to target HTML elements and applies declarations in the form of property-value pairs to style those elements. Common CSS concepts include the cascade, specificity, inheritance, and media queries.

Uploaded by

Jana Rubenecia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

MODULE 2: INTRODUCTION TO CSS rules by specifying groups of

REVIEWER styles that should be applied to


a particular element or group of
elements on our web page.
CSS (or Cascading Style Sheet) A CSS ruleset, or style rule,
represents a structured
 Is a style sheet language declaration specifying the
used to describe the styling instructions to be
presentation of a document applied to an individual or group
written in HTML and XML. of elements on a web page.
WHY IS CSS IMPORTANT IN WEB A CSS ruleset is composed of the
DEVELOPMENT? following:
 Improved Website  Selector (div,
Presentation p, .container)
o CSS can be used to o This defines which
change the font, color, element within the
size, layout of text, document is to be
and the colors and affected by the rules.
images used in a web  Curly braces ({})
page.
o This serves the purpose
 Makes updates easier and of enclosing and
smoother defining a block of
o CSS is usually a styling instructions
separate file from an for specific element(s)
HTML file, so changes targeted by the
to the CSS file do not selector.
affect the HTML file.
 Helps web pages load faster  Declarations (color: red😉
o CSS can be used to o These are
minify the code, which property/value pairs
can help web pages load that define the style/s
faster. that will be applied to
 Increases accessibility an element selected
o CSS can be used to make using a selector.
websites more  Comments (/* this is a
accessible to people comment */)
with disabilities. o Comments in CSS, just
 Allows for greater like any other
creativity languages, are used to
o CSS gives web document, explain, or
developers a lot of debug a CSS
creative freedom. declaration, or
Separation of Concerns (SoC)is a rulesets.
software design principle that INLINE CSS. Inline CSS is a way
advocates modularizing code into to apply styles to HTML elements
distinct sections, each directly within the HTML code.
responsible for a specific task.
INTERNAL CSS. Internal CSS is a
CSS Syntax. CSS is a rule-based way to define styles for an HTML
language, meaning, we define the
document within the <head> condition. Pseudo-classes begin
section of the document. with a colon (:) followed by the
name of the pseudo-class
SELECTORS, are used to target
(:hover).
HTML element(s) on web pages that
we want to style. Pseudo-elements are similar to
pseudo-classes but allow us to
SELECTOR LIST. If there is more
select and style only a part of
than one selector that uses the
the element rather than the whole
same CSS then the individual
element itself. They begin with a
selectors can be combined to
double colon (::) followed by the
create a selector list so the
name of the pseudo-element.
rule is applied to all of the
individual selectors. Combinators. These selectors are
used to combine other selectors
TYPES OF SELECTORS
to target elements within the
 TYPE SELECTORS. document.
o (also called element Descendant Combinators
selectors) select and (Whitespace). These combinators
apply styles to all select elements that are
instances of a specific descendants of a specified
HTML element on a web element.
page.
 CLASS SELECTORS. Child Combinators (>). Child
o Are used to select an combinators select elements that
HTML element based on are the direct children of a
the value of the specified parent element. A child
element’s class combinator is represented by the
attribute. greater-than symbol (>).
 ID SELECTORS. Adjacent Sibling Combinator (+).
o Are similar to class This combinator selects elements
selectors, the only that are immediately preceded by
difference is that a specified element. The adjacent
instead of selecting sibling combinator is represented
HTML elements based on by the plus sign(+).
the value of their
class attribute, ID General Sibling Selector. These
selectors select HTML combinators select elements that
elements based on the are siblings of a specified
value of their ID element and share the same
attribute. parent. The general sibling
combinator is represented by the
 ATTRIBUTE SELECTORS.
tilde symbol (~).
o With attribute
selectors, you can OTHER BUILDING BLOCKS OF CSS
easily select specific
Cascade. At a basic level,
HTML elements based on
stylesheets cascade, meaning that
the presence of their
the source, order, and cascade
attribute or value.
layer of CSS rules are important.
PSUDO-CLASSES. Pseudo-classes are
special selectors that allow us
to define the style of an HTML
element based on its state or
Specificity. The algorithm that Inheritance. CSS inheritance
determines which property value involves passing down specific
is applied to an element on a property values of an HTML
browser is called specificity. element to its child elements
within the document’s structure.

 Element selectors are less Here are the key aspects of


specific because they will inheritance in CSS:
select all elements of that
 Inherited Properties: some
type that appear appear on a
CSS properties are
page, so they carry less
designated as “inherited.”
weight.
o Common inherited
 Pseudo-element selector have properties include
the same weight as regular font-family, font-size,
element selectors. font-weight, color,
 Class selectors are more line-height, and text-
specific because they will align.
select only the elements on  Non-inherited Properties: On
a page that have a specific the other hand, some CSS
class attribute, so they properties are “Non-
carry more weight. inherited.”
 Attribute selectors and o Non-inherited
pseudo-classes have the same properties include
weight as a class. background-color,
 TYPES OF CSS BEING USED ALSO border, margin,
HAS SPECIFICITY. padding, and width.
o External CSS has the  Specificity and Cascade: the
lowest specificity, inheritance mechanism works
which means that the in conjunction with
styles it defines would specificity and cascade (CSS
be given the least specificity and order of
priority and would not appearance) rules.
be applied if either an  Inherit Keyword: you can
internal CSS or an explicitly make an element
inline style were to be inherit a particular
applied. property’s value using the
o Inline style has the inherit keyword in your CSS.
highest specificity, For example, font-size:
which means that the inherit, will ensure that
styles it defines will the font-size of an element
always be applied to an is the same as its parent.
element regardless of
the existence of any MEDIA QUERIES allow us to specify
styles defined in different CSS rulesets for
either an external or different media types and
internal CSS. conditions.
o Internal CSS, its
priority is higher than  Here are the most common
external CSS but lower media types used in media
than the inline style. queries:
o Screen
o print
o speech such as normal, bold, and
o all lighter.
Line-height. The line-height CSS
property sets the height of a
line box.
COMMON CSS PROPERTIES AND VALUES
Text Align. The text-align CSS
Color properties property sets the horizontal
alignment of the inline-level
Color. The color CSS property content inside a block element or
sets the foreground color values table-cell box.
of an element’s text and text
decorations.  Possible values for the
text-align property are:
Background-color. This property
o Start
sets the background color of an
o End
element.
o Left
Border-color. Specifies the color o Right
of the border o Center
o Justify
Opacity. This can be used to
adjust the transparency of an LAYOUT AND BOX MODEL
element. Its value can range from
Width and Height. The width and
0 to 1(default).
height properties are used to set
COLOR VALUES. There are different the dimensions of the element.
values we can assign to color
Margin. is a space between an
properties, these values can
element and its surroundings.
include color values, RGB, HSL,
etc. Padding. is the space between an
element's border and its content.
 Hexadecimal colors
 RGB colors Border. The CSS border properties
 RGBA colors allow us to specify the style,
width, and color of an element's
 HSL colors
border. The three main border
 HSLA colors properties are:
 Color names
 border-width: This property
TYPOGRAPHY specifies the width of the
Font-family. This property sets border. It can be specified
the fonts that the web page will in any CSS unit, such as
use when rendering texts in the pixels, points, or ems.
browser.  order-style: This property
specifies the style of the
Font-size. The CSS font-size border. It can be set to one
property is used to specify the of the following values:
size of the font. o Solid
Font-weight. he CSS font-weight o Dashed
property specifies the weight of o Dotted
the font. The font-weight can be o Double
specified using a numeric value o None
from 100 to 900 or using keywords  border-color: This property
specifies the color of the
border. It can be specified constrained to fit the available
in any CSS color value, such space.
as hex, RGB, or HSL.
Background-position. the
background-position CSS property
sets the initial position for
each background image.
Display. The CSS display property
BORDER AND SHADOWS
specifies the display type of an
element. It can be used to make Border-width. This can be used to
an element visible, or hidden, or set the width of the element’s
to display it in a specific way. borders. It can take up to 4
values each value pertains to the
Position. The CSS position
top, right, bottom, and left side
property specifies the type of
of the element.
positioning method used for an
element. Border-style. this property is
used to set the style of the
Float. The float CSS property
border. This property is also a
places an element on the left or
shorthand for border-top-style,
right side of its container,
border-right-style, border-
allowing text and inline elements
bottom-style, and border-left-
to wrap around it.
style.
Clear. The clear CSS property
Box-Shadow. The box-shadow
determines whether an element
property adds a shadow effect
should be positioned below
that surrounds the element. This
(cleared) floating elements that
property, depending on the
appear before it in the document
presence of the inset keyword,
flow.
would give off the illusion of
Box-Sizing. The box-sizing CSS either making the element float
property sets how the total width (without the inset) or giving
and height of an element are depth to the element (with the
calculated. inset).

BACKGROUND AND IMAGES LISTS

Background-Image. The CSS List-style-type. This property is


background-image property sets used to change the marker used by
one or more background images on the list (such as disc,
an element. character, number, Roman numeral,
or custom counters).
Background-Repeat. The
background-repeat CSS property List-style-image. This can be
sets how background images are used to set the marker used by
repeated. A background image can the list into an image. This
be repeated along the horizontal property requires a URL to an
and vertical axes, or not image.
repeated at all.
TEXT STYLES
Background-size. The background-
Text-decoration. This property is
size CSS property sets the size
a shorthand that can be used to
of the element's background
set the decorative lines on text.
image. The image can be left to
These include its color, line
its natural size, stretched, or
(none, underline, overline, line-
through, blink), style (solid,
double, dotted, dashed, or wavy),
and thickness (concrete values
(px, pt, cm, etc.), relative
values (em, rem, etc.), or based
from a font (from-font value)).
TRANSITION AND ANIMATION
Transition. This property is used
to add transition effects to
elements. Basically what this
does is to add an animation that
will be displayed when the state
of an element changes like its
width.
Animation. The animation
shorthand CSS property applies an
animation between styles. It is a
shorthand for animation-name,
animation-duration, animation-
timing-function, animation-delay,
animation-iteration-count,
animation-direction, animation-
fill-mode, animation-play-state,
and animation-timeline.
RESPONSIVE DESIGN
@Media. The @media CSS at-rule
can be used to apply part of a
style sheet based on the result
of one or more media queries.
Max-width. The max-width CSS
property sets the maximum width
of an element. It prevents the
used value of the width property
from becoming larger than the
value specified by max-width.
Max-Height. The maximum height
property is similar to the max-
width property, in that it sets a
limit on the size of an element.

You might also like