This document provides an overview of CSS (Cascading Style Sheets) including its basic syntax and properties for styling elements like color, background, text, box model, positioning and more. It also covers CSS concepts like units of measurement, selectors, including styles, and responsive design using media queries. Practice examples are included to demonstrate applying CSS for tasks like creating layouts, navigation bars and using flexbox.
Cascading Style Sheets (CSS) is a mechanism for adding style to HTML documents. CSS allows complete control over layout, design and formatting of web pages. CSS properties can be applied inline, internally via <style> tags, or externally via linked style sheets. CSS uses selectors to apply styles to HTML elements based on their id, class, type and other attributes. Declarations are made up of properties and values to specify styles.
The document discusses various topics in CSS including font families, the box model, text formatting and positioning, and table formatting. It defines five font families - serif, sans-serif, script, monospace, and fantasy - and describes their common uses. It also explains the box model of margins, padding, borders, and background, and properties for text alignment, positioning, and table styling.
Cascading Style Sheets (CSS) allow the separation of document structure (HTML) from presentation (styles). CSS is applied to HTML using style rules composed of selectors and declarations. There are three main ways to apply CSS - inline with the HTML, internally via <style> tags, or externally in separate .css files. CSS properties control text styling, box model properties like width/height, and other visual aspects of HTML elements. CSS selectors target elements by type, class, ID, and other attributes to style them appropriately.
This document contains CSS3 notes from Rex Wang from December 2015 in Auckland. It lists over 20 references to CSS topics on w3schools.com including fonts, tables, positioning, box model, and CSS3 properties. The notes cover basic CSS syntax and selectors, how to insert CSS, background properties, borders, margins and padding, width and height, text and link styling, lists and tables. It also covers the box model, outlines, layout with the display property, and different positioning methods.
On these slides. I explain all the properties and values of CSS Cascade Style Sheet (CSS).
How to define CSS class or id. How to implement CSS on the HTML page.
CSS (Cascading Style Sheets) is a language used to describe the presentation of HTML documents, including how elements are displayed on screen, paper, or in other media. It allows separation of document content from document presentation and styling. CSS properties specify features like text styling, backgrounds, borders, positioning, and layout. CSS can be applied to HTML documents as well as XML documents like SVG and XUL.
CSS inheritance allows descendant elements to inherit certain CSS properties from their ancestor elements. This helps reduce the amount of CSS code needed and makes styling easier. Key properties like color, font-size, and font-family are inherited by default. Font-size inheritance works by inheriting the calculated pixel value rather than the actual percentage or EM value. Understanding inheritance is important for efficiently writing CSS with less code.
This document provides an overview of CSS (Cascading Style Sheets) including its basic syntax and properties for styling elements like color, background, text, box model, positioning and more. It also covers CSS concepts like units of measurement, selectors, including styles, and responsive design using media queries. Practice examples are included to demonstrate applying CSS for tasks like creating layouts, navigation bars and using flexbox.
Cascading Style Sheets (CSS) is a mechanism for adding style to HTML documents. CSS allows complete control over layout, design and formatting of web pages. CSS properties can be applied inline, internally via <style> tags, or externally via linked style sheets. CSS uses selectors to apply styles to HTML elements based on their id, class, type and other attributes. Declarations are made up of properties and values to specify styles.
The document discusses various topics in CSS including font families, the box model, text formatting and positioning, and table formatting. It defines five font families - serif, sans-serif, script, monospace, and fantasy - and describes their common uses. It also explains the box model of margins, padding, borders, and background, and properties for text alignment, positioning, and table styling.
Cascading Style Sheets (CSS) allow the separation of document structure (HTML) from presentation (styles). CSS is applied to HTML using style rules composed of selectors and declarations. There are three main ways to apply CSS - inline with the HTML, internally via <style> tags, or externally in separate .css files. CSS properties control text styling, box model properties like width/height, and other visual aspects of HTML elements. CSS selectors target elements by type, class, ID, and other attributes to style them appropriately.
This document contains CSS3 notes from Rex Wang from December 2015 in Auckland. It lists over 20 references to CSS topics on w3schools.com including fonts, tables, positioning, box model, and CSS3 properties. The notes cover basic CSS syntax and selectors, how to insert CSS, background properties, borders, margins and padding, width and height, text and link styling, lists and tables. It also covers the box model, outlines, layout with the display property, and different positioning methods.
On these slides. I explain all the properties and values of CSS Cascade Style Sheet (CSS).
How to define CSS class or id. How to implement CSS on the HTML page.
CSS (Cascading Style Sheets) is a language used to describe the presentation of HTML documents, including how elements are displayed on screen, paper, or in other media. It allows separation of document content from document presentation and styling. CSS properties specify features like text styling, backgrounds, borders, positioning, and layout. CSS can be applied to HTML documents as well as XML documents like SVG and XUL.
CSS inheritance allows descendant elements to inherit certain CSS properties from their ancestor elements. This helps reduce the amount of CSS code needed and makes styling easier. Key properties like color, font-size, and font-family are inherited by default. Font-size inheritance works by inheriting the calculated pixel value rather than the actual percentage or EM value. Understanding inheritance is important for efficiently writing CSS with less code.
This document discusses various CSS properties for controlling web page layout and positioning of elements. It covers the CSS box model including margins, borders, padding and content, and properties for defining dimensions, positioning, floats and more. Examples are provided for setting widths, heights, paddings, borders, the display property, and using relative, fixed and absolute positioning.
Sass is a CSS preprocessor that adds powerful features like variables, nesting, mixins and functions to regular CSS. It makes CSS more maintainable and scalable. There are two syntax options for Sass - SCSS which uses the familiar CSS syntax, and the indented Sass syntax which relies on indentation rather than brackets. Sass code can be compiled into regular CSS files using the sass command line tool. Key Sass features include variables, nesting rules, partials and imports, mixins, extends/placeholders, interpolation and control directives.
The document discusses common CSS mistakes to avoid, including:
1) Not distinguishing between IDs and classes when selecting elements. IDs are unique and classes can be reused.
2) Including unnecessary units like "px" when a value is zero.
3) Repeating CSS properties that can be combined, like setting each border side individually.
4) Including excessive whitespace which increases file size without benefit.
5) Not grouping identical styles for multiple elements to make updates easier.
6) Confusing the difference between margins, which are outside borders, and padding, which is inside borders.
This document discusses CSS layout and positioning basics such as block and inline styles, margins, paddings, floating, and absolute and relative positioning. It covers setting font sizes using units like pixels, ems, and percentages. It also discusses sizing fonts using keywords and choosing font sizes that allow for resizing. The document provides examples of relative CSS and HTML for font sizing. It defines CSS positioning, block level and inline elements, and how to change an element's default display. It also covers margins, padding, inline-block elements, and provides examples of adding margins and padding.
CSS allows separation of HTML content from its presentation. It can be applied internally within a page's HTML or externally in a separate file. Reasons for external CSS include easier maintenance, reduced file size, and improved flexibility. CSS syntax uses selectors to target elements and applies properties and values to style them. Properties can target text, fonts, links, backgrounds, borders, lists, width/height, positioning and more. CSS handles layout and formatting of elements on a webpage.
This document provides an overview of designing for the web, covering topics such as HTML page structure, basic HTML components, the difference between content and style, CSS selectors, the CSS box model, responsive design, and more. It begins with introductions to the presenter and presentation content. Examples and explanations are provided throughout to illustrate key concepts in web design.
CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules tell HTML how to display by separating structure from presentation. There are various CSS selectors that target elements like classes, IDs, and tags. Properties like color, font, padding, margin and background customize elements. CSS box model controls layout with properties for dimensions, borders, margins and padding. Positioning options include static, relative, fixed and absolute.
At first glance, CSS line-height seems very simple, but there is a lot going on below the surface. Line-height is important for any designer or front end developer to understand as it can impact almost every aspect of our layouts.
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
Cascading Style Sheets (CSS) allows obtaining full control over HTML elements and their default properties. CSS can be used to easily redefine properties of any HTML tag, opening new design opportunities. Styles defined in CSS can be reused throughout an HTML document or across multiple pages for consistent formatting. The document discusses different methods of implementing CSS, including inline, internal, and external stylesheets. It also covers various CSS properties for formatting text, fonts, colors, backgrounds, lists, borders, opacity, and more. Examples are provided to demonstrate different CSS declarations.
The document discusses various CSS properties for styling fonts, text, links, borders, and outlines. It defines properties like font-family, font-size, text-align, border-style, and outline-width. Examples are provided to demonstrate how each property can be used to style text and elements on a webpage. Key CSS properties and their possible values are summarized in tables for easy reference. Code snippets and HTML examples further illustrate the use of these properties in practice.
CSS is a style sheet language used to describe the presentation of HTML documents, including how elements are displayed on the page, how they are laid out, and their colors, fonts, etc. CSS allows customization of HTML elements through declarations that specify element names and property-value pairs to style elements, and different selectors like classes, IDs, elements are used to target specific elements for styling. The CSS box model describes the layout of elements as boxes that can have properties like margins, borders, padding, and dimensions set to control appearance.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS allows you to control the color, font, size, spacing, and other aspects of HTML elements. CSS properties like background, text, font, links, lists and box model can be used to format HTML elements. CSS rules have selectors that specify the element to which a declaration applies, and declarations that contain property-value pairs that define the presentation of the element.
CSS (Cascading Style Sheets) allows styling and formatting of web pages. CSS handles the look and feel of web pages by controlling color, fonts, spacing, sizes, backgrounds and layouts. Some key advantages of CSS include saving time by reusing style sheets across pages, faster page loads with less code, and easy maintenance by making global style changes site-wide. CSS properties are applied using selectors to target specific HTML elements.
The document summarizes CSS1 properties for font, color, and background. It defines syntax, possible values, default values, applicable elements, and inheritance for properties like font-family, font-size, color, background-color, background-image, background-repeat, background-attachment, and background-position. Examples are given for setting values for each property.
This document provides an introduction to CSS (Cascading Style Sheets), covering topics such as:
- What CSS is and why it's used
- How to reference a CSS stylesheet from an HTML document
- CSS syntax including selectors, properties, and values
- Common CSS tags, properties, and positioning techniques
- Tools for inspecting and debugging CSS
The document provides an overview of CSS (Cascading Style Sheets) and different methods for applying CSS styles to HTML documents, including inline styles, embedded styles, and external style sheets. It also covers various CSS selectors such as type, class, ID, descendant, and child selectors that allow targeting specific elements to which styles can be applied. Common CSS mistakes like redundant units, repetition, excessive whitespace, improper grouping, and confusion between margins and padding are also discussed.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
This document provides an introduction to CSS (Cascading Style Sheets) and covers key concepts such as selectors, the box model, positioning, and responsive design. It explains that CSS is used to style and lay out elements on web pages and works together with HTML. The document outlines important CSS topics like selectors, properties and values, units of measurement, the box model, display types, flow, floats, and positioning. It emphasizes best practices like using relative units and media queries for responsive designs.
This document discusses various CSS properties used for page layout and formatting. It begins by explaining normal flow, where elements are displayed in the order they appear in the HTML. It then covers relative and absolute positioning, which change an element's position on the page. It also discusses the float, clear, overflow, display, and z-index properties and how they impact page layout. The document ends with an example of a two-column page layout using many of these CSS properties.
PDF SubmissionDigital Marketing Institute in NoidaPoojaSaini954651
https://www.safalta.com/online-digital-marketing/advance-digital-marketing-training-in-noidaTop Digital Marketing Institute in Noida: Boost Your Career Fast
[3:29 am, 30/05/2024] +91 83818 43552: Safalta Digital Marketing Institute in Noida also provides advanced classes for individuals seeking to develop their expertise and skills in this field. These classes, led by industry experts with vast experience, focus on specific aspects of digital marketing such as advanced SEO strategies, sophisticated content creation techniques, and data-driven analytics.
International Upcycling Research Network advisory board meeting 4Kyungeun Sung
Slides used for the International Upcycling Research Network advisory board 4 (last one). The project is based at De Montfort University in Leicester, UK, and funded by the Arts and Humanities Research Council.
More Related Content
Similar to Cascading Style Sheet(CSS) PDF Notes by Apna College
This document discusses various CSS properties for controlling web page layout and positioning of elements. It covers the CSS box model including margins, borders, padding and content, and properties for defining dimensions, positioning, floats and more. Examples are provided for setting widths, heights, paddings, borders, the display property, and using relative, fixed and absolute positioning.
Sass is a CSS preprocessor that adds powerful features like variables, nesting, mixins and functions to regular CSS. It makes CSS more maintainable and scalable. There are two syntax options for Sass - SCSS which uses the familiar CSS syntax, and the indented Sass syntax which relies on indentation rather than brackets. Sass code can be compiled into regular CSS files using the sass command line tool. Key Sass features include variables, nesting rules, partials and imports, mixins, extends/placeholders, interpolation and control directives.
The document discusses common CSS mistakes to avoid, including:
1) Not distinguishing between IDs and classes when selecting elements. IDs are unique and classes can be reused.
2) Including unnecessary units like "px" when a value is zero.
3) Repeating CSS properties that can be combined, like setting each border side individually.
4) Including excessive whitespace which increases file size without benefit.
5) Not grouping identical styles for multiple elements to make updates easier.
6) Confusing the difference between margins, which are outside borders, and padding, which is inside borders.
This document discusses CSS layout and positioning basics such as block and inline styles, margins, paddings, floating, and absolute and relative positioning. It covers setting font sizes using units like pixels, ems, and percentages. It also discusses sizing fonts using keywords and choosing font sizes that allow for resizing. The document provides examples of relative CSS and HTML for font sizing. It defines CSS positioning, block level and inline elements, and how to change an element's default display. It also covers margins, padding, inline-block elements, and provides examples of adding margins and padding.
CSS allows separation of HTML content from its presentation. It can be applied internally within a page's HTML or externally in a separate file. Reasons for external CSS include easier maintenance, reduced file size, and improved flexibility. CSS syntax uses selectors to target elements and applies properties and values to style them. Properties can target text, fonts, links, backgrounds, borders, lists, width/height, positioning and more. CSS handles layout and formatting of elements on a webpage.
This document provides an overview of designing for the web, covering topics such as HTML page structure, basic HTML components, the difference between content and style, CSS selectors, the CSS box model, responsive design, and more. It begins with introductions to the presenter and presentation content. Examples and explanations are provided throughout to illustrate key concepts in web design.
CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules tell HTML how to display by separating structure from presentation. There are various CSS selectors that target elements like classes, IDs, and tags. Properties like color, font, padding, margin and background customize elements. CSS box model controls layout with properties for dimensions, borders, margins and padding. Positioning options include static, relative, fixed and absolute.
At first glance, CSS line-height seems very simple, but there is a lot going on below the surface. Line-height is important for any designer or front end developer to understand as it can impact almost every aspect of our layouts.
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
Cascading Style Sheets (CSS) allows obtaining full control over HTML elements and their default properties. CSS can be used to easily redefine properties of any HTML tag, opening new design opportunities. Styles defined in CSS can be reused throughout an HTML document or across multiple pages for consistent formatting. The document discusses different methods of implementing CSS, including inline, internal, and external stylesheets. It also covers various CSS properties for formatting text, fonts, colors, backgrounds, lists, borders, opacity, and more. Examples are provided to demonstrate different CSS declarations.
The document discusses various CSS properties for styling fonts, text, links, borders, and outlines. It defines properties like font-family, font-size, text-align, border-style, and outline-width. Examples are provided to demonstrate how each property can be used to style text and elements on a webpage. Key CSS properties and their possible values are summarized in tables for easy reference. Code snippets and HTML examples further illustrate the use of these properties in practice.
CSS is a style sheet language used to describe the presentation of HTML documents, including how elements are displayed on the page, how they are laid out, and their colors, fonts, etc. CSS allows customization of HTML elements through declarations that specify element names and property-value pairs to style elements, and different selectors like classes, IDs, elements are used to target specific elements for styling. The CSS box model describes the layout of elements as boxes that can have properties like margins, borders, padding, and dimensions set to control appearance.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS allows you to control the color, font, size, spacing, and other aspects of HTML elements. CSS properties like background, text, font, links, lists and box model can be used to format HTML elements. CSS rules have selectors that specify the element to which a declaration applies, and declarations that contain property-value pairs that define the presentation of the element.
CSS (Cascading Style Sheets) allows styling and formatting of web pages. CSS handles the look and feel of web pages by controlling color, fonts, spacing, sizes, backgrounds and layouts. Some key advantages of CSS include saving time by reusing style sheets across pages, faster page loads with less code, and easy maintenance by making global style changes site-wide. CSS properties are applied using selectors to target specific HTML elements.
The document summarizes CSS1 properties for font, color, and background. It defines syntax, possible values, default values, applicable elements, and inheritance for properties like font-family, font-size, color, background-color, background-image, background-repeat, background-attachment, and background-position. Examples are given for setting values for each property.
This document provides an introduction to CSS (Cascading Style Sheets), covering topics such as:
- What CSS is and why it's used
- How to reference a CSS stylesheet from an HTML document
- CSS syntax including selectors, properties, and values
- Common CSS tags, properties, and positioning techniques
- Tools for inspecting and debugging CSS
The document provides an overview of CSS (Cascading Style Sheets) and different methods for applying CSS styles to HTML documents, including inline styles, embedded styles, and external style sheets. It also covers various CSS selectors such as type, class, ID, descendant, and child selectors that allow targeting specific elements to which styles can be applied. Common CSS mistakes like redundant units, repetition, excessive whitespace, improper grouping, and confusion between margins and padding are also discussed.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
This document provides an introduction to CSS (Cascading Style Sheets) and covers key concepts such as selectors, the box model, positioning, and responsive design. It explains that CSS is used to style and lay out elements on web pages and works together with HTML. The document outlines important CSS topics like selectors, properties and values, units of measurement, the box model, display types, flow, floats, and positioning. It emphasizes best practices like using relative units and media queries for responsive designs.
This document discusses various CSS properties used for page layout and formatting. It begins by explaining normal flow, where elements are displayed in the order they appear in the HTML. It then covers relative and absolute positioning, which change an element's position on the page. It also discusses the float, clear, overflow, display, and z-index properties and how they impact page layout. The document ends with an example of a two-column page layout using many of these CSS properties.
Similar to Cascading Style Sheet(CSS) PDF Notes by Apna College (20)
PDF SubmissionDigital Marketing Institute in NoidaPoojaSaini954651
https://www.safalta.com/online-digital-marketing/advance-digital-marketing-training-in-noidaTop Digital Marketing Institute in Noida: Boost Your Career Fast
[3:29 am, 30/05/2024] +91 83818 43552: Safalta Digital Marketing Institute in Noida also provides advanced classes for individuals seeking to develop their expertise and skills in this field. These classes, led by industry experts with vast experience, focus on specific aspects of digital marketing such as advanced SEO strategies, sophisticated content creation techniques, and data-driven analytics.
International Upcycling Research Network advisory board meeting 4Kyungeun Sung
Slides used for the International Upcycling Research Network advisory board 4 (last one). The project is based at De Montfort University in Leicester, UK, and funded by the Arts and Humanities Research Council.
Technoblade The Legacy of a Minecraft Legend.Techno Merch
Technoblade, born Alex on June 1, 1999, was a legendary Minecraft YouTuber known for his sharp wit and exceptional PvP skills. Starting his channel in 2013, he gained nearly 11 million subscribers. His private battle with metastatic sarcoma ended in June 2022, but his enduring legacy continues to inspire millions.
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
Practical eLearning Makeovers for EveryoneBianca Woods
Welcome to Practical eLearning Makeovers for Everyone. In this presentation, we’ll take a look at a bunch of easy-to-use visual design tips and tricks. And we’ll do this by using them to spruce up some eLearning screens that are in dire need of a new look.
Revolutionizing the Digital Landscape: Web Development Companies in Indiaamrsoftec1
Discover unparalleled creativity and technical prowess with India's leading web development companies. From custom solutions to e-commerce platforms, harness the expertise of skilled developers at competitive prices. Transform your digital presence, enhance the user experience, and propel your business to new heights with innovative solutions tailored to your needs, all from the heart of India's tech industry.
Decormart Studio is widely recognized as one of the best interior designers in Bangalore, known for their exceptional design expertise and ability to create stunning, functional spaces. With a strong focus on client preferences and timely project delivery, Decormart Studio has built a solid reputation for their innovative and personalized approach to interior design.
Architectural and constructions management experience since 2003 including 18 years located in UAE.
Coordinate and oversee all technical activities relating to architectural and construction projects,
including directing the design team, reviewing drafts and computer models, and approving design
changes.
Organize and typically develop, and review building plans, ensuring that a project meets all safety and
environmental standards.
Prepare feasibility studies, construction contracts, and tender documents with specifications and
tender analyses.
Consulting with clients, work on formulating equipment and labor cost estimates, ensuring a project
meets environmental, safety, structural, zoning, and aesthetic standards.
Monitoring the progress of a project to assess whether or not it is in compliance with building plans
and project deadlines.
Attention to detail, exceptional time management, and strong problem-solving and communication
skills are required for this role.
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
3. CSS
Cascading Style Sheet
makeup
not a programming language, but a stying language
But for styling there should be some content, and that's why
we studied html before css
go to websites & remove css
APNA
COLLEGE
It is a language that is used to describe the style of a document.
4. Basic Syntax
Selector
h1 {
color: red;
}
Property Value
semicolon shows that one property has ended & it is
important to put this even though it won't incurr error
APNA
COLLEGE
5. Including Style
Inline
<style> tag
<h1 style="color: red"> </h1>
Apna College
Writing style directly inline on each element
Style is added using the <style> element in the same document
h1 {
<style>
color : red;
}
</style>
APNA
COLLEGE
6. Including Style
best way
External Stylesheet
Writing CSS in a separate document & linking it with HTML file
An inline style will override external and internal styles
APNA
COLLEGE
7. Color Property
Used to set the color of foreground
color: red;
color: pink;
color: blue;
color: green;
APNA
COLLEGE
APNA
COLLEGE
8. Background Color Property
Used to set the color of background
background-color: red;
background-color: pink;
background-
color: blue;
background-
color: green;
APNA
COLLEGE
9. Color Systems
color: rgb(255, 0, 0);
color: rgb(0, 255, 0);
RGB
we don't have to think on colors on our own, we can just use
color picker tools online or search online
APNA
COLLEGE
12. Practice Set 1
Create a simple div with an id "box".
Add some text content inside the div.
Set its background color to blue.
Q1:
Create 3 headings with h1, h2 & h3.
Give them all a class "heading" & set color of "heading" to red.
Q2:
green using css stylesheet
blue using <style> tag
pink using inline style
Create a button & set its background color to :
Q3:
APNA
COLLEGE
13. Text Properties
text-align : left / right / center
text-align
text alignement doesn't mean align according to the page; i.e.
right does not mean on the page's right side
but the parent's right side
in css3, latest css -> start and end are introduced for language
support like arabic
APNA
COLLEGE
14. Text Properties
text-decoration : underline / overline / line-through
text-decoration
also add style, wavy, dotted or color like red
can also set to none for hyperlinks
APNA
COLLEGE
15. Text Properties
font-weight : normal / bold / bolder / lighter
font-weight
font-weight : 100-900
font-weight is to show how dark or light our text is
it can be names or in terms of numbers
values from 100 to 900
APNA
COLLEGE
16. Text Properties
font-family : arial
font-family
font-family : arial, roboto
we can write multiple familiies as a
fall-back mechanism
APNA
COLLEGE
21. Create a heading centred on the page with all of its text capitalized by default.
Q1:
Set the font family of all the content in the document to "Times New Roman".
Q2:
Create one div inside another div.
Set id & text "outer" for the first one & "inner" for the second one.
Set the outer div text size to 25px & inner div text size to 10px.
Q3:
Practice Set 2
APNA
COLLEGE
24. By default, it sets the content area h
eight of the element
div {
height: 50px;
}
Height
Height
content
APNA
COLLEGE
25. By default, it sets the content area
width of the element
div {
width: 50px;
}
Width
Width
content
APNA
COLLEGE
26. Used to set an element's border
border-width : 2px;
border-style : solid / dotted / dashed
border-color : black;
Border
Border
content
APNA
COLLEGE
33. Create a div with height & width of 100px.
Set its background color to green & the border radius to 50%.
Q1:
Create the following navbar.
Q2:
Practice Set 3
APNA
COLLEGE
35. Display Property
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.
display: inline / block / inline-block / none
APNA
COLLEGE
36. Visibility
Note : When visibility is set to none, space for the element is reserved.
But for display set to none, no space is reserved or blocked for the
element.
visibility: hidden;
APNA
COLLEGE
37. Alpha Channel
opacity (0 to 1)
color: rgba(255, 0, 0, 0.5);
RGBA
color: rgba(255, 0, 0, 1);
APNA
COLLEGE
38. Create a webpage layout with a header, a footer & a content area containing 3 divs.
Set the height & width of divs to 100px.
(add the previous navbar in the header)
Q1:
Add borders to all the divs.
Q2:
Add a different background color to each div with an opacity of 0.5
Q3:
Practice Set 4
Give the content area an appropriate height.
Q4:
APNA
COLLEGE
41. Percentage (%)
It is often used to define a size as relative to an element's parent object.
width : 33% ;
margin-left : 50% ;
make one par & one child div
show 50% of parent for h1
sometimes the relation is also to some other property not
just size, but that is not very commonly used
APNA
COLLEGE
42. Em
font size of child will be half of parent for 0.5em
for padding & margin it's relative to same element's font size
show both on same par & div
make a button with border & font-size
then change its border radius from pixel to ems to set a constant shape
APNA
COLLEGE
43. Rem (Root Em)
font size of child will be half of parent for 0.5em
for padding & margin it's relative to same element's font size
show both on same par & div
make a button with border & font-size
then change its border radius from pixel to ems to set a constant shape
APNA
COLLEGE
44. Others
vh: relative to 1% viewport height
vw : relative to 1% viewport width
APNA
COLLEGE
45. Position
The position CSS property sets how an element is positioned in a document.
position : static / relative / absolute / fixed
APNA
COLLEGE
46. Position
static - default position (The top, right, bottom, left, and z-index properties have no effect)
relative - element is relative to itself. (The top, right, bottom, left, and z-index will work)
absolute - positioned relative to its clo
sest positioned ancestor. (removed from the flow)
fixed - positioned relative to browser. (removed from flow)
sti
cky - positioned based on use
r's scroll position
APNA
COLLEGE
47. z-index
It decides the stack level of elements
z-index : auto (0)
z-index : 1 / 2 / ...
z-index : -1 / -2 / ...
Overlapping elements with a larger z-index cover those with a smaller one.
show 3d space
APNA
COLLEGE
48. Background Image
Used to set an image as background
background-image : url("image.jpeg");
APNA
COLLEGE
49. Background Size
cover = fits with no empty space
contain - fits with image fully visible
auto = original size
background-size : cover / contain / auto
APNA
COLLEGE
50. Create the following layout using the given html.
Qs:
Practice Set 5
Use the appropriate position property for the div element to place it at the
right end of the page. (The div should not move even on scroll)
Use z-index to place the div on top of page.
<p> lorem*5 </p>
<div> Love Nature </div>
<p> lorem*5 </p>
Give the div a height, width & some background image.
APNA
COLLEGE
53. The Flex Model
set display property of container to flex first
APNA
COLLEGE
flex item
flex container
main axis
cross axis
54. Flexbox Direction
It sets ho
w flex items are placed in the flex container, along which axis and direction.
flex-direction : row; (default)
flex-direction : row-reverse;
flex-direction : column;
flex-direction : column-reverse;
APNA
COLLEGE
55. Flex Properties
for Flex Container
justify-content : alignment along the main axis.
flex-start / flex-end / centre / space-evenly /
flex-wrap : nowrap / wrap / wrap-reverse
align-items : alignment along the cross axis.
align-content : alignment of space between & around the content along cross-axis
APNA
COLLEGE
56. Flex Properties
for Flex Item
align-self : alignment of individual 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
silmilar to align items but for individual element
and it overrides align items
grow & shrink take values like 0, 1, 2, 3
0 = doesn't grow at all
APNA
COLLEGE
57. Create a navbar with 4 options in the form of anchor tags inside list items.
Now, use flexbox to place them all spaced equally in a single line.
Qs:
Use flexbox to center one div inside another div.
Qs:
Which has higher priority - align-items or align-self?
Qs:
Practice Set 6
APNA
COLLEGE
58. Media Queries
Help create a responsive website
in today's world everyone has a different device with thousand of
different screen sizes
if you built a website people will use it on laptop, big screen
computers, an iphone, a big screen android phone or a small screen
one, an ipad
even orientation is different like landscape or portrait
so it's important that layout looks good on all
so we need design to be responsive, respond to different screen sizes
& orientation
@media (width : 600px) {
div {
background-color : red;
}
}
@media (min-width : 600px) {
div {
background-color : red;
}
}
APNA
COLLEGE
59. Media Queries
in today's world everyone has a different device with thousand of
different screen sizes
if you built a website people will use it on laptop, big screen
computers, an iphone, a big screen android phone or a small screen
one, an ipad
even orientation is different like landscape or portrait
so it's important that layout looks good on all
so we need design to be responsive, respond to different screen sizes
& orientation
@media (min-width : 200px) and (min-width : 300px) {
div {
background-color : red;
}
}
APNA
COLLEGE
60. Add a media query to implement the following:
Qs:
the color of a div changes to green for viewport width less than 300px
Practice Set 7
the color of a div changes to pink for width between 300px & 400px
the color of a div changes to red for width between 400px & 600px
the color of a div changes to blue for width above 600px
APNA
COLLEGE
61. Level 5
THESE ARE things that can be called advanced CSS
it is an important chapter because we should know
but practically itna aap use nahi karenge
but pata hona chahiye
APNA
COLLEGE
62. Transitions
Transitions enable you to define the transition between two states of an element.
to add some animation to elements
timing function is how the transition should be applied
show hover
transition-property : property you want to transition (font-size, width etc.)
transition-duration : 2s / 4ms ..
transition-timing-function : ease-in / ease-out / linear / steps ..
transition-delay : 2s / 4ms ..
APNA
COLLEGE
63. Transition Shorthand
property name | duration | timing-function | delay
transition: font-size 2s ease-in-out 0.2s;
to add some animation to elements
APNA
COLLEGE
64. CSS Transform
Used to apply 2D & 3D transformations to an element
transform: rotate(45deg);
rotate
to add some more animation to how an
element looks
rotate is simple to understand, will take
angles and degrees is most common
transform also applies to all content inside
APNA
COLLEGE
65. CSS Transform
transform: scale(2);
scale
x & y axis separately
transform: scale(0.5);
transform: scaleX(0.5);
transform: scaleY(0.5);
transform: scale(1, 2);
APNA
COLLEGE
67. CSS Transform
transform: skew (30deg);
skew
now that we have done it we can go and make some advanced 3d
objects using transform if we are good at math
APNA
COLLEGE
72. Create a simple loader using CSS
Qs:
Practice Set 8
Step1 : create a div with circular shape & a thick border from one end
(top/bottom/left/right)
Step2 : To make it spin create an animation which transforms it from 0deg to 360deg
Step3 : Add the animation property to the loader with infinite duration
APNA
COLLEGE