Scribd
Upload
47 views

CSS Training

CSS

Uploaded by

Gheorghe Alexandru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
47 views

CSS Training

CSS

Uploaded by

Gheorghe Alexandru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 28

CSS training

What is CSS?

A CSS file consists of one or more rules that specify how to


display one or more HTML elements (ie. divs, spans, tables)
The syntax is usually as follows:
selector {property:value; property:value; }
ex. td {background-color: black; }
p {color: red;}
These rules can be set in 3 ways :
As inline styles (inside the HTML style attribute): ex.
<body style = width:100%;></body>
As style blocks (inside <style> tags): ex. <style>body
{background-color: #e0e0e0;} p {color: red;} </style>
As external CSS: open a file, type all the rules, save file with
.css extension, then add
<link href="style.css" type="text/css" rel="stylesheet" />,
preferrably to the head section of the site.

The need for CSS


The old way of styling elements: by using HTML attributes
(ex. width = 320, height = 80). The problem with this
approach is that it leads to bloated code with no separation
between content (what is being shown) and
presentation/appearance (how it is shown).
The old way of creating different layouts for HTML pages (ex.
a page with a header, the bodys content split into 3 columns,
and a footer): via HTML borderless tables. The problem with
this is that tables have inherent meaning (ie. they convey
actual data) and that they do not scale (if any change arises,
you need to modify the HTML code, which could lead to
undesired effects and extra testing). Normally, the HTML code
should be separated from the presentation side of things, and
this is done via CSS (positioning, margins, floats etc.)
The appearance of mobile devices = the need to produce
layouts that behave well on a variety of screen resolutions.
Instead of fixing HTML code or building multiple versions of a
website to serve different devices, one can easily reuse
existing elements from the desktop version of a website
(normally with well-chosen class and/or id attributes) and
make them fit on a mobile screen .

Selectors
In order to to work with CSS, you first need to
devise a way of filtering the HTML elements,
and this is done via selectors.
The * (wildcard) selector: used for
selecting all elements on a page.
Ex. * {visibility:hidden;} will hide all elements
on a page

The element selector:


div{width:100px;} makes all div elements on
the page 100 pixels wide.
You can provide multiple (different) elements in
this way by using commas with the element
selector: ex. div, td {width:100px;}

The id/class selector


Instead of selecting elements by using their names, you can
instead do it via their id (which must be unique) or class
(which should group elements together):
#i220_text {visibility:hidden;} hides the element with id
i220_text
.confirmit-grid {width:720px;} resizes ALL elements with the
class .confirmit-grid to 720 pixels width.
You can chain id and class selectors with the element
selectors (and also with all the selectors which will be
presented here):
#i220_text, .confirmit-grid, .grid_scale_ng {background-color: red;}

You can also be more specific when choosing the elements


you wish to work with, and choose them by their tag name
AND class/id. However, make sure you leave no spaces in
the declaration, like in the following example:

th.grid_scale_ng{font-size:20px;}

input#Q13_5{visibility:hidden;}

The child selector


you can select elements that are the
children of another element (by this we
mean contained immediately within the
containing element in the HTML tree).
The syntax is parent element > child
element {property: value;}. The parent
element must be the left term and the
child, the right term.
table > tbody {height: 1000px;} gives all
the tbody elements that have a table
element as parent a height of 1000 pixels.

The descendent selector


you can select elements contained within another element regardless
of their level.
We have the following example of a table element, which has thead
and tbody as children, and th, td, input and so on as descendents.

<tableclass="confirmit-grid"summary="Answers of Q2x1">
<thead>
<tbody>
<trid="yui_3_3_0_1_141033941277444">
<tr><td><input type = radio id = Q1_1_1 checked = checked></td></tr>
<tr></tr>
<tr></tr>
</tbody>

We can select any of those descendants just like in the children


example, but by using an empty space between the two terms instead
of the > operator:
table input {visibility:hidden} this will select every input element
from every table and then hide them.
We can also chain together multiple children/descendent selectors for
more powerful filters
Ex. .confirmit-grid th, div > #Q2x1_text {font-family: arial, verdana,
sans; font-size:20px;}
Note: The children selector (>) might not work well in some cases or
on some browsers (IE8). In this case, using the more powerful
descendent selector will most likely solve the issue.

The next sibling selector


lets you select all the siblings that come
immediately after an element on the same
level in the ancestors HTML tree :
Ex. fieldset tr + tr {border-bottom: 50px solid
white;} in a single question with five rows
(every answers label has a row in the table),
the above selector means all the rows that
come after the first row.
fieldset tr + tr + tr this means all the rows
that come after the second row.
What do we need to write so that only the last
row (the fifth) is affected?

Attribute selectors, part one


