CSS (Cascading Style Sheets) allows styling and layout of HTML documents. CSS covers properties for fonts, colors, backgrounds, borders, margins, and positioning. It separates the presentation of HTML elements from the content. There are three main ways to insert CSS - inline with HTML tags, internally within <style> tags, and externally via <link> tags. CSS selectors like ID and class allow targeting specific elements. Properties control text styling, links, lists, and box model elements like padding, borders, and margins.
CSS (Cascading Style Sheets) allows styling and layout of HTML documents. CSS covers properties for fonts, colors, backgrounds, borders, margins, and positioning. It separates the presentation of HTML elements from the content. There are three main ways to insert CSS - inline with HTML tags, internally within <style> tags, and externally via <link> tags. CSS selectors like ID and class allow targeting specific elements. Properties control text styling, links, lists, and box model elements like padding, borders, and margins.
CSS (Cascading Style Sheets) allows styling and layout of HTML documents. CSS covers properties for fonts, colors, backgrounds, borders, margins, and positioning. It separates the presentation of HTML elements from the content. There are three main ways to insert CSS - inline with HTML tags, internally within <style> tags, and externally via <link> tags. CSS selectors like ID and class allow targeting specific elements. Properties control text styling, links, lists, and box model elements like padding, borders, and margins.
CSS (Cascading Style Sheets) allows styling and layout of HTML documents. CSS covers properties for fonts, colors, backgrounds, borders, margins, and positioning. It separates the presentation of HTML elements from the content. There are three main ways to insert CSS - inline with HTML tags, internally within <style> tags, and externally via <link> tags. CSS selectors like ID and class allow targeting specific elements. Properties control text styling, links, lists, and box model elements like padding, borders, and margins.
CSS CSS is an acronym for Cascading Style Sheets. CSS is a style language that defines layout of HTML documents CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions control the style and layout of multiple Web pages all at once. 2
CSS HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.
CSS and HTML
HTML is used to structure content. CSS is used for formatting structured content. Many new layout tags such as <blink> were only supported by one type of browser. "You need browser X to view this page" became a common disclaimer on web sites.
CSS and HTML
CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities Separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier. ported by all browsers.
CSS and HTML
CSS format
CSS how to There are three ways of inserting a style sheet: Inline style sheet Internal style sheet External style
CSS to HTML: Attribute Style
Called inline CSS.
9
CSS to HTML: Tag Style
Called internal CSS.
10
CSS to HTML: Link Style
Called External CSS.
rel = relation= Specifies
the relationship between the current document and the linked document 11
Benefit
12
Try it yourself
13
Try it yourself .css file body{ background-color:#d0e4fe; } h1{ color:orange; text-align:center; } p{ font-family:"Times New Roman"; font-size:20px; } a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ 14
CSS ID CSS allows you to specify your own selectors called "id" and "class". The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".
<html> <head> <style type="text/css"> #para1 {text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
15
CSS Class The class Selector
The class selector is used
to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a ".
CSS Class The class Selector You can also specify that only specific HTML elements should be affected by a class.
<html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> </body> </html> 17
Background and Image
Example done
18
CSS Text Text Color
With CSS, a color is most often specified by:
a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red"
19
CSS Text
<!DOCTYPE html> <html> <head> <style>
body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);}
</style> </head>
<body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> </body> </html>
20
CSS Text Text Alignment The text-align property is used to set the horizontal alignment of a text. <html> <head> <style> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>CSS text-align Example</h1> <p class="date">May, 2009</p> <p class="main">Bangladesh is identified as a Next Eleven economy. According to the United Nations in 2010, the country is making major strides in human development, including significant progress in the areas of gender equity, universal primary education, women empowerment, reducing population growth, food production, health and renewable energy.</p> </body> </html> 21
CSS Text Text Decoration The text-decoration property is used to set or remove decorations from text. <html> <head> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:none;}
</style> </head> <body> <h1>This is heading 1</h1><h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> </body> </html> 22
CSS Text Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. <html> <head> <style> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head> <body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html> 23
CSS Text Text Indentation The text-indent property is used to specify the indentation of the first line of a text.
<html> <head> <style> p {text-indent:50px;} </style> </head> <body> <p> Bangladesh is identified as a Next Eleven economy. According to the United Nations in 2010, the country is making major strides in human development, including significant progress in the areas of gender equity, universal primary education, women empowerment, reducing population growth, food production, health and renewable energy </p> </body> </html> 24
CSS Font
25
Positioning of elements Absolute positioning Relative positioning To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated. The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. 26
Ems (em): The em is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screens resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices. 28
Meet the Units
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size. Percent (%): The percent unit is much like the em unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility. 29
Whats the Difference?
Its easy to understand the difference between font-size units when you see them in action. Generally,1em = 12pt = 16px = 100%.
30
Whats the Difference?
31
CSS Links Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in. The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked 32
CSS Lists The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker
33
Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.
34
Box Model
35
Box Model Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear 36
Box Model Margin is on the outside of block elements while padding is on the inside. Use margin to separate the block from things outside it Use padding to move the contents away from the edges of the block.
37
Box Model The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like
this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Box Model Margin The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
40
Box Model Margin
41
Box Model Padding The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
42
Box Model Padding The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
43
Example Body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } body { margin: 100px 40px 10px 70px; } 44
Example p { margin: 5px 50px 5px 50px; } H1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; } 45
Float An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box)
clear The clear property is used to control how the subsequent elements of floated elements in a document shall behave. By default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. The property clear can assume the values left, right, both or none. 48
Example To avoid the text from floating up next to the element, we can add the following to our CSS: #picture { float:left; width: 100px; } . stopfloat { clear:both; }
