CSS Styling: Syntax, Selectors & Including Styles

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

What is the primary function of CSS in web development?

  • Defining the structure of a webpage
  • Managing server-side operations
  • Describing the style of a document (correct)
  • Adding interactivity to a webpage

Inline CSS is applied by writing CSS in a separate document and linking it with an HTML file.

False (B)

In CSS syntax, what does the 'selector' refer to?

the HTML element to be styled

The CSS property used to set the color of text is called ______.

<p>color</p>
Signup and view all the answers

Match the color code with its representation in web design:

<p>RGB = Uses numbers to defines colors Hex = Uses hexadecimal numbers to defines colors</p>
Signup and view all the answers

Which of the following selectors targets all elements on a webpage?

<ul> <li>(B)</li> </ul>
Signup and view all the answers

The text-align property in CSS can only be used to align text to the left, right, or center.

<p>True (A)</p>
Signup and view all the answers

What CSS property is used to add a line above, below, or through text?

<p>text-decoration</p>
Signup and view all the answers

The CSS property that controls the boldness of the text is known as ______.

<p>font-weight</p>
Signup and view all the answers

Match the font family with its correct description:

<p>Serif = Fonts that have small lines or strokes attached to the end of a stroke in a letter Sans-serif = Fonts do not have the small lines or strokes attached</p>
Signup and view all the answers

How many 'pixels' are in one 'inch'?

<p>96px (A)</p>
Signup and view all the answers

The default value for the CSS line-height property is always specified in pixels.

<p>False (B)</p>
Signup and view all the answers

What CSS property can be used to convert text to uppercase or lowercase?

<p>text-transform</p>
Signup and view all the answers

The CSS box model includes margin, border, padding and ______.

<p>content</p>
Signup and view all the answers

Match the description to each of the components of the CSS box model:

<p>Margin = The outermost layer, creating space around the element Padding = Creates the space inside the element</p>
Signup and view all the answers

By default, what area does the CSS height property set?

<p>Content area (C)</p>
Signup and view all the answers

The CSS property border-radius is used to create dashed or dotted borders around an element.

<p>False (B)</p>
Signup and view all the answers

In CSS, what is the shorthand property to assign the following: border-width: 2px, border-style: solid, border-color: black?

<p>border: 2px solid black</p>
Signup and view all the answers

In the CSS box model, the space between the element's content and its border is called ______.

<p>padding</p>
Signup and view all the answers

Match the padding values with what side of the box it represents:

<p>top = 1px right = 2px bottom = 3px left = 4px</p>
Signup and view all the answers

What CSS property is generally used to create space between elements?

<p>Margin (A)</p>
Signup and view all the answers

Setting display: none; and visibility: hidden; on an element will achieve the same result: the element will not be visible on the page, and the space it would have occupied will collapse.

<p>False (B)</p>
Signup and view all the answers

In CSS, what does the property opacity control?

<p>the transparency of an element</p>
Signup and view all the answers

In CSS, to set the background color with transparency using RGBA, the alpha value ranges from 0 to ______.

<p>1</p>
Signup and view all the answers

Match the relative units with its definition:

<p>% = Size relative to an element's parent object em = Font size of the parent rem = Font size of the root element</p>
Signup and view all the answers

Which CSS property is used to control how an element is positioned within its containing element?

<p>Position (B)</p>
Signup and view all the answers

When an element has position: static;, the top, right, bottom, and left properties will still affect its position.

<p>False (B)</p>
Signup and view all the answers

In CSS, what does the term 'stack level' refer to?

<p>z-index</p>
Signup and view all the answers

The CSS property used to set an image as the background of an element is called ______.

<p>background-image</p>
Signup and view all the answers

Match the background-size property to its definition:

<p>cover = Scales the image as large as possible without stretching it contain = Scales the image to fit within the content box auto = The background image is displayed at its actual size</p>
Signup and view all the answers

What term describes a one-dimensional layout method for arranging items in rows or columns?

<p>Flexbox (C)</p>
Signup and view all the answers

In Flexbox, flex-direction: row; arranges flex items vertically by default.

<p>False (B)</p>
Signup and view all the answers

Name a property in Flexbox used to align items along the main axis.

<p>justify-content</p>
Signup and view all the answers

The Flexbox property used to control the alignment of items on the cross axis is called ______.

<p>align-items</p>
Signup and view all the answers

Match the Flexbox property for a flex item with its description:

<p>align-self = Alignment for a flex item flex-grow = A flex box grows relative to other flex items flex-shrink = A flex box shrink relative to other flex items</p>
Signup and view all the answers