lets you select elements based on their attribute (as a
refresher, attributes are present only in the HTML tag itself
and they are visible in the HTML tree). You can use this in
2 ways: 1. selecting elements based on the existence of
said attribute or 2. based on the value of said attribute.
The trick here is to think of every attribute value as a
string and use pattern matching like you would for
regular expressions.
Ex. input[id] selects all input elements that have the id
attribute
input[type=text] selects all text inputs from the page
input[value!=] selects all inputs elements that do not
have an empty attribute named value (under normal
conditions, only text elements should have this attribute, but
as you can set any attribute on any element by way of
scripts, you should not trust this scenario in every case.)

td:not([style="text-decoration:overline"])

Attribute selectors, cont.

If you are selecting elements based on the value of some attribute, you
are not restricted to matching whole attribute values only the attribute
name has to be specified entirely, not the value itself . Instead, you are
able to use pattern matching :
attribute value starting with some pattern (^= operator)
input[id^=Q1] selects all inputs with an attribute named id that
has a value starting with the string Q1 please be aware that the
^ symbol is reserved in confirmIT, so you cannot use this variant
there. Use the contains variant instead (described below).
Attribute value that contains the pattern anywhere within the full
string (*= operator)
fieldset td[headers*=header1] selects all table cells that have an
attribute called headers with a value containing the string
header1. If, for example, we have cells that have attribute values
like header11 or header111, those will be selected as well.
Attribute values that end with the pattern ($= operator)
fieldset td[headers$=_header1] selects all table cells that have
an attribute called headers with a value ending with the string
_header1.

Pseudo-class selectors
:first-child matches the first child element of another element
Link state selectors (:link, :visited, :hover, :active ) used for styling
links differently, according to their state. Very often used for
navigation menus

:link styles an anchor element with the href attribute declared


:visited styles an anchor element after it has been clicked
:hover styles an element while the cursor is hovering it
:active styles the active link.

You will recognize pseudo-class selectors easily because


they always start with the : symbol. If it starts with two
:, then thats either a pseudo-element selector (like
::before) or written that way because of new syntax rules,
but those cases are not that common.
The link pseudo-class selectors should be declared in the
order specified above (LVHA) in order for them to work
properly.

CSS Box Model

In HTML, you can consider all elements to be boxes, from a visual


standpoint. This box model is a container around every HTML
element, and it allows better formatting (borders around elements,
spaces between them and so on).
Boxes/elements can be inline (no page break between them) or
block-level (a page break is automatically set after each element).
Divs are block-elements by default, while spans and imgs are inline.

margin the space outside of the box.


border the space between the margin and the
padding.
padding the space between the border and the
content
content the remaining space inside the box, after
subtracting the padding.

General properties containers

Dimension of elements can be specified in pixels, %, em or pt. The most used are
pixels and %.
width, max-width inline elements mostly ignore the width and height
properties, so its best to set them as block elements and then set the
width/height.
height, max-height (height: auto = flexible height, decided by height of
children; height: 100% = total height of its container)
coordinates of elements
top, left, right, bottom only for positioned elements (if element does
not have position (relative/absolute) property declared, then these
properties are useless on their own)
visibility: hidden or visible. hidden hides the element, but does not free its space
in the layout of the page (if you need this, use display:none;). Default is visible.
display: block, inline or none. You can set display: inline on a div to make it behave
like a span, or display:block on a span or an image to make them behave like divs.
background-color: this can be specified as a hex value (ex. #e0e0e0), as rgb ( ex.
rgb(255,255,255)) or as words (ex. blue);

General properties
containers, cont.
background-image: can use an image as background, the value must be
an url and must be specified like this: url(some URL string). To repeat the
background image throughout the whole containers space, use the
background-repeat property (values are repeat-x, repeat-y, repeat and
no-repeat).
overflow (overflow: hidden - causes all text that cant fit inside the parent
container to not be displayed at all; overflow: scroll creates a scroll
vertical and/or horizontal scrollbar for the text that cant fit in its container,
depending on the situation.
overflow-x or overflow-y can be used to enforce horizontal or vertical
scrolling only)

z-index a property which takes numeric value. Applying it on a positioned element (you can
read about those in the Positioning of elements section) causes the element that has the
higher z-index to be displayed in its entirety when overlapping with another element that has a
lower z-index. The usual default value is 0, and you can specify negative values in order to give
a lower priority to an element.
A very common problem with z-index and embedded Flash videos is that the Flash video is
given a higher stacking priority. To solve the issue, add this in the Flash object code:
<param name="wmode" value=transparent" />

General properties - text


color : containers have background colors, text has color. It
is specified in the same way as background-color.
text-align : left, right, center or justify
font-size
text-decoration : used for underlining. Values are
underline, overline, line-through or none.
text-transform: used for all-uppercase or lowercase texts.
Values are uppercase, lowercase and capitalize.
font-weight : used for bolding. Values are bold or normal.
font-style : used for italicizing. Values are italic and
normal.
font-family: holds several font names in order to specify the
font used to display text.

