CSS

SOURCE: WWW.W3SCHOOLS.COM
CSS
• CSS STANDS FOR CASCADING STYLE SHEETS
• CSS DESCRIBES HOW HTML ELEMENTS ARE TO BE DISPLAYED
ON SCREEN, PAPER, OR IN OTHER MEDIA
• CSS SAVES A LOT OF WORK. IT CAN CONTROL THE LAYOUT OF
MULTIPLE WEB PAGES ALL AT ONCE
• EXTERNAL STYLESHEETS ARE STORED IN CSS FILES 
• IS THE LANGUAGE WE USE TO STYLE AN HTML DOCUMENT.
• DESCRIBES HOW HTML ELEMENTS SHOULD BE DISPLAYED.
WHY USE CSS?

• CSS IS USED TO DEFINE STYLES FOR

YOUR WEB PAGES, INCLUDING THE
DESIGN, LAYOUT AND VARIATIONS IN
DISPLAY FOR DIFFERENT DEVICES AND
SCREEN SIZES.
CSS SOLVED A BIG PROBLEM

• HTML WAS NEVER INTENDED TO CONTAIN TAGS FOR

FORMATTING A WEB PAGE!
• HTML WAS CREATED TO DESCRIBE THE CONTENT OF A WEB
PAGE, LIKE:
• <H1>THIS IS A HEADING</H1>
• <P>THIS IS A PARAGRAPH.</P>
CSS SYNTAX

• 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.
CSS SELECTORS
CSS SELECTORS ARE USED TO "FIND" (OR SELECT) THE HTML
ELEMENTS YOU WANT TO STYLE.
WE CAN DIVIDE CSS SELECTORS INTO FIVE CATEGORIES:
• SIMPLE SELECTORS(SELECT ELEMENTS BASED ON NAME, ID, CLASS)
• COMBINATOR SELECTORS (SELECT ELEMENTS BASED ON A SPECIFIC
RELATIONSHIP BETWEEN THEM)
• PSEUDO-CLASS SELECTORS (SELECT ELEMENTS BASED ON A
CERTAIN STATE)
• PSEUDO-ELEMENTS SELECTORS (SELECT AND STYLE A PART OF AN
ELEMENT)
• ATTRIBUTE SELECTORS (SELECT ELEMENTS BASED ON AN
ATTRIBUTE OR ATTRIBUTE VALUE)
 SIMPLE SELECTORS: THE
