Scribd
Carica
7 visualizzazioni

CSS Notes

rgrgrg

Caricato da

ntw4465
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
7 visualizzazioni

CSS Notes

rgrgrg

Caricato da

ntw4465
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 2

CSS Notes

CSS stands for Cascading Style Sheets.

Cascading Style Sheets(CSS) is used to format the layout of a webpage.

With CSS, you can control the color,font, the size of text, the spacing between
elements, how elements are positioned
and laid out, what background images or background colors are to be used, different
displays for different devices and screen
sizes, and much more

The word cascading means that a style applied to a parent element will also apply
to all children elements within the parent.
So, if you set the color of the body text to "blue", all headings, paragraphs,
and other text elements within the body will also get the same color (unless you
specify something else)!

Using CSS
CSS can be added to HTML documents in 3 ways:
.Inline- by using the style attribute inside HTML elements
.Internal-by using a <Style> element in the <head> section
.External-by using a <Link> Element to link to an external CSS file

External method Is the recommended method

To use External method right below title put link then press tab, then type in
href= the .css file to apply what ever styling
to your html in the .css file.

CSS Selectors

Declaration start is curly bracket {property:value;} declaration seperator is


semicolon, declaration end is curly bracket

example selector{background-color: yellow;}

property/value separator is colon

Colors In CSS .Color Names exa color red


.HTML5 Color names exa background:Coral
.Hexadecimal exa color #00ff00
.RGB exa rgb(0,0,255);

To change Font we put Font-family

example Font-family: Arial, Helvetica, sans-serif;

Can Change Font-size and font-weight


Can Change line- height example line-height:1.6em;
changes space inbetween lines.

<Div class="">

</div>

Margin & Padding Shorthand


p{ p{
margin :5px 10px 5px 10px;
}

p{
margin:5px 10px;
}
margin-top:5px;
margin-bottom:5px;
margin-right:10px;
margin-left:10px;
}

border-right:5px red solid;


border-left:5px red solid;
border-top:5px red solid;
border-bottom:5px red solid;
OR
border:5px red solid;

margin can be used to seperate space inbetween sections like paragraphs

This should help:An element's padding area is the space between its content and its
border.
Note: Padding creates extra space within an element. In contrast, margin creates
extra space around an element.

The CSS border property defines the width, line style, and color of the border of a
box.
It is a shorthand property for setting the border-width, border-style, and border-
color CSS properties.

Can use <div class to use it to reference parts of html to css to change be it
font, box sizing, padding, border, float,
and so on

Can also use <div id which is still a reference to edit on css but you write it
like this # at the start instead of the .

Positioning In CSS
.Static
.Relative
.Absolute
.Fixed
.Initial
.Inherit

Potrebbero piacerti anche