What is the purpose Media Queries in CSS?

<p>Making a website responsive (B)</p>
Signup and view all the answers

CSS Transitions allow you to change property values instantly and without any animated effect.

<p>False (B)</p>
Signup and view all the answers

Name a property that could be applied to the CSS transition-timing-function.

<p>ease-in</p>
Signup and view all the answers

In CSS, transform: rotate(45deg); will ______ an element by 45 degrees.

<p>rotate</p>
Signup and view all the answers

Match the different CSS Transform functions with its description:

<p>scale = Scales the box translate = Translates the box skew = Skew the box</p>
Signup and view all the answers

Flashcards

What is CSS?

A language used to describe the style of a document.

CSS basic syntax

The basic syntax consists of a selector, property, and value.

External Stylesheet

Writing CSS in a separate document and linking it with an HTML file.

Color Property

Sets the color of an element's foreground text.

Signup and view all the flashcards

Background Color Property

Sets the background color of an element.

Signup and view all the flashcards

What is RGB?

A color system using values for red, green, and blue.

Signup and view all the flashcards

Hexadecimal Color

A color system using hexadecimal values.

Signup and view all the flashcards

Universal Selector

A selector that applies styles to all elements.

Signup and view all the flashcards

Element Selector

Targets HTML elements directly.

Signup and view all the flashcards

Class Selector

Targets elements with a specific class attribute.

Signup and view all the flashcards

text-align

Defines the horizontal alignment of text inside an element.

Signup and view all the flashcards

text-decoration

Adds decorations like underlines or overlines to text.

Signup and view all the flashcards

font-weight

Specifies the weight (boldness) of the font.

Signup and view all the flashcards

font-family

Specifies the font family for an element's text.

Signup and view all the flashcards

Generic font families

Generic font families are determined by font family properties.

Signup and view all the flashcards

CSS Width

The width of the content area.

Signup and view all the flashcards

CSS Height

The Height of the content area.

Signup and view all the flashcards

CSS Border

Sets the width, style, and color of an element's border.

Signup and view all the flashcards

border-radius

A shorthand property to set the radius of an element's corners.

Signup and view all the flashcards

CSS Padding

Space between the element's content and its border.

Signup and view all the flashcards

CSS Margin

Space around the outside of an element.

Signup and view all the flashcards

Display Property

Determines if an element is displayed as an inline element or block-level element

Signup and view all the flashcards

CSS Visibility

Hides or shows an element without affecting layout.

Signup and view all the flashcards

CSS Alpha Channel

Applies transparency to an element, making it see-through

Signup and view all the flashcards

Relative CSS units

Units that are relative to another length.

Signup and view all the flashcards

Percentage unit (%)

Defines a size relative to an element's parent object.

Signup and view all the flashcards

Em

Defines a size relative to the parent font size of the element.

Signup and view all the flashcards

What is Rem?

Defines a size relative to the root element's font size

Signup and view all the flashcards

CSS Position

Specifies the type of positioning method used for an element.

Signup and view all the flashcards

CSS static position

Default position; elements are positioned in the normal flow.

Signup and view all the flashcards

Relative Position

Element is positioned relative to its normal position.

Signup and view all the flashcards

Absolute position

Element is positioned relative to its closest positioned ancestor.

Signup and view all the flashcards

CSS z-index

Determines the stacking order of overlapping elements.

Signup and view all the flashcards

Background Image

Sets an image as the background of an element.

Signup and view all the flashcards

Background Size

Specifies how background images should be resized to fit their container.

Signup and view all the flashcards

CSS Flexbox

A one-dimensional layout method for arranging items in rows or columns.

Signup and view all the flashcards

Flexbox Direction

Sets how flex items are placed in the flex container, along which axis and direction.

Signup and view all the flashcards

justify-content

Alignment along the main axis

Signup and view all the flashcards

align-items

Alignment along the cross axis.

Signup and view all the flashcards

Media Queries

Used to handle responsive pages.

Signup and view all the flashcards

CSS Transitions

Define the switch between various parts of an element.

Signup and view all the flashcards

Study Notes

  • HTML, CSS and Javascript (JS) are fundamental technologies for web development
  • HTML is responsible for the structure/layout of the content
  • CSS is responsible for the styling of the content
  • JS is responsible for the logic and interactivity of the content

CSS - Cascading Style Sheets

  • CSS is a language to describe the style of an HTML document

Basic Syntax

  • CSS syntax consists of a selector, property, and value
  • The selector points to the HTML element you want to style
  • The property is the style attribute you want to change
  • Each property has a value

