summary web programming CSS chapters ( 3.1,3.2,3.3 )

summary web programming CSS chapters ( 3.1,3.2,3.3 )

Cascading Style Sheets (CSS) → style sheet language used for describing the presentation of a document written in a markup language like HTML
Cross-site scripting (XSS) → an attack in which an attacker injects malicious executable scripts into the code of a trusted application or website
types of CSS :

inline CSS : at the <tag> level → tag level

<body style = "background-color:red;"></body>

internal CSS : at the <head> → webpage level - using style tag

<style type="text/css">
	p{
	background-color:red;
	}
</style>

external CSS → website level

<head> <link rel="stylesheet" type="text/css" href="page.css"> </head>
Modularity in security → that the main system will make changes all the other subsystems will be affected as in CSS any change in the main pages will affect all the other pages → affect in usability and modularity

background-attachment

background-attachment:scroll , fixed

background-attachment: scroll;, the background image will scroll along with the content as you move down the webpage
background-attachment: fixed;, the background image will stay fixed in its position while you scroll through the content.

Background -repeat

background-repeat: repeat-x , repeat-y , repeat , no-repeat

repeat-x : multiply the images on x-axis
repeat-y : multiply the images on y-axis
repeat : multiply the images on x,y-axis

If the image is not large enough to cover the entire body, it will be repeated to fill the space.

no-repeat : no multiply the images

background-position

background-position: top left - 0% 0% - 0px 0px

Y → top - down - center , X → left - right - center
X,Y → numbers - percentage - text ( mix of them )
20px and 700px represent the x-axis and y-axis positions, respectively

background-color:#FF00FF; → background color
background-image:url("image.png"); → insert an image as a background

font-family: arial, sans-serif; → type of text font
font-style : italic , normal; → style for text
font-variant : small-caps , normal;

small-caps : all text is capital letter

font-weight: bold or bloder, 900 , 130;

from 100 to 900, 700 by default

font-size : 30px; → text size

text-indent:30px; → spacing before the text at the beginning of the line the first line
text-align: right , center; → text position
text-decoration: underline , overline , line-through; → adding line

<del></del> = line-through
<u> = underline
text-decoration:none → remove underline used in hyperlinks - can’t remove the line under the link using html → we use css
text-decoration:overline → upper line

text-transform: capitalize , uppercase , lowercase , none;

capitalize → first letter capital
uppercase → all capital letters
lowercase → all are lower cases
none → none

a:link → a normal, unvisited link
a:visited → a link the user has visited

one time visit from the first time

a:hover → a link when the user mouse over it
a:active → a link the moment it is clicked

/* unvisited link */a:link {  color: red;}
/* visited link */a:visited {  color: green;}
/* mouse over link */a:hover {  color: hotpink;}
/* selected link */a:active {  color: blue;}

line-height: 50px; → affects both the spacing above and below the inline elements
letter-spacing:6px , -6px ;

spacing between the letters , default = 6px , may be in negative values but the letters will be over each others

one-line → background: scroll no-repeat 20px 700px green url('exam2.jpg');

If not specified will take the → default value

class when you want to apply a style or script to multiple elements.
class = “ value of the class “ → here the customization will be just on that paragraph only
class=”cls1” → in CSS will be as = p.cls1{ }

<p class="class1">Here is some content <br /> and more <br /> and
more</p>
<hr />
<p class="class2">Here is some content <br /> and more <br /> and
more</p>

p.class1 {
line-height: 20px;
}
p.class2 {
line-height: 50px;
}

general class → The dot (.) is used to denote a class selector in CSS

.intro {
  background-color: yellow;
}

<p class="intro">I live in Amman</p>
<h1 class="intro">My name is Dolly.</h1>
<p class="intro">I also live in Amman</p>

one class → both of these paragraphs will have a yellow background but not <h1>

p.intro {
  background-color: yellow;
}

<p class="intro ">I live in Amman</p>
<h1 class="intro">My name is Dolly.</h1>
<p class="intro ">I also live in Amman</p>

two classes

<p class="center large">This paragraph w</p>

it is valid to use two class together on the same tag as <p class="center large"> but if the two class have the same attributes the second or last class attribute will be used

border-width

pixels ( don’t have maximum value - better to use ) → 1px to 10px
keywords ( we have 3 keywords ) → thin - medium - thick

border-color
border-style → the shape of the border → we use keywords

dotted - dashed - solid - double

border can be used with any tag

border-width: thick;
border-style: dotted;
border-color: gold;

by default we don’t have border

we use id and for for internal connection for the same page
name / value pair for external use → servers
#: id tag #animals { }

	<div id="animals">
		<ul>
			<li> Lion </li> <li> Tiger </li>
		</ul>
	</div>

#animals {
font-color:blue;
}
#birds {
font-color:red;
}

id vs class

Uniqueness:

Classes can be applied to multiple elements.
IDs must be unique within a page.

Usage:

Classes are flexible and widely used for styling.
IDs are often used for unique identification or JavaScript interactions.

Syntax:

Classes use a period (.) in CSS.
IDs use a hash (#) in CSS.

<div> → helper tag
<div id=”name of the id in CSS”>
all the tags in the <div> will have the same style from the #id in the CSS
to group sections of code that you want to target with CSS