Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
20 views

Copy of CSS Basics

Uploaded by

krishnan5307trading
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

Copy of CSS Basics

Uploaded by

krishnan5307trading
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Introduction to CSS

LEARNING & DEVELOPMENT


What is CSS?

● Stands for Cascading Style Sheets


● It is a style sheet language which is used to describe the look and formatting of a
document written in markup language.
● Provides an additional feature to HTML
● The basic idea behind CSS is to separate the structure of a document from the
presentation of the document. HTML is meant for structure.
● Generally used with HTML to change the style of web pages and user interfaces.
● It can also be used with any kind of XML documents including plain XML, SVG and
XUL.
Syntax

● A CSS rule-set consists of a selector and a declaration block


● The selector points to the HTML element you want to style.
● The declaration block contains one or more declarations separated by semicolons.
● Each declaration includes a CSS property name and a value, separated by a colon.
● Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
Eg: https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1
CSS Selector

● CSS selectors are used to "find" (or select) the HTML elements you want to style.
● There are several different types of selectors in CSS.
○ Element Selector
○ Id Selector:
○ Class Selector
○ Universal Selector
○ Group Selector
CSS Selector: Element Selector

● Selects HTML elements based on the element name.


● Eg:
All <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}
Try: https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element
CSS Selector: Id Selector

● The id selector uses the id attribute of an HTML element to select a specific element.
● Id selector is used to select one unique element
● To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
Eg: HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
CSS Selector: Class Selector

● Selects HTML elements with a specific class attribute.


● To select elements with a specific class, write a period (.) character, followed by the
class name.
Eg: all HTML elements with class="center"
.center {
text-align: center;
color: red;
}
● HTML elements can also refer to more than one class.
Eg: <p class="center large">
The <p> element will be styled according to class="center" and to class="large"
CSS Selector: Universal Selector

● The universal selector (*) selects all HTML elements on the page.
*{
text-align: center;
color: blue;
}
CSS Selector: Group Selector

● The grouping selector selects all the HTML elements with the same style definitions.
Eg: The h1, h2, and p elements have the same style definitions
h1, h2, p {
text-align: center;
color: red;
}
● To group selectors, separate each selector with a comma.
Attribute Selectors

● Used to style HTML elements that have specific attributes or attribute values.
● Eg:
1. selects all <a> elements with a target attribute:
a[target] {
background-color: yellow;
}

2. selects all <input> elements with type=”text”:


input[type=text] {
background-color: silver;
}
How to add CSS

● There are three ways to insert CSS in HTML documents.


a. Inline CSS: used to apply CSS on a single line or element.
Eg: <p style="color:blue">Hello CSS</p>
b. Internal CSS: used to apply CSS on a single document or page.
-affect all the elements of the page
-write inside the style tag within head section of html.
Eg:
<style>
p{color:blue}
</style>
c. External CSS: used to apply CSS on multiple pages or all pages.
-write all the CSS code in a css file.
External CSS

● It facilitates you to change the look of the entire web site by changing just one file.
● File extension must be .css
Eg: mystyle.css
● Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
● External style sheet can be written in any text editor
● The external .css file should not contain any HTML tags.
● If some properties have been defined for the same selector (element) in different style
sheets, the value from the last read style sheet will be used.
Cascading Order

● All the styles in a page will "cascade" into a new "virtual" style sheet by the following
rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
● So, an inline style has the highest priority, and will override external and internal styles
and browser defaults.
CSS Comments

● Used to explain the code


● Comments are ignored by browsers.
● Comment is placed inside the <style> element, and starts with /* and ends with */
● Eg:
1. p {
color: red; /* Single line comment */
}
2. /* This is
a multi-line
comment */

p {
color: red;
}
CSS - Measurement Units
Unit Description Example
% Defines a measurement as a percentage relative to another value, p { width: 50%;}
typically an enclosing element.

cm a measurement in centimeters. div {margin-bottom: 2cm;}

em A relative measurement for the height of a font in em spaces. p {letter-spacing: 7em;}

ex defines a measurement relative to a font's x-height. p {font-size: 24pt; line-height: 3ex;}

in a measurement in inches. p {word-spacing: .15in;}

mm a measurement in millimeters. p {word-spacing: 15mm;}

pc a measurement in picas. A pica is equivalent to 12 points; p {font-size: 20pc;}

pt a measurement in points. A point is defined as 1/72nd of an inch. body {font-size: 18pt;}

px a measurement in screen pixels. p {padding: 25px;}


CSS Colors
● CSS uses color values to specify a color.
● Used to set a color for the foreground of an element (i.e., its text), background of the element,
borders and other decorative effects.

Format Description Syntax Example


Hex Code A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a #RRGGBB p{color:#FF0000;}
red value, the next two are a green value(GG), and the last are the blue value(BB).

Short Hex Code A shorter form of the six-digit notation. Each digit is replicated to arrive at an equivalent #RGB p{color:#6A7;}
six-digit value.

RGB % Specified using the rgb( ) property. This property takes three values, one each for red, rgb(rrr%,ggg p{color:rgb(50%,5
green, and blue. %,bbb%) 0%,50%);}

