Scribd
Upload
24 views2 pages

CSS Selectors and Declarations Guide

The document provides a comprehensive guide on CSS selectors and declarations. It includes various types of selectors such as ID, class, and multiple selectors, along with their syntax. Additionally, it outlines CSS properties for styling elements, including background color, text alignment, borders, and text decoration.

Uploaded by

spmathu347
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views2 pages

CSS Selectors and Declarations Guide

The document provides a comprehensive guide on CSS selectors and declarations. It includes various types of selectors such as ID, class, and multiple selectors, along with their syntax. Additionally, it outlines CSS properties for styling elements, including background color, text alignment, borders, and text decoration.

Uploaded by

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

___SELECTOR___

BODY -- body{#declaration}
HEADING -- h1{#decleration}
ID -- ##name of the id
CLASS -- .#name
EVERYTHING -- *#decleration
PARAGRPH -- p{#decleration}
MULTIPLESELECTOR -- #h1,b,p{}
INDIRECT SPECIFYING -- #hi b p{}
ONLY DIRECT SPECIFYING -- #h1>b>p{}
TO SELECT ANY ONE ELEMENT NEXT TO OTHER ELEMENT -- h1+b{}
TO SELECT ANT MULTIPLE ELEMENT OF SAME NEXT TO AN ELEMENT -- h1~b{}
TO SELECT ANY TAG WITH CLASS -- #tag[#class]{}

___decleration___

BACKGROUND COLOR -- background-color:#color;


COLOR -- color:#color
OPACITY -- #0-1
BACKGROUND IMAGE -- background-image : url(#url of the image)
BACKGROUND IMAGE POSITION -- background-position : #right left top bottom
ALIGN THE MARGIN OF TEXT -- margin-#left right top bottom :# % px inherit
BORDER -- border-style:
dotted/solid/groove/dash/double/ridge/outsight/insight/none/hidden/#top right
bottom left all done like margin;
BORDER WIDTH -- border-width: thick/10px/# top right bottom left individually
done like margin;
COLOR OF BORDER -- border-color: #top right bottom left invidually done like
margin;
ALL BORDER IN ONE -- boder: #size style color;
ROUND THE BORDER EDGE -- border-radius:#px
INCEREASE THE SIZE OF ANY TAG IN AREA -- padding : #top #right #bottom #left;
CHANGING THE HEIGHT OF THE TAG -- height: #% px ;
CHANGING THE WIDTH OF THE TAG -- #% px
HORIZONTAL ALIGN THE TEXT -- text-align:justify/right/left;
HORIZONTAL ALIGN THE TEXT IN CENTRE -- txt-align-last:cantre;
VERTICLE ALIGN THE TEXT -- verticle-align:top/bottom;
UNDERLINE A TEXT -- text-decoration-line:overline/underline/line through;
LINE COLOR -- text-decoration-color:#color;
STYLE OF THE LINE -- text-decoration-style:#dotted/dash/disk/cicle;
THICKNESS OF THE LINE -- text-decoration-thickness:#px;
DO ALL TEXT DECORATION -- text-decoration:#what line #color #style #thickness;
NO TEXT DECORATION -- text-decoration:none;
TRANSFORM TEXT TO LOWER UPPER OR CAPITAL --
text-transform:capitalize/lowercase/uppercase;
INDENTATION OF TEXT -- text-indent:#px;
SPACING BETWEEN LETTERS -- letter-spacing:#px;
CHANGE FONT -- font-family:"#any font";
CHANGE FONT STYLE -- font-style: italic/oblique/normal/none;
CHANGE FONT WEIGHT -- font-weight:bold/normal;
CHANGE FONT SIZE -- font-size: #px em;
COLLAPSE THE BORDER OF THE TABLE -- border-cllapse:collapse;
TASKS TO DO WHEN MOUSE HOVER -- #tag:hover{#any task};
TO REMOVE A TAG -- display:none; *totaly remove the tag but hidden will only
hide it
TO CHANGE THE CURSOR TO POINTER -- cursor:pointer;

You might also like