Scribd Logo
Upload

Welcome to Scribd!

  • Another 1 CSS Reviewer

    Uploaded by

    Jana Rubenecia
    5 views6 pages

    Original Title

    Another-1-CSS-Reviewer

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views6 pages

    Another 1 CSS Reviewer

    Uploaded by

    Jana Rubenecia

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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