<link rel= stylesheet href= css/f.css > Colors: Color name: red, blue, orange... etc HEX: #RRGGBB Rgb: rgb(red value, green value, blue value)

Size: px

Start display at page:

Download "<link rel= stylesheet href= css/f.css > Colors: Color name: red, blue, orange... etc HEX: #RRGGBB Rgb: rgb(red value, green value, blue value)"

Arnold Higgins
6 years ago
Views:

1 Syntax: Selector{ Id an class: #id.class Property : Value;} Grouping selector: P, h1, h3{ } Css comments: /* */ Three Ways to Insert CSS Inline: <p style= color:ed > </p> Internal: <style> </style> External: P{ ;} <link rel= stylesheet href= css/f.css > Colors: Color name: red, blue, orange... etc HEX: #RRGGBB Rgb: rgb(red value, green value, blue value)

2 Background: Background-color: lightblue; Background-image: url( x.jpg ); Background-repeat: repeat-x or repeat-y or no-repeat; Background-position: right top or right bottom or left top or left bottom; Background-attachment: fixed or scroll or local Shorthand: color image repeat attachment position; Borders: Border-style: solid or dashed or dotted etc Border-width: px or medium or thin or thick Border-color: red or rgb(red,green,blue) or #hex Shorthand: border: width style color; We can also use border-top-style or border-bottom-style or borderleft-style or border-right-style Margin: Margin: 5px; or em or % (most recommended e mem=16px) or auto or inherit Also we can use margin-top or margin-right or margin-left or margin-bottom Padding: Padding: 5px; or em or % (most recommended e mem=16px) or auto or inherit Also we can use padding-top or padding -right or padding -left or padding -bottom

3 Height and width: Height: 30px or % or em Width: 40px or % or em Max- width, max-height, min-width, min-height Outline: Outline-style: dotted or dashed or solid or double or groove or ridge or inset or outset or none Outline=color: red or #hex or rgb(red,green,blue); Outline-width: 5px or thick or thin or medium Shorthand: outline: width style color; Text: Color: red or #hex or rgb(red, green, blue) Text-align: center or left or right or justify Text-decoration: none or underline or overline or line-through Text-transform: uppercase or lowercase or capitalize Text-indent: 50px; Letter-spacing: 2px Line-height:0.5; Direction: rtl or ltr Word-spacing: 10px or -2px; Text-shadow : 3px(horizontal) 2px(vertical) red; Text-overflow: ellipsis or clip White-space: nowrap(keep at the same line without wrapping) or normal

4 Fonts: Font-family: "Times New Roman", Times, serif; font-style: normal or italic or oblique (oblique is very similar to italic, but less supported); font-size: 40px or 1em (em = 16px and most recommended); font-weight: normal or bold or bolder or lighter or 100->900; font-variant: normal or small-caps; shorthand: font:italic bold 12px/30px Georgia, serif; Icons: To use the Font Awesome icons, download fontawsome and it in css file and add the following line inside the <head> section of your HTML page: <link rel="stylesheet" href=" css/font-awesome.min.css"> <i class="fa fa-cloud"></i> Also we can use bootstrap icons and google material icons Links: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouse is over it a:active - a link the moment it is clicked a:hover MUST come after a:link and a:visited a:active MUST come after a:hover

5 Lists: list-style-type: circle or square or none or upper-roman or lower-alpha list-style-image: url('sqpurple.gif'); list-style-position: inside or outside shorthand: list-style: square inside url("sqpurple.gif"); navbar: ul{ list-style-type:none; margin:0; padding:0; } tables: border: 1px solid red; border-collapse: collapse or separate border-spacing: 3px or 2px 4px; width: 100% height:50 th{ text-align: center or left or right vertical-align: center or bottom padding:10px; th,td{ border-bottom: 1px solid red; } th:hover{ background-color:gray; } even and odd differ: tr:nth-child(even or odd){ background-color:red; } last row tr:last-child{ } first row tr:first-child{ } caption-side: top or bottom empty-cells: show or hide

6 css display: Block elements: div, p, h1,form, header, footer, section. Inline elements: span, img, a.. didn t effect with width, height, margin-top, margin-bottom (but sometimes work) but effects with margin-left, margin-right, padding-left, padding-right Display: none; = hide Display: inline; => convert to inline properties Display: block; visibility:hidden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout: Css positions: Position: static HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. Position: fixed Is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used Position: relative An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relativelypositioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element

7 Position: absolute An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static. Overflow: Overflow: visible or hidden or scroll or auto Overflow-x: -----; Overflow-y: ; Float and clear: Float: left or right or none After the last floating div you must clear Clear:.clear{ clear: both left right; } In html: <div class= clear ></div>

8 Inline-block: inline-block القيمه االخيرة وهى block ومميزات القيمه inline تعنى ادماج مميزات القيمه ان العناصر تيجى بجوار بعضها البعض inline فميزة ال ان العناصر تقدر تتحكم فى الطول والعرض والمارجين والبادينج block وميزة ال.. لكل كل قيمه على حده ال تفعل ذلك واشهر مثال على هذا القيمه هو النافبار.. شاهد المثال بجوار بعضها البعض li جاءت جميع ال inline-block وجدنا انه عند اعطاء القيمه باالضافه الى انه استطعنا التحكم فى الطول والعرض والمارجين والبادينج وهذا ال يحدث باسخدام كل خاصيه على حده وهما عناصر بلوك div يمكنك تحويل العناصر بمعنى مثال عندك 3 للديف display : inline فقم بكتابه خاصيه ال inline اذا اردت تحويلهم الى عناصر والعكس صحيح inline حينها بتحول من عنصر بلوك الى

9 Css combinators: Div p all p inside any div (direct and indirect child) Div > p p inside div (direct childs only) Div + p first p after div Div ~ p any p outside div Css pseudo class: Syntax selector : pseudo-class{ property: value; } A:link A:hover A:active A:link Hover on div div:hover{ background-color: black;} Simple tooltip: P{ display:none;} Div : hover p{display:block;} In html: <div> hover me <p> hello </p> </div> P:first-child{ first div in page} P i:first-child{ first I in each p} P:first-child i {every I in first p in the page} Input:focus {background-color: blue} Pseudo elements: Syntax selector :: pseudo-element{ property : value; } P::first-line{ first line in p } P :: first-letter { first character in p } H1::before {content : url(image.jpg) or text } H1::after {content : url(image.jpg) or text }

10 To create a custom style to selected text: ::selection { } color: red; background: yellow; Opacity: img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } Transparent Hover Effect img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } Transparency using RGBA background: rgba(76, 175, 80, 0.3) Text in Transparent Box <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black;} div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black;