Including Style

  • Inline styles: Adding styles directly within the HTML element using the "style" attribute, <h1 style="color: red"> Apna College </h1>
  • <style> tag: Defining styles in the <head> section of HTML using the <style> tag, useful for internal CSS.
<style>
 h1 {
  color: red;
 }
</style>
  • External Stylesheet: Writing CSS in a separate document and linking it with the HTML file

Color Property

  • Used to set the color of foreground
  • Example foreground colors: red, pink, blue, green;

Background Color Property

  • Used to set the color of background
  • Example background colors: red, pink, blue, green;

Color Systems

  • RGB: Specifies color using the amount of red, green, and blue
  • Example RGB colors: rgb(255, 0, 0), rgb(0, 255, 0)
  • Hex (Hexadecimal): Specifies color using a hexadecimal value
  • Example Hex colors: #ff0000, #00ff00

Selectors

  • Universal Selector: Selects all elements on the page, e.g., * {}
  • Element Selector: Selects HTML elements based on the element name, e.g., h1 {}
  • Class Selector: Selects HTML elements with a specific class attribute, e.g., .myClass {}
  • Id Selector: Selects an HTML element with a specific id attribute, e.g., #myId {}

Text Properties

  • text-align: Specifies the horizontal alignment of text, values are left / right / center
  • text-decoration: Specifies decorations added to text, values are underline / overline / line-through
  • font-weight: Specifies the weight or boldness of the font, values are normal / bold / bolder / lighter
  • font-family: Specifies the font family for the text, such as arial or roboto

Generic Font Families

  • Generic Font Families: Determined by font family properties like serifs or cursive strokes.
  • Serif: Traditional typefaces with serifs, often used in printed books.
  • Sans-Serif: Fonts without serifs, commonly used in digital formats.
  • Cursive: Fonts with connective strokes, resembling handwriting.
  • Fantasy: Stylized fonts maintaining characteristics of traditional alphabet glyphs.
  • Monospace: Fonts where characters have the same width, resembling a typewriter.

Units in CSS

  • Absolute Units: Represent a fixed measurement.
  • Pixels (px): A common absolute unit, where 96px = 1 inch

Text Properties - line-height

  • line-height: Specifies the height of a line of text.
  • Example values for line-height: 2px, 3, normal

Text Properties - text-transform

  • text-transform: Controls the capitalization of text.
  • Example values for text-transform: uppercase, lowercase, capitalize, none

Box Model in CSS

  • The CSS box model describes the rectangular boxes that are generated for elements in the document tree and used in visual layout.
  • Key parts of box model: Height, Width, Border, Padding, Margin

Height

  • Sets the content area height of an element, for example height: 50px; in CSS set div height

Width

  • Sets the content area width of an element, for example width: 50px; in CSS set div width

Border

  • Used to set an element's border
  • Properties:
  • border-width: Specifies the width of the border, example 2px
  • border-style: Specifies the style of the border, example solid / dotted / dashed
  • border-color: Specifies the color of the border, example black
  • Shorthand property: border: 2px solid black;
  • Used to round the corners of an element's outer border
  • Example border-radius: 10px; or border-radius: 50%;

Padding

  • Used to create space around an element's content, inside of any defined borders.
  • Properties:
  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
  • Shorthand property: padding: 50px; or padding: 1px 2px 3px 4px; /* top | right | bottom | left -> clockwise */

Margin

  • Used to create space around an element, outside of any defined borders.
  • Properties:
  • margin-right
  • margin-left
  • margin-top
  • margin-bottom
  • Shorthand property: margin: 50px; or margin: 1px 2px 3px 4px; /* top | right | bottom | left -> clockwise */

Display Property

  • Specifies the display behavior of an element
  • Available values:
  • inline: Takes only the space required by the element. (no margin/padding)
  • block: Takes full space available in width.
  • inline-block: Similar to inline but we can set margin & padding.
  • none: to remove element from document flow.