CSS ID SELECTOR
• THE ID SELECTOR USES THE ID ATTRIBUTE OF AN HTML
ELEMENT TO SELECT A SPECIFIC ELEMENT.
• THE ID OF AN ELEMENT IS UNIQUE WITHIN A PAGE, SO THE 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.
SIMPLE SELECTORS: THE
CSS CLASS SELECTOR
• THE 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.
SIMPLE SELECTORS: THE
CSS UNIVERSAL SELECTOR
• THE UNIVERSAL SELECTOR (*) SELECTS ALL HTML ELEMENTS
ON THE PAGE.
SIMPLE SELECTORS: THE
CSS GROUPING SELECTOR
• THE GROUPING SELECTOR SELECTS ALL THE HTML
ELEMENTS WITH THE SAME STYLE DEFINITIONS.
• LOOK AT THE FOLLOWING CSS CODE (THE H1, H2, AND P
ELEMENTS HAVE THE SAME STYLE DEFINITIONS):
THREE WAYS TO INSERT CSS
• EXTERNAL CSS
-WITH AN EXTERNAL STYLE SHEET, YOU CAN CHANGE THE LOOK OF AN ENTIRE
WEBSITE BY CHANGING JUST ONE FILE! EACH HTML PAGE MUST INCLUDE A
REFERENCE TO THE EXTERNAL STYLE SHEET FILE INSIDE THE <LINK> ELEMENT,
INSIDE THE HEAD SECTION.
• INTERNAL CSS
-AN INTERNAL STYLE SHEET MAY BE USED IF ONE SINGLE HTML PAGE HAS A UNIQUE
STYLE.
-THE INTERNAL STYLE IS DEFINED INSIDE THE <STYLE> ELEMENT, INSIDE THE HEAD
SECTION.
• INLINE CSS
-AN INLINE STYLE MAY BE USED TO APPLY A UNIQUE STYLE FOR A SINGLE ELEMENT.
-TO USE INLINE STYLES, ADD THE STYLE ATTRIBUTE TO THE RELEVANT ELEMENT.
THE STYLE ATTRIBUTE CAN CONTAIN ANY CSS PROPERTY.
CSS COMMENTS
• CSS COMMENTS ARE NOT DISPLAYED IN THE BROWSER, BUT THEY CAN HELP
DOCUMENT YOUR SOURCE CODE.
• COMMENTS ARE USED TO EXPLAIN THE CODE, AND MAY HELP WHEN YOU EDIT
THE SOURCE CODE AT A LATER DATE.
• COMMENTS ARE IGNORED BY BROWSERS.
• A CSS COMMENT IS PLACED INSIDE THE <STYLE> ELEMENT, AND STARTS WITH /*
AND ENDS WITH */:
CSS COLORS
• COLORS ARE SPECIFIED USING PREDEFINED COLOR NAMES, OR RGB, HEX, HSL,
RGBA, HSLA VALUES.
• CSS COLOR NAMES
• IN CSS, A COLOR CAN BE SPECIFIED BY USING A PREDEFINED COLOR NAME:
CSS RGB COLORS
• IN CSS, A COLOR CAN BE SPECIFIED AS AN RGB VALUE, USING THIS
FORMULA:
• RGB(RED, GREEN, BLUE)
• EACH PARAMETER (RED, GREEN, AND BLUE) DEFINES THE INTENSITY
OF THE COLOR BETWEEN 0 AND 255.
• FOR EXAMPLE, RGB(255, 0, 0) IS DISPLAYED AS RED, BECAUSE RED
IS SET TO ITS HIGHEST VALUE (255) AND THE OTHERS ARE SET TO 0.
CSS HEX COLORS
• IN CSS, A COLOR CAN BE SPECIFIED USING A HEXADECIMAL VALUE
IN THE FORM:
• #RRGGBB
• WHERE RR (RED), GG (GREEN) AND BB (BLUE) ARE HEXADECIMAL
VALUES BETWEEN 00 AND FF (SAME AS DECIMAL 0-255).
• FOR EXAMPLE, #FF0000 IS DISPLAYED AS RED, BECAUSE RED IS SET
TO ITS HIGHEST VALUE (FF) AND THE OTHERS ARE SET TO THE
LOWEST VALUE (00).
• TO DISPLAY BLACK, SET ALL VALUES TO 00, LIKE THIS: #000000.
• TO DISPLAY WHITE, SET ALL VALUES TO FF, LIKE THIS: #FFFFFF.
CSS HSL COLORS
• IN CSS, A COLOR CAN BE SPECIFIED USING HUE, SATURATION, AND
LIGHTNESS (HSL) IN THE FORM:
• HSL(HUE, SATURATION, LIGHTNESS)
• HUE IS A DEGREE ON THE COLOR WHEEL FROM 0 TO 360. 0 IS RED,
120 IS GREEN, AND 240 IS BLUE.
• SATURATION IS A PERCENTAGE VALUE. 0% MEANS A SHADE OF GRAY,
AND 100% IS THE FULL COLOR.
• LIGHTNESS IS ALSO A PERCENTAGE. 0% IS BLACK, 50% IS NEITHER
LIGHT OR DARK, 100% IS WHITE
CSS MARGINS
• THE CSS MARGIN PROPERTIES ARE USED TO CREATE SPACE
AROUND ELEMENTS, OUTSIDE OF ANY DEFINED BORDERS.
• WITH CSS, YOU HAVE FULL CONTROL OVER THE MARGINS. THERE
ARE PROPERTIES FOR SETTING THE MARGIN FOR EACH SIDE OF AN
ELEMENT (TOP, RIGHT, BOTTOM, AND LEFT).
• MARGIN-TOP
• MARGIN-RIGHT
• MARGIN-BOTTOM
• MARGIN-LEFT
CSS PADDING
• THE CSS PADDING PROPERTIES ARE USED TO GENERATE SPACE
AROUND AN ELEMENT'S CONTENT, INSIDE OF ANY DEFINED
BORDERS.
• WITH CSS, YOU HAVE FULL CONTROL OVER THE PADDING. THERE
ARE PROPERTIES FOR SETTING THE PADDING FOR EACH SIDE OF AN
ELEMENT (TOP, RIGHT, BOTTOM, AND LEFT).
• PADDING-TOP
• PADDING-RIGHT
• PADDING-BOTTOM
• PADDING-LEFT