Inheritance
Inheritance is the process by which elements inherit the values of
properties from their ancestors in the tree. Some properties, e.g. color, are
automatically inherited by the children of the element to which they are
applied. Each property defines whether it will be automatically inherited.
Normally, think about text properties when you think about inheritance.
Some properties like margin, borders, padding, width and so on do not
inherit (if they would, it would cause mayhem.)
The inherit value can be set for any property and will force a given
element to inherit its parent elements property value, even if the property
is not normally inherited.
Three main sources of style information form a cascade. They are:
The browser's default styles for the markup language.
Styles specified by a user who is reading the document.
The styles linked to the document by its author. These can be specified in
three places:
In an external file
In a definition at the beginning of the document: use this method only
for styles that are used only on that page.
On a specific element in the body of the document:this is the least
maintainable method, but can be used for testing.

Positioning of elements
What we have presented so far (the box model and some properties to
work with) allows you to modify the size or space between elements,
but they still always remain in place depending on their position in the
HTML source code. The position of the rendered elements can be
changed by using the position property.
position: static this is default, no need to write it if you just want
the elements to stay where they are;
position: relative sets the element to a position that is relative to its
current position (you can specify the new position by using the top, left,
right and bottom properties after declaring the position as relative)
ex. div {position: relative; top:50px; left:145px; } sets the all div
elements 50 pixels below and 145 pixels to the left from where they
previously were.
You can also specify negative values, this is the equivalent of setting
the opposite property as the absolute value of the specified amount
of pixels.

Positioning of elements,
cont.

position: absolute sets the element in a position that is relative to the


nearest containing positioned element or offset parent (a positioned
element is an element that has a position set as absolute or relative). If no
ancestor element is positioned, then the <html> element is taken as
default. An absolute-positioned element is removed from the normal
content flow all the elements behave rendered as if this element isnt
there anymore, they get rearranged accordingly.
Ex. <!DOCTYPE html>
<html>
<head>
<style>
div#d1 {top:50px; left:105px; width:200px; height:200px; border: 1px solid black}
div#d2 {position: absolute; top: 50px; left: 50px; border:3px solid red; width:500px;
height:200px; }
</style>
</head>
<body>
<div id = 'd1'><div id = 'd2'>Blah blah blah blah.</div></div>
</body>
</html>

Positioning of elements,
cont.
In the previous example, the div d2 is absolutely
positioned, and since the containing element, d1 is not
positioned, then the only available element is the html tag,
so the starting coordinates for d2 will be that of the html
element (left: 0 ,top: 0), and the final position of d2 will be
(top: 50, left: 50).
What happens, though, if we set d1 as position: relative?
position: fixed a subset of position: absolute, the
element will stay in place, regardless of scroll. This is only
useful if we need an element to be seen regardless of where
the respondent is on the page (ex. technically, we could set
the headers of a grid with 200 rows as fixed and these
headers will always be seen near the top of the grid).

Horizontal centering

Centering an element w.r.t the containing element is done by setting the


left-margin as auto and the right-margin as auto, and by specifying a
width (usually in percentages). The auto part tells the browser to decide
the margins the browser will set them equally.

Ex.
<style>
div#d1 {
background-color: lightgrey;
width: 350px;
min-height:30px;
border: 25px solid navy;
}
#d2{margin: 0 auto; width:60%;}
</style></head>
<body>
<div id = 'd1'><div id = 'd2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.<div/></div>

Horizontal centering, cont.


If the element is not 100% wide (a.k.a is not as wide as
the containing element), then you can set margin: 0
auto on it. If that doesnt do the trick, try setting a
width and/or setting the display as block.
If the element is 100% wide, then you probably want to
center the content within it. In that case, its useful to
try the text-align property (text-align:center), even if
the content youre centering isnt necessarily text (it
works on images too, for example).
Example for centering all the elements on a Confirmit
page:
.question_text_ng, .instruction_text{text-align:center}
.confirmit-grid, fieldset table{margin: 0 auto;}

Bonus: Vertical centering


.Absolute-Center {
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
height:100px;
}

For this trick to work, the height property


must be declared.
(via
http://blogs.adobe.com/strack/2013/08/
23/absolute-ly/)

Floats

Floating is a technique which allows you to quickly position an element to


the leftmost or rightmost area of its containing element. Unfortunately, this
has some side-effects, which we will discuss below:
When floated, an element behaves somewhat like an absolute-positioned
one, and is removed from the content flow. The rest of the elements are
rendered as if this one isnt even there anymore.
Lets create an example where we have a div element containing 2 divs. The
parent div will take 80% of the containig element and will be centered, while
the child divs will be both 100 pixels wide. Below the parent div, we will
create a p element containing some text. The whole setup looks like below:

<div class="center">
<div id = 'p1'>SOME TEXT TO THE
<div id = 'p2'>SOME TEXT TO THE
</div>
<p id = 'p3'><b>Some text outside
<style>
.center {
margin: 0 auto;
width: 80%;
background-color: #b0e0e6;
border:1px solid black;
}
#p1{width:100px; border:1px solid
#p2{width:100px; border:1px solid
</style>

LEFT!</div>
RIGHT!</div>
the divs.</p>

black;}
black;}

Floats, cont.

We will float the first child div to the left and the second to the right.
<style>
div#p1 {float: left;}
div#p2 {float: right;}
</style>
You can see that the parent div has lost its floated children, and so it has shrunk to the height
of 1 pixel, since that was the only dimension property it had. However, this isnt the only
problem : the text that was previously below the divs is now visually on the same level as them.
We can fix these problems easily:
solve the parent problem by floating the parent element as well. However, this will mess up the
horizontal centering of the parent element.
Applying overflow:auto on the container also does the job, but this would be using auto to solve
a problem it isnt suited for.
Preferred way: solve the outside text problem by applying the clear property on the external p
with a value of both, or add an empty div in the container and apply clear:both on it this will
tell the browser that this element should not have any floated elements to its left or right. We
will also hide the parent div, since we wouldnt need it in this case.
<style>p {clear:both;}</style>
(if, for example, we had only one div floated to the left, it would have been enough to say clear:
left).

Specificity

So far we have seen ways of making element behave in a certain way, based on some
rules targeting them specifically. But what happens when we have 2 conflicting rules
targeting the same element(s)? What happens, for example, if were targeting the same
element, once by id and the second time by its name together with the class name?
Which rule is applied in the end?
This is actually decided by a number associated to each selector of a rule (and the
mechanism which allows this is called specificity). Each unique part of a selector has a
fixed number corresponding to it, and those numbers are added together in the end in
order to compute the specificity.
Id 100
Class 10
Attribute selector, pseudo-class selector, pseudo-element selector - 10
Element name 1
Using commas to separate elements does not raise specificity of rule (credits to Cosmin
Gheorghiu and Laura Avram )
In addition to these, any rule declared in an inline style (that is, inside the element tag),
has 1000 added to its specificity, in order to beat other rules. However, the general rule
is that inline styles should be avoided, as they are not at all maintainable.
Ex.

fieldset .confirmit-grid td[headers$=header1] > #q111_1_1


has a specificity of 122.

Specificity, cont.
Sometimes, in order to overwrite some of the values of some general
properties of an element, it helps to append !important to the property:
value pair (ex. .grid_scale_ng { border-left:1px solid red !important; }).
This will try to apply this property-value pair and ignore the other rules,
but the use of !important is generally frowned upon and seen only as a
last resort.
You can use web inspectors (like Firebug or Chrome WI) in order to see
the CSS rules and easily remove them/modify them.
So, considering the above, if a rule declared in a style just will not
apply
despite all your efforts, its possible that:
its specificity is less than that of a previously declared rule, so adding an
id (ex, the id of the page you are on) will help beat that rule
a rule that was declared in an inline style conflicts with yours, so you
need to raise it by 1000 (declare it as an inline style in some element)
and probably use an extra id in the selector.
https://specificity.keegan.st / - to calculate specificity

Table styling
You can collapse all the borders in a table into a single one by
using the border-collapse property. This will make all the table
cells have only one border width between them, as opposed
to the normal two (the right border of the left cell and the left
border of the right cell). The possible values for bordercollapse are collapse and separate.
Table elements also have the border-spacing property, which
lets you specify a distance between borders. This will work
only on the collapsed borders model (see below).
Ex. create a distance of 20 pixels between each row of a confirmit grid:
fieldset .confirmit-grid {
border-collapse: separate;
border-spacing: 0px 20px;
}

Table styling, cont.

You can make containers behave like table elements if you structure them just like
a table by setting their display property to that part of the table that it should stand
for (so far we have used display: inline and block only)
Ex. A block of divs that will be displayed like a table.
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">td11</div>
<div style="display: table-cell;">td12</div>
<div style="display: table-cell;">td13</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">td21</div>
<div style="display: table-cell;">td22</div>
<div style="display: table-cell;">td23</div>
</div>
</div>

The vertical-align property is used for table cells and inline elements, but it
behaves differently depending on which type of element it is used. The most used
values are: top, middle and bottom.
Vertical-align in table cells or block elements specifies the vertical alignment of
the content inside the cells.
Vertical-align for inline elements is applied to the elements themselves

You might also like