Scribd
Upload
2 views

Unit 1 - CSS_st

The document outlines a syllabus for a course on HTML/HTML5 and CSS, covering topics such as the CSS box model, selectors, positioning, and responsive design. It emphasizes the importance of learning CSS for web design, detailing its applications, types, and properties. Additionally, it provides examples of CSS syntax, color specifications, and the use of external stylesheets for web development.

Uploaded by

Nitin Panzade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Unit 1 - CSS_st

The document outlines a syllabus for a course on HTML/HTML5 and CSS, covering topics such as the CSS box model, selectors, positioning, and responsive design. It emphasizes the importance of learning CSS for web design, detailing its applications, types, and properties. Additionally, it provides examples of CSS syntax, color specifications, and the use of external stylesheets for web development.

Uploaded by

Nitin Panzade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

UNIT

–HTML/HTML5
Web Essentials Iand Mark-up language -
Syllabus - CSS
Web Essentials and Mark-up language - HTML/HTML5
• Introduction to CSS3 box model, selectors, Positioning, Pseudo-class,
Pseudo-element, Building Responsive Websites with HTML5 and
CSS3, HTML5 and CSS3 Site Design using Flexbox
• Types of CSS, How to use CSS, Properties, Classes, Child-Class
(Nested CSS), Colors, Text, Background, Border, Margin, Padding,
Positioning (flex, grid, inline, block), Animation, Transition.
CS
S
CSS
•Why CSS

•Types of CSS

•How to use CSS

•Properties

•Classes, Child-Class (Nested CSS)


•Colors, Text, Background, Border, Margin, Padding

•Positioning (flex, grid, inline, block), Animation, Transition


Why to Learn CSS?
• Cascading Style Sheets - the process of making web
simplify presentable. pages

• CreateStunning Web site - CSS handles the look and feel part of a
web page.

• Become a web designer - If you want to start a career as a


professional web designer, HTML and CSS designing is a must skill.

• Control web - CSS is easy to learn and understand.

• Learn other languages - Once you understands the basic of HTML and
CSS
then other relatedtechnologies like javascript, php,or
angular are become easier to understand.
Hello World using CSS

Demo
Applications of
CSS
• CSS saves time

• Pages load faster


• Easy maintenance
• Superior styles to HTML
• Multiple Device
Compatibility
• Global web standards
Example
CSS Rule
Syntax
• Selector - This could be any tag like <h1> or <table> etc.
• Property - They could be color, border etc.
• Value − For example, color property can have value either red or
#F1F1F1 etc.
<!DOCTYPE html> 1.html
The Type Selectors <html>
<head>
By using type selectors effectively, <title>CSS Type Selector Example</title>
you can quickly and easily apply consistent styles <style>
to common HTML elements throughout p{
your web pages. color: blue;
font-size: 18px;
Style all paragraph elements }
(<p>) ( p is type Selector) with: </style>
•Blue text color </head>
•Font size of 18 pixels <body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>
</html>
The Universal Selectors
• * (asterisk): This is the universal selector
• It targets all HTML elements in the document, regardless of their
tag name.

Check *
<!DOCTYPE html>
<html>
<head> The Descendant
• Style rule will apply to <em> element only
Selectors
<title>ul em Selector Example</title>
<style> when it lies inside <ul> tag.
ul em {
color: red;
font-style: italic;
}
</style> </head> <body>

<ul>
<li>This is a list item.</li>
<li>This list item has an
<em>emphasized</em> word.</li>
<li>Another list item.</li>
</ul>
Click here
<p>This is a paragraph with
<em>emphasized</em> text.</p>

</body>
</html>
The Class
Selectors
• You can define style rules based on the class attribute of the
elements

Click here to learn more


The ID Selectors

•You can define style rules


based on the id attribute
of the elements.

Run the Code


The Child
Selectors
• You have seen the descendant
selectors.

The Attribute
Selectors
CSS -
Color
CSS uses color values to specify a
color.
CSS Colors - Hex Codes
•A hexadecimal is a 6
digit representation of
a color.
• The first two
digits(RR) represent
a red value, the next
two are a green
value(GG), and the
last are the blue
value(BB).
CSS Colors - Short Hex
Codes
• This
is a shorter
form of the six-digit
notation.
• Inthis format, each
digit is replicated to
arrive at an equivalent
six-digit value. For
example: #6A7
becomes #66AA77.
CSS Colors - RGB Values
• Thiscolor value is
specified using the
rgb( ) property.
• This
property takes three
values, one each for red,
green, and blue. The value
can be an integer between
0 and 255 or a percentage.
Building Color Codes
• You can build millions of color codes using our Color Code
Builder. Check our HTML Color Code Builder. To use this
tool, you would need a Java Enabled Browser.

• Hereis the list of 216 colors which are supposed to be most


safe and computer independent colors. These colors vary
from hexa code 000000 to FFFFFF.
CSS - Backgrounds
• background-color

• background-image

• background-repeat

• background-position

• background-
attachment
• background
Set the Background Color
Set the Background Image
CSS - Fonts
• font-
family
• font-style
• font-
variant
• font-
weight
• font-size
• font
Set the Font Family
Set the Font Style
CSS - Images
• border
• height
• width
• -moz-
opacity
CSS -
Border
• border-color

• border-style
• border-width
border-color
Property
• border-bottom-color
• border-top-color
• border-left-color
• border-right-color
CSS
Margins
• margin

• margin-
bottom
• margin-top
• margin-left
• margin-right
CSS -
•Padding
padding-
bottom
• padding-top
• padding-left
• padding-right
• padding
CSS - Animation

• Animationis the process of creating motion effects and change


the appearance.CSS does supported different animation effects
to change the event motion.

• List of 55 animations effects available.

• https://www.tutorialspoint.com/css/css_animation.htm
Types of CSS
• There are three types of
CSS.
1. Inline CSS
2. Internal CSS
3. External CSS
Inline
CSS
Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an
HTML tag using the style attribute.
Internal or Embedded
CSS:
•This can be used when a single HTML document must be styled uniquely.
The CSS rule set should be within the HTML file in the head section i.e the
CSS is embedded within the HTML file.
External
•CSS
External CSS contains separate CSS file which contains
only style property with the help of tag attributes (For
example class, id, heading, … etc).
• CSSproperty written in a separate file with .css extension
and should be linked to the HTML document using link tag.
• This
means that for each element, style can be set only once
and that will be applied across web pages.
Examp
le

HTML file that is making use of the created external style


sheet
• link tag is used to link the external style sheet with
the html webpage.
• href attribute is used to specify the location of the
external style sheet file.
The file contains CSS property, saved with
.css extension. For Ex: geeks.css
Thank
You!!

You might also like