11 opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */} div.transbox p { margin: 5%; font-weight: bold; color: #000000;} </style> In html <div class="background"> <div class="transbox"> <p>this is some text that is placed in the transparent box.</p> </div></div> CSS Attribute Selectors Selector [attribute = value] or Selector [attribute] A[target] { all a have target attribute} A[ target="_blank" ] { all a have target blank} [ title ~="f" ] { any title not contain f character } [ class = "top"] { any class named top or have top after -} [ class ^="top"] { any class start with top} [ class $="test"] { any class ended with test} [attribute*="value"] elements whose attribute value contains a specified value. The attribute selectors can be useful for styling forms without class or ID:

12 input[type="text"] any input with type text CSS forms: Input{ width:90%;} and we can use attribute selector like input[type="text"] input[type="text"]:focus{ during select} Counters: counter-reset - Creates or resets a counter counter-increment - Increments a counter value content - Inserts generated content counter() or counters() function - Adds the value of a counter to an element body{ counter-reset: section; } h1{ counter-reset: subsection; } h1 :: before{ counter-increment : section; content: section counter(section) - ;} h2 :: before{ counter-increment : subsection; content: counter(section). counter(subsection) - ;}

13 CSS3 Rounded Corners border-radius: 25px; or % also we can use Border-top-left-radius, border-top-rightradius, border-bottom-right-radius and border-bottom-left-radius border-radius: top-left top-right bottom-right bottom-left CSS3 background Multiple background; Background-image: url(img1), url(img2), ; Background-position: right bottom,left top,..; Background-repeat: norepeat,repeat, ; Shorthand: background: url(img1) right bottom no-repeat, url(img2) left top repeat,..; Set background size: background-size: 100px 80px; or in % or contain or cover The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image. The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.

14 For multiple background: background-size: 50px, 130px, auto; Origin: background-origin: content-box or padding-box or border-box border-box - the background image starts from the upper left corner of the border padding-box - (default) the background image starts from the upper left corner of the padding edge content-box - the background image starts from the upper left corner of the content background-clip: background-clip: content-box; border-box - (default) the background is painted to the outside edge of the border padding-box - the background is painted to the outside edge of the padding content-box - the background is painted within the content box CSS3 Colors CSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also introduces: RGBA colors rgba(red, green, blue, alpha) HSL colors hsl(hue [0 or 360=red, 120=green, 240=blue], saturation[in %], lightness [%]) HSLA colors (hue, saturation, brightness, opacity) opacity opacity: between 0.0 to 1.0 CSS3 Gradients

15 background: linear-gradient(direction, color1, color2,...); direction

Parashar Technologies HTML Lecture Notes-4

Parashar Technologies HTML Lecture Notes-4 CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,