Scribd
Upload
9 views

CSS1

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

CSS1

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS ( Cascading Style Sheet )

CSS stands for Cascading Style Sheet . It describes how HTML elements are to
be displayed on screen, paper, or in other media . It saves a lot of work. It can
control the layout of multiple web pages all at once . External stylesheets are
stored in CSS files . It is a markup language responsible for how our web pages looks
like. It controls the colors, fonts, and layouts of our website
elements.
CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

PROPERTIES IN CSS:
➢ Properties in CSS are used to assign different styles or
behaviour to an HTML element.
➢ A property is an aspect of a selector.
➢ Example: color, border, font-style, margin, padding, etc.

Way to insert Css :


CSS can be defined in 3 ways-
1. Inline CSS:
➢ An inline CSS is used to apply a unique style to a single HTML tag or
element.
➢ It can be defined by using a style attribute inside certain HTML
element or tag.
➢ It is applicable only for the single tag where it is defined.

Inline Css - <tag style = “ property = value ; “

2. Internal CSS:
➢ An internal CSS is used to define a style for a single HTML page.
➢ An internal CSS is defined in the <head> section of an HTML page,
within the <style> element.
➢ It is applicable only for the single HTML file where it is defined.

Internal Css - <style >


Tagname{ property = value ; }
</style>

3. External CSS:
➢ An external CSS is the separate CSS file where the different styles
are defined.
➢ It can be accessed by using the <link> element inside the <head>
section of the HTML file.
➢ Multiple HTML files can use the same CSS file to access the styles
defined in the page.

External Css - create a file “filename.css”


Inside css file code :- tagname { property = value ; }
MEASUREMENTS IN CSS:
Different types of measurements used in CSS for different purposes
according to the user requirements.
Following are the different measurements used in CSS-
➢ percentage (%)
➢ pixels (px)
➢ centimeters (cm)
➢ em
➢ inches (in)
➢ millimeters (mm)

BOX MODEL :

the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: content,
padding, borders and margins.

MARGIN :
Margins are used to create space around elements, outside of any defined borders.

 margin-top
 margin-right
 margin-bottom
 margin-left

 Margin shorthand : margin: 25px 50px 75px 100px;


o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

BORDER :

border properties allow you to specify the style, width, and color of an
element's border.
Border-style = dotted / dashed / solid / double / groove / ridge / inset /
outset / none / hidden
Border-width = value
Border-color = color_name
Border-radius = value
Border-collapse = collapse
Border-image-source : url(‘ …. ‘)
Border-image-slice : value(with or without unit)
Border-image-width : value
Border-image-outset :value
Border-image-repeat : stretch/repeat/round/space
Border-image : source slice width outset repeat

PADDING
Padding is used to create space around an element's content, inside of any defined
borders.

 padding-top
 padding-right
 padding-bottom
 padding-left

Padding : top right bottom left


BACKGROUND :

The CSS background properties are used to add background effects for
elements.
In these chapters, you will learn about the following CSS background
properties:
 background-color = colorname ;
 background-image = url(‘ image_path ‘ );
 background-repeat = repeat / no-repeat / repeat-x / repeat-y
 background-attachment = scroll / fixed / local
 background-position = left top / left center / right bottom / center top / x
% y%
 background (shorthand property) = color image repeat attachment
position
 Background-size : cover / contain / x% y%
 background-blend-mode : normal / multiple / screen / overlay /
darken / lighten / color-dedge/ saturation / color / luminosity
opacity : value ( between 0 to 1)
Height : value
Width : value

Text
Color : value
Text-align
Direction
Unicode-bdi

You might also like