Visibility

  • Property: visibility: hidden;
  • When visibility is set to hidden, space for the element is reserved.
  • If display is set to none`no space is reserved for the element

Alpha Channel

  • Opacity: Adjusts the transparency of an element (0 to 1)
  • RGBA: Specifies color with an alpha channel for transparency
  • Example Usage:
  • color: rgba(255, 0, 0, 0.5); // Red with 50% transparency
  • color: rgba(255, 0, 0, 1); // Opaque red

Units in CSS - Relative

  • Relative Units: Measurements relative to another value
  • % - Percentage
  • em
  • rem

Percentage (%)

  • Commonly used to define a size relative to an element's parent object
  • Example usage:
  • width: 33%;
  • margin-left: 50%;

Em Unit

  • Relative to the font size of the parent element
  • Used for typographical properties like font-size. Also relative to the font size of the element itself, in the case of other properties like width.

Rem (Root Em) Unit

  • Relative to the font size of the root element (e.g., <html>)

Others

  • vh: relative to 1% viewport height
  • vw: relative to 1% viewport width

Position

  • The position CSS property sets how an element is positioned in a document
  • Values for position: static / relative / absolute / fixed

Position Values

  • static: Default position, top, right, bottom, left, and z-index properties have no effect
  • relative: Element is relative to itself, top, right, bottom, left and z-index will work
  • absolute: Positioned relative to its closest positioned ancestor (removed from the flow)
  • fixed: Positioned relative to the browser window (removed from flow)
  • sticky: Positioned based on user's scroll position

z-index

  • Decides the stack level of elements, determining which element covers another in case of overlap
  • Elements with a larger z-index cover those with a smaller one
  • Values for z-index: auto (0), 1 / 2 / ..., -1 / -2 / ...

Background Image

  • Used to set an image as the background of an element
  • Example: background-image: url("image.jpeg");

Background Size

  • Specifies how background images should be resized to fit their container
  • Possible values: cover / contain / auto

Flexbox

  • Flexible Box Layout: A one-dimensional layout method to arrange items in rows or columns

The Flex Model

  • Key components include the flex container, flex items, main axis, and cross axis

Flexbox Direction

  • Sets how flex items are placed in the flex container, along which axis, and which direction.
  • Values:
  • flex-direction: row; (default)
  • flex-direction: row-reverse;
  • flex-direction: column;
  • flex-direction: column-reverse;

Flex Properties (for Flex Container)

  • justify-content: Alignment along the main axis
  • Options: flex-start / flex-end / centre / space-evenly / etc.
  • flex-wrap: Controls whether the flex items should wrap or not
  • Options: nowrap / wrap / wrap-reverse
  • align-items: Alignment along the cross axis
  • align-content: Alignment of space between and around the content along cross-axis

Flex Properties (for Flex Item)

  • align-self: Alignment of individual items along the cross axis
  • flex-grow: How much a flex item will grow relative to the rest of the flex items if space is available
  • flex-shrink: How much a flex item will shrink relative to the rest of the flex items if space is available

Media Queries

  • Help create a responsive website that adapts to different screen sizes and devices.
  • Example:
@media (width: 600px) {
 div {
  background-color: red;
 }
}
  • This CSS rule applies only when the screen width is exactly 600px and sets the background color to red for all div elements

Transitions

  • Transitions enable you to define the transition between two states of an element.
  • Properties:
  • transition-property: The CSS property you want to animate (e.g., font-size, width, etc.).
  • transition-duration: Specifies how long the transition should take (e.g., 2s or 4ms).
  • transition-timing-function: Specifies the acceleration curve of the transition. Common values are ease-in, ease-out, linear or steps.
  • transition-delay: Specifies a delay before the transition starts (e.g., 2s or 4ms).
  • Shorthand: transition: font-size 2s ease-in-out 0.2s;

CSS Transform

  • CSS Transform: used to apply 2D & 3D transformations to an element
  • Transform functions:
  • rotate: Rotates element
  • Example transform: rotate(45deg);
  • scale: Increase or decrease the size of the element
  • Example transform: scale(2);, transform: scale(0.5), transform: scale(1, 2);
  • It is also possible to use scaleX and scaleY to specify the direction
  • translate: Moves an element relative to its current position
  • Example transform: translate(20px);, transform: translate(20px, 50px)
  • It is also possible to use translateX and translateY to specify the direction
  • skew: Skews an element in 2D space.
  • Example transform: skew (30deg);

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

CSS Tutorial by Apna College

More Like This

CSS Syntax and Selectors Quiz
4 questions

CSS Syntax and Selectors Quiz

PleasingGreatWallOfChina avatar
PleasingGreatWallOfChina
Understanding CSS Syntax
4 questions

Understanding CSS Syntax

PleasingGreatWallOfChina avatar
PleasingGreatWallOfChina
CSS Overview and Syntax
42 questions

CSS Overview and Syntax

EasygoingReal7326 avatar
EasygoingReal7326
CSS: Syntax and Selectors
10 questions

CSS: Syntax and Selectors

CrisperAnemone avatar
CrisperAnemone
Use Quizgecko on...
Open
Browser
Browser