CSS Support¶
Yawrap has it’s basic support of cascade style sheets. During creation of html page you can
append styles definition as strings or dictionaries. It will appear in /html/head/style
section
of current yawrap document. Also linking CSS as external file is possible.
Note
The class
keyword, widely used in html/css
will cause python’s syntax error if used as keyword argument,
so you can define it by typing klass
instead. Yattag will convert it to class
automatically.
Internal CSS as str¶
from yawrap import Yawrap, EmbedCss
out_file = '/tmp/css_1.html'
jawrap = Yawrap(out_file)
with jawrap.tag('div', klass='content'):
with jawrap.tag('span'):
jawrap.text('CSS in yawrap.')
jawrap.add(EmbedCss('''
.content { margin: 2px; }
.content:hover {
background-color: #DAF;
}'''))
jawrap.render()
print(open(out_file, 'rt').read())
That outputs:
<!doctype html><html lang='en-US'>
<head>
<meta charset='UTF-8' />
<style>
.content { margin: 2px; }
.content:hover {
background-color: #DAF;
}</style>
</head>
<body><div class='content'><span>CSS in yawrap.</span></div></body>
</html>
The method add()
called with action EmbedCss()
appends CSS definitions to page head section.
It can be called several times, output CSS will be sorted and nicely joined.
The passed CSS can be a string without any formatting. It will be reformatted during page generation.
Internal CSS as python’s dict¶
The argument passed to add_css()
can be a regular python dictionary definins css.
css_dict = {
'.content': {
'color': '#321',
'padding': '1px 16px'
},
'span': {
'border': '1px solid black'
}
}
# reusing jawrap instance from subsection above.
jawrap.add(EmbedCss(css_dict))
jawrap.render()
print(open(out_file, 'rt').read())
Will give:
<!doctype html><html lang='en-US'>
<head>
<meta charset='UTF-8' />
<style>
.content { margin: 2px; }
.content:hover {
background-color: #DAF;
}</style>
<style>
.content {
color: #321;
padding: 1px 16px;
}
span {
border: 1px solid black;
}
</style>
</head>
<body><div class='content'><span>CSS in yawrap.</span></div></body>
</html>
Note the previous .content
selector’s definition is overwritten with new one.
External CSS from local file¶
It’s also possible to link style sheet from local file. It’s source can be placed anywhere as long as
it’s accessible for build process. Yawrap will copy it and place in default resources
directory, next to
target file (or next to root document):
from yawrap import Yawrap, LinkCss
out_file = '/tmp/css_2.html'
jawrap = Yawrap(out_file)
jawrap.text('CSS from local file.')
jawrap.add(LinkCss.from_file('/tmp/files/my.css'))
jawrap.render()
External CSS from web¶
Using global CSS from some resources can be obtained by calling add()
with ExternalCss
object.
from yawrap import Yawrap, ExternalCss
out_file = '/tmp/css_3.html'
jawrap = Yawrap(out_file)
jawrap.text('CSS from web.')
jawrap.add(ExternalCss("https://www.w3schools.com/w3css/4/w3.css"))
html = jawrap.getvalue()
print(html)
<!doctype html><html lang='en-US'>
<head>
<meta charset='UTF-8' />
<link type='text/css' href='https://www.w3schools.com/w3css/4/w3.css' rel='stylesheet' />
</head>
<body>CSS from web.</body>
</html>
CSS defined on class level¶
You can derive own class from Yawrap
or Navrap
class and define its CSS that will be inherited
in its subclasses. You have to define css class attribute either as a string or a dictionary.
from yawrap import Yawrap, EmbedCss
out_file = '/tmp/css_4.html'
class MyStyledPage(Yawrap):
resources = [EmbedCss('''\
body {
margin: 0px;
padding: 13px 14px;
}
.content {
color: #BAC;
margin: 2px;
}''')
]
myStyled = MyStyledPage(out_file)
with myStyled.tag('div', klass='content'):
myStyled.text('Deriving CSS.')
myStyled.render()
print(open(out_file, 'rt').read())
Should give:
<!doctype html><html lang='en-US'>
<head>
<meta charset='UTF-8' />
<style>
body {
margin: 0px;
padding: 13px 14px;
}
.content {
color: #BAC;
margin: 2px;
}
</style>
</head>
<body><div class='content'>Deriving CSS.</div></body>
</html>
Adding CSS is still possible, but to instance of the derived class (to myStyled
above), not
to the class definition (here MyStyledPage
), so the appended CSS will not be inherited.