CSS: 15/11/24 class recap
peanits
this is me..I guess I deserved it..heh..Its ok..! If i were u..i wouldnt pick me either.. *i say as i look off the ledge with tears streaming down my face* heh..goodbye.. *jumps*
cascading style sheets, shows how html elements displayed on screen
css example
css file = external file
syntax of the css language --> h1 {color:blue; font size:12px;}
I would like to apologize to the family members of the 39 people I killed. It was never my intention to do anything to disappoint my audience. I only meant to kill 9 victims, but then I accidentally ended up killing 30 other people, and for that, I am sorry.
CSS
- external CSS save outside of website. how to write ==> < link rel="stylesheet" href="mystyle.css" >
- internal CSS save inside of the website. how to write ==> h1 {color: orange; font-size: 100%;} (this code is inside the style element)
- inline CSS, use to apply unique CSS directly into the html element. example ==> < p color="blue" > this is an exapmle
CSS Comment
example:
< !--comments!-- >
CSS COLOR
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
this is the same color:
CSS BACKGROUND
to change bagkround image, change in body element
background-color: red/#ff0000/rgb(255,0,0);
background-image: url("imagefilename.filetype");
background-repeat: repeat-x/repeat-y/no-repeat;
background-position: right top bottom left;
background-attachment: fixed/scroll; (to keep or change position of bg)
(damn, atp i'm just giving the cheat codes ahshadjfhka)
to shorten the code, you can use shorthand property. example:
background: #ffffff url("imagefilename.filetype") no-repeat right top
CSS BORDER
border properties allow to specify the style of an element's border
border position order: top-right-bottom-left
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridged;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;
border-style: dotted dashed solid double;
you can add the width => { border-width: 2px; }. or you can use different size { in px, pt, cm}
to change border color => { border-color: blue; }
for individual sides => { border-top/right/bottom/left-style; } [insert diff styles]
border shorthand? ==> { border : size style color }
rounded border ==> { border-radius: 5 px; }
examples:
peanits
peanits
peanits
peanits
peanits
peanits
peanits
peanits
peanits
peanits
peanits
CSS MARGIN
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element
you can try in here
margin position order: top-right-bottom-left
margin: 25px; (if the margin has one value)
margin: auto; (keeping margin in center of site)
inherit value ==> element be inherited from the parent element (< div>)
margin-left: 100px/inherit; (keep parts of margin empty/still)
margin collapse ==> top and bottom collapse sometimes collapse into single margin, taking the largest of the two margins
CSS PADDING
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
you can try in here
padding position order: top-right-bottom-left
shorthand property ==> {padding: 25px 50px 75 px 100px;}
padding and element width:
width: 300px;
padding 25 px;
CSS HEIGHT && WEIGHT
auto - This is default. The browser calculates the height and width
length - specifies a height/width in px, pt, cm, etc.
% - specifies a height/width in % of the width of the containing element
initial - Sets the height/width to its default value
inherit - specifies that the height/width should be inherited from the parent element
setting max-width. to set the maximum width of an element (only width changes size, not height)
CSS BOX MODEL
IMPORTANT. When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
paragraph examples courtesy of r/copypasta