RGB Absolute RGB can be an integer between 0 and 255 or a percentage. rgb(rrr,ggg,bbb) p{color:rgb(0,0,25
5);}

keyword Name for the color aqua, black, etc. p{color:teal;}


CSS Basic Properties

● Here are some basic CSS properties to work with


○ Text Properties
○ List Properties
○ Border Properties
○ Font Properties
● Property list: http://web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html

● A complete list of standard properties belonging to the latest CSS3 specifications:


https://www.tutorialrepublic.com/css-reference/css3-properties.php
Box Model
● Every element that can be displayed on a
web page is comprised of one or more
rectangular boxes.
● CSS box model typically describes how
these rectangular boxes are laid out on a web page.
● Every box has a content area and optional
surrounding padding, border, and margin areas.

Box Size CSS Properties

Total Width width + padding-left + padding-right + border-left +


border-right + margin-left + margin-right

Total Height height + padding-top + padding-bottom + border-top +


border-bottom + margin-top + margin-bottom
Pseudo-class

● Used to style the dynamic states of an element such as hover, active and focus state.
● Helpful in the situations
○ Style an element when a user mouses over it
○ Style visited and unvisited links differently
○ Style an element when it gets focus
● A pseudo-class starts with a colon (:). Its syntax can be given with:
selector:pseudo-class { property: value; }
Eg: a:link {
color: blue;
}
a:visited {
text-decoration: none;
}
ul li:last-child { border-right: none; }

● Eg: https://www.w3schools.com/css/tryit.asp?filename=trycss_link
CSS Pseudo-elements

● Used to style the elements or parts of the elements without adding any IDs or classes to
them.
● Helpful in the situations
○ Style the first letter, or line, of an element
○ Insert content before, or after, the content of an element
● double-colon (::) syntax for pseudo-elements to distinguish between them and pseudo-
classes.
selector::pseudo-element { property: value; }
Eg: p::first-line {
color: #ff0000;
font-variant: small-caps;
}

● Try: https://www.w3schools.com/css/tryit.asp?filename=trycss_before
Media Queries

● Used to define different style rules for different media types.


● Media queries can be used to check many things, such as:
○ width and height of the viewport
○ width and height of the device
○ orientation (is the tablet/phone in landscape or portrait mode?)
○ Resolution
● Consists of a media type and can contain one or more expressions, which resolve to
either true or false.
● Syntax:
@media not|only mediatype and (expressions) {
CSS-Code;
}
Media Queries

● The result of the query is true if the specified media type matches the type of device the
document is being displayed on and all expressions in the media query are true.
● When a media query is true, the corresponding style sheet or style rules are applied,
following the normal cascading rules.
● Unless you use the not or only operators, the media type is optional and the all type will
be implied.
● You can also have different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
CSS3 Media Types
Value Description
all Used for all media type devices

print Used for printers

screen Used for computer screens, tablets, smart-phones etc.

speech Used for screen readers that "reads" the page out loud

● Eg: changes the background-color to light green if the viewport is 480 pixels wide or
wider
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

● Try: https://www.w3schools.com/css/tryit.asp?filename=trycss3_media_queries1
Responsive Web Design

● Web pages can be viewed using many different devices: desktops, tablets, and phones.
● Web page should look good, and be easy to use, regardless of the device.
● Web pages should not leave out information to fit smaller devices, but rather adapt its
content to fit any device:
● It is called responsive web design when you use CSS and HTML to resize, hide, shrink,
enlarge, or move the content to make it look good on any screen.
Desktop Tablet Phone
Responsive Web Design - Viewport
● The viewport is the user's visible area of a web page.
● The viewport varies with the device, and will be smaller on a mobile phone than on a computer
screen
● When we started surfing the internet using tablets and mobile phones, fixed size web pages
were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire
web page to fit the screen.
● Include the following <meta> viewport element in all your web pages:
● <meta name="viewport" content="width=device-width, initial-scale=1.0">

● This gives the browser instructions on how to control the page's dimensions and scaling.
● The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).
● The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Responsive Web Design - Grid-View
● Many web pages are based on a grid-view, which means that the page is divided into
columns
● A responsive grid-view often has 12 columns, and has a total width of 100%, and will
shrink and expand as you resize the browser window.
● Eg: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_webpage
CSS Animations

● CSS allows animation of HTML elements without using JavaScript or Flash!


● An animation lets an element gradually change from one style to another.
● You can change as many CSS properties you want, as many times you want.
● To use CSS animation, first specify some keyframes for the animation.
● Keyframes hold what styles the element will have at certain times.
● Specify CSS styles inside the @keyframes rule, the animation will gradually change
from the current style to the new style at certain times.
● Eg: https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_delay
Advantages

● CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages.
● Pages load faster - If you are using CSS, you do not need to write HTML tag attributes
every time.
● Easy maintenance - To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
● Superior styles to HTML -Give a far better look to your HTML page in comparison to
HTML attributes.
● Multiple Device Compatibility - Style sheets allow content to be optimized for more than
one type of device.
Thank you